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>
效果图
