1.安装tinymce包
npm install tinymce -S
npm install @tinymce/tinymce-vue -S
2.从node_modules/tinymce目录中将skins和plugins文件复制出来,在static目录创建了一个tinymce文件夹,然后将复制出来的文件放在tinymce里。
langs为下载的语言包
3.组件中引入tinymc
import tinymce from 'tinymce'; import Editor from '@tinymce/tinymce-vue'; import 'tinymce/themes/silver'; import 'tinymce/plugins/paste'; 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/colorpicker'; import 'tinymce/plugins/textcolor'; import 'tinymce/icons/default'
4.配置int
//powerpaste插件为tinymce的收费插件,下载之后放入static/tinymce/plugins文件夹
//该插件作用为复制word文档时批量上传图片,不需要的可以不要
props: { //传入一个value,使组件支持v-model绑定 value: { type: String, default: '' }, disabled: { type: Boolean, default: false }, plugins: { type: [String, Array], default:'lists image table wordcount powerpaste code'//插件 }, toolbar: { type: [String, Array], //菜单 default:'undo redo | formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat' } }, data() { return { //初始化配置 init: { language_url: 'tinymce/langs/zh_CN.js', //如果语言包不存在,指定一个语言包路径 language: 'zh_CN', //语言 skin_url: 'tinymce/skins/ui/oxide', content_css: 'tinymce/skins/content/default/content.css', height: '500px', selector: 'textarea', // change this value according to your HTML plugins: this.plugins, //插件 //以下为powerpaste插件配置 convert_urls: false, external_plugins: { powerpaste: `/tinymce/plugins/powerpaste/plugin.min.js` // 注意这里路径一定要写对!!!一定要写对 然后在puligins里添加 }, end_container_on_empty_block: true, powerpaste_word_import: 'propmt',// 参数可以是propmt, merge, clear,效果自行切换对比 powerpaste_html_import: 'propmt',// propmt, merge, clear powerpaste_allow_local_images: true, paste_data_images: true, //以上为powerpaste插件配置 toolbar: this.toolbar, //工具栏 branding: false, //技术支持(Powered by Tiny || 由Tiny驱动) menubar: true, //菜单栏 theme: 'silver', //主题 //此处为图片上传处理函数,这个直接用了base64的图片形式上传图片, //如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler images_upload_handler: (blobInfo, success, failure) => { console.log(blobInfo, success, failure) } }, }; },