tinymce富文本vue使用教程

tinymce富文本vue使用教程

• • • 一、资源下载
    • 二、下载中文语言包
    • 三、初始化富文本信息
    • 四、扩展插件
    • 五、其他注意
    • 六、tinymce一些功能配置
    • 七、图片上传（个人整理图片上传两种方式）
    • 八、封装

一、资源下载

npm install tinymce -S  // 当前版本^5.1.0
npm install @tinymce/tinymce-vue -S  // 当前版本^3.0.1

二、下载中文语言包

tinymce提供了很多的语言包，这里我们下载中文语言包

下载的时候可以先在static下面建个目录tinymce

• 下载tinymce完成后在node_modules 中找到 tinymce/skins目录，将其复制到static/tinymce目录下面
• 下载完中文语言包后，将其解压到static/tinymce目录下
  

三、初始化富文本信息

import tinymce from 'tinymce'
import Editor from '@tinymce/tinymce-vue'
// import 'tinymce/themes/modern/theme'
import 'tinymce/themes/silver/theme'
//如果报错找不到  import 'tinymce/themes/modern/theme',可以替换成 import 'tinymce/themes/silver/theme'
//不过一般都会报错,说找不到的....

• tingmce-vue 是一个组件,需要在components中注册,然后再使用

components: {Editor}

<editor id="tinymce" v-model="value" :init="init"></editor>

• 这里的 init 是 tinymce 初始化配置项，完整 api 可以参考官方文档

• 编辑器需要一个 skin 才能正常工作，所以要设置一个 skin_url 指向之前复制出来的 skin 文件

init: {selector: '#tinymce',  // tinymce的idlanguage_url: '/static/tinymce/langs/zh_CN.js',   // 语言包路径language: 'zh_CN',  // 语言skin_url: '/static/tinymce/skins/ui/oxide',  // 编辑器需要一个skin才能正常工作，所以要设置一个skin_url指向之前复制出来的skin文件
}

• 同时在 mounted 中也需要初始化一次：

mounted() {tinymce.init({})
}

本人以上配置完毕后界面如下且会报两个错误


解决方案：导入以下缺失路径

import 'tinymce/icons/default/icons'
export default {data () {return {// init中添加如下信息init: {content_css: '/static/tinymce/skins/content/default/content.css',            }        }    }
}

四、扩展插件

完成了上面的初始化之后，就已经能正常运行编辑器了，但只有一些基本功能tinymce 通过添加插件 plugins 的方式来添加功能
比如要添加一个上传图片的功能，就需要用到 image 插件，添加超链接需要用到 link 插件
在import里引入插件

import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'
//下面的插件是自带的,不需要引入,引入的时候,浏览器会有个警告,说这个插件是内核自带,请自行删除
// import "tinymce/plugins/contextmenu";
// import "tinymce/plugins/colorpicker";
// import "tinymce/plugins/textcolor";

在data的init对象里引入插件

plugins: 'image link code table lists wordcount',  // 引入插件

添加了插件之后，默认会在工具栏 toolbar 上添加对应的功能按钮，toolbar 也可以自定义

toolbar: 'fontselect fontsizeselect link lineheight forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | image quicklink h2 h3 blockquote table numlist bullist preview fullscreen', // 工具栏

五、其他注意

如果出现图的报错

这是因为你import里引入的插件和plugins引入的插件没有相互对应上,删除部分插件调整
如果还存在报错,这是因为 init 参数地址错误
这是因为 init 参数地址错误，请核对下 init 参数中的几个路径是否正确,如果参数无误，可以先删除 language_url 和 language 再试

六、tinymce一些功能配置

// 注意：在data的init中配置
browser_spellcheck: true, // 拼写检查
branding: false, // 去水印
elementpath: false, // 禁用编辑器底部的状态栏
statusbar: false, // 隐藏编辑器底部的状态栏
paste_data_images: true, // 允许粘贴图像
menubar: false, // 隐藏最上方menu
fontsize_formats: '14px 16px 18px 20px 24px 26px 28px 30px 32px 36px', // 字体大小
font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue;PingFang SC;sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun;serifsans-serif;Terminal=terminal;monaco;Times New Roman=times new roman;times', // 字体
file_picker_types: 'image',
images_upload_credentials: true,

七、图片上传（个人整理图片上传两种方式）

// 第一种
// 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
images_upload_handler: (blobInfo, success, failure) => {const img = 'data:image/jpeg;base64,' + blobInfo.base64()success(img)
}// 第二种
// 此处为调用ajax接口上传 （此处更改相应的接口参数、路径信息）
images_upload_handler: (blobInfo, success, failure) => {let config = {headers: {'Content-Type': 'multipart/form-data'}}let formdata = new FormData()formdata.append('FFILE', blobInfo.blob())formdata.append('NAME', 'zcfa')formdata.append('PARENT_ID', '47e0ab7a2d6b409aac60fcd1ae983f61')axios.post(window.SITE_CONFIG.baseUrl + '/file/batchUpload', formdata, config).then(({data}) => {if (data && data.result === 'success') {this.$message({message: '上传成功',type: 'success',duration: 1500})// 存放返回成功的图片路径success(data.imgUrl[0])} else {failure('上传失败！！！')}}).catch(() => {failure('上传错误！！！')})
}

八、封装

子组件tinymce(完整代码)

<template><div class="tinymce-container">
<!--    <div style="color: #fff">{{value}}</div>--><editor id="tinymce" v-model="value" :init="init"></editor></div>
</template><script>import axios from 'axios'import tinymce from 'tinymce'import Editor from '@tinymce/tinymce-vue'import 'tinymce/themes/silver/theme'import 'tinymce/icons/default/icons'import 'tinymce/plugins/image'import 'tinymce/plugins/link'import 'tinymce/plugins/code'import 'tinymce/plugins/table'import 'tinymce/plugins/lists'import 'tinymce/plugins/wordcount'export default {name: 'tinymce',props: {tinymceHtml: '',tinymceHeight: {type: Number,default: 500}},components: {Editor},data () {return {value: this.tinymceHtml,  // 父組件通过ref拿到该组件的值init: {selector: '#tinymce',  // tinymce的idlanguage_url: '/static/tinymce/langs/zh_CN.js',   // 语言包路径language: 'zh_CN',  // 语言skin_url: '/static/tinymce/skins/ui/oxide',  // 编辑器需要一个skin才能正常工作，所以要设置一个skin_url指向之前复制出来的skin文件content_css: '/static/tinymce/skins/content/default/content.css',height: 600,    // 编辑器高度plugins: 'image link code table lists wordcount',  // 引入插件toolbar: 'fontselect fontsizeselect link lineheight forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | image quicklink h2 h3 blockquote table numlist bullist preview fullscreen', // 工具栏browser_spellcheck: true, // 拼写检查branding: false, // 去水印elementpath: false, // 禁用编辑器底部的状态栏statusbar: false, // 隐藏编辑器底部的状态栏paste_data_images: true, // 允许粘贴图像menubar: false, // 隐藏最上方menufontsize_formats: '14px 16px 18px 20px 24px 26px 28px 30px 32px 36px', // 字体大小font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue;PingFang SC;sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun;serifsans-serif;Terminal=terminal;monaco;Times New Roman=times new roman;times', // 字体file_picker_types: 'image',images_upload_credentials: true,// 图片上传三个参数，图片数据，成功时的回调函数，失败时的回调函数// 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，// images_upload_handler: (blobInfo, success, failure) => {//   const img = 'data:image/jpeg;base64,' + blobInfo.base64()//   success(img)// }// 此处为调用ajax接口上传 （此处更改相应的接口参数、路径信息）images_upload_handler: (blobInfo, success, failure) => {let config = {headers: {'Content-Type': 'multipart/form-data'}}let formdata = new FormData()formdata.append('FFILE', blobInfo.blob())formdata.append('NAME', 'zcfa')formdata.append('PARENT_ID', '47e0ab7a2d6b409aac60fcd1ae983f61')axios.post(window.SITE_CONFIG.baseUrl + '/file/batchUpload', formdata, config).then(({data}) => {if (data && data.result === 'success') {this.$message({message: '上传成功',type: 'success',duration: 1500,onClose: () => {// this.fileList = []// this.$emit('refreshDataList')// this.visible = false}})// 存放返回成功的图片路径success(data.imgUrl[0])} else {failure('上传失败！！！')}}).catch(() => {failure('上传错误！！！')})}}}},watch: {tinymceHtml (newV, oldV) {this.value = newV}},mounted () {tinymce.init({})},methods: {}}
</script><style lang="scss" scoped>
</style>

父组件中使用该组件

<template><div><tinymce ref="tinymce" :tinymceHtml="content"></tinymce></div>
</template><script>import tinymce from '@/components/tinymce/tinymce'export default {data () {return {content: ''}},components: {tinymce}}
</script><style lang="scss" scoped>
</style>