tinymce-vue富文本编辑器的使用

node安装项目依赖

npm install tinymce -S

npm install @tinymce/tinymce-vue -S

安装完成之后，在 node_modules 中找到 tinymce/skins 目录。在public（vue2.0是static） 目录下新建 tinymce 文件夹，然后将 skins 目录拷贝到 tinymce 目录下。
tinymce 默认是英文界面，所以还需要下载一个汉化包 zh_CN.js，

https://www.tiny.cloud/get-tiny/language-packages/

拷贝到 tinymce 目录下。

初始化

• 引用文件

import tinymce from 'tinymce/tinymce';
import Editor from '@tinymce/tinymce-vue';
import 'tinymce/themes/silver';
import 'tinymce/plugins/image'// 插入上传图片插件

• 注册Editor组件

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

• init数据，plugins和toolbar可根据需求自行引入

data(){return{init: {language_url: '/tinymce/tinymce_languages/langs/zh_CN.js',// 语言包的路径language: 'zh_CN',//语言skin_url: '/tinymce/skins/ui/oxide',// skin路径height: 600,//编辑器高度branding: false,//是否禁用“Powered by TinyMCE”menubar: true,//顶部菜单栏显示,imageupload_url:'',upload_image_url: '/tinymce', //配置的上传图片的路由plugins: 'image uploadimage',toolbar:'bold | uploadimage | removeformat ',// images_upload_url:'http://192.168.10.236:8010/ac/file/uploads/noticeAnnex/0',images_upload_base_path: '/some/basepath',images_upload_credentials: true,selector: 'textarea',  // change this value according to your html,images_upload_handler: function (blobInfo, success, failure) {// 服务端接收文件的参数名，文件数据，文件名//blob转file对象let files = new window.File([blobInfo.blob()], blobInfo.filename(), {type: blobInfo.blob().type});let json={file:[files]}apiTinymceUpload('noticeAnnex2222','0',json).then(res=>{success(openFileApi+res.fileIdList[0])}).catch(err=>{failure('上传失败: ' +err.statusMsg);return;})}},value:''}},

• mounted调用方法里

tinymce.init({})

 参考案例

<template><div class='tinymce'><editor id='tinymce' v-model='editorData.detail' :init='init'></editor></div>
</template><script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/plugins/link'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/image'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/media'
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/print'
import 'tinymce/plugins/anchor'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/help'export default {name: 'tinymce',props: ['editorData'],components: {Editor},data () {return {init: {height: 500,plugins: 'link lists image code table wordcount preview media  charmap print anchor searchreplace visualblocks fullscreen insertdatetime help',toolbar: 'bold italic underline strikethrough | fontselect | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',language_url: '/static/tinymce/zh_CN.js',language: 'zh_CN',skin_url: '/static/tinymce/skins/ui/oxide'}}},mounted () {tinymce.init({})}
}
</script>

效果图