富文本编辑器使用步骤

56 阅读 0 评论 37 点赞

我是靠谱客的博主明亮楼房，最近开发中收集的这篇文章主要介绍富文本编辑器使用步骤，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.安装两个插件tinymce 和 @tinymce/tinymce-vue

npm install tinymce@5.10.3 @tinymce/tinymce-vue@5.0.0 -S

@tinymce/tinymce-vue 是对tinymce进行vue的包装，主要作用当作vue组件使用

-S保存到package.json文件

注意：不要安装tinymce最新版本，安装6.0以下版本，否则图片上传会报错

2.拷贝node_modules/tinymce下的目录拷贝到public/tinymce下

icons、plugins、skins、themes
汉化 langs/zh_CN.js，语言包下载地址

3.用组件封装，方便重用

在 components/richtext/RichText.vue

4.在RichText.vue完成富文本框功能的实现

引入核心对象

//引入tinymce编辑器
import Editor from '@tinymce/tinymce-vue'
//引入node_modules里的tinymce相关文件文件
import tinymce from 'tinymce/tinymce'

2.使用过editor组件

注册组件

components: {
Editor
}

使用组件

<Editor v-model="contentValue" :init="initOption" :disabled="disabled" />

3.为RichText组件自定义属性

disabled 禁用状态
plugins 可用插件
toolbar 工具栏
modelValue 用于自定义RichText组件的v-model指令，名字是固定的。

4.初始化Editor组件,在data()选项中定义，并实现图片上传

initOption:{
base_url: "/tinymce", //【必要参数】指定public的目录
language: 'zh_CN', //语言类型，默认会到tinymce/langs/zh_CN.js文件
plugins: this.plugins, //插件配置
toolbar: this.toolbar, //工具栏配置，设为false则隐藏
toolbar_mode:"sliding", //工具栏移除模式 floating / sliding / scrolling / wrap
fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', //字体大小
font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;', //字体样式
lineheight_formats: "0.5 0.8 1 1.2 1.5 1.75 2 2.5 3 4 5", //行高配置，也可配置成"12px 14px 16px 20px"这种形式
height: 400, //注：引入autoresize插件时，此属性失效
placeholder: '在这里输入文字',
branding: false, //tiny技术支持信息是否显示
resize: false, //编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
elementpath: false, //元素路径是否显示
content_style: "img {max-width:100%;}", //直接自定义可编辑区域的css样式
paste_data_images: true, //图片是否可粘贴
//自定义图片上传逻辑
images_upload_handler: (blobInfo, success, failure) => {
const formData = new FormData();
formData.append("file", blobInfo.blob());
console.log(upload);
upload(host + "/upload/admin", formData).then((res) => {
success(res.url);
}).catch((err) => {
console.log(err);
failure(err.response.data.message);
});
}
}

5.自定义RichText组件v-mode，定义计算属性contentValue，使用get和set巧妙的完成RichText和Editor两个组件之间的数据联动

props: {
//用于自定义v-model的value，这个名称是固定的
modelValue: {
type: String,
default: ''
}
},
emits: ['update:modelValue'],//更新modelValue事件
computed: {
//富文本框内容
contentValue: {
get() {//取值
return this.modelValue;
},
set(value) {//赋值
this.$emit("update:modelValue", value)
}
}
}

6.富文本的多样化功能配置

props: {
plugins: {
type: [String, Array],
default: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount textpattern autosave '
},
toolbar: {
type: [String, Array],
default: 'fullscreen undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent |
styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat |
table image media charmap hr pagebreak insertdatetime print preview | code selectall searchreplace visualblocks | indent2em lineheight formatpainter axupimgs'
},