TinyMCE的使用

项目使用 vue-cli 3.x 版本，tinymce 5

1、npm install tinymce -S

2、npm install @tinymce/tinymce-vue

3、public 文件夹下新建文件夹 tinymce ，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 tinymce 目录下 ，

4、还需要下载一个中文语言包 (https://www.tiny.cloud/get-tiny/language-packages/)，然后将这个语言包放到 tinymce  - lang 目录下

5、components 中注册 tinymce-vue 组件

　　

<template> <div><!--给editor加key是因为给tinymce keep-alive以后组件切换时tinymce编辑器会显示异常，在activated钩子里改变key的值可以让编辑器重新创建--><editor id="tinymceEditor" :init="tinymceInit" v-model="content" :key="tinymceFlag"></editor><Uploadmultipleref="imageUpload"action="//jsonplaceholder.typicode.com/posts/":on-success="insertImage"style="display:none"></Upload> </div> </template> <script> import tinymce from 'tinymce/tinymce' import 'tinymce/themes/silver/theme' import Editor from '@tinymce/tinymce-vue'import 'tinymce/plugins/textcolor' import 'tinymce/plugins/advlist' import 'tinymce/plugins/table' import 'tinymce/plugins/lists' import 'tinymce/plugins/paste' import 'tinymce/plugins/preview' import 'tinymce/plugins/fullscreen'export default {name: 'TinymceEditor',components: {'editor': Editor},data () {return {tinymceFlag: 1,tinymceInit: {},content: '本地图片上传功能仅为演示，实际使用需要补全图片存储地址'}},methods: {// 插入图片至编辑器 insertImage (res, file) {let src = '' // 图片存储地址tinymce.execCommand('mceInsertContent', false, `<img src=${src}>`)}},created () {const that = thisthis.tinymceInit = {skin_url: '/tinymce/skins/ui/oxide',language_url: `/tinymce/langs/zh_CN.js`,language: 'zh_CN',height: document.body.offsetHeight - 300,browser_spellcheck: true, // 拼写检查branding: false, // 去水印// elementpath: false, //禁用编辑器底部的状态栏statusbar: false, // 隐藏编辑器底部的状态栏paste_data_images: true, // 允许粘贴图像menubar: false, // 隐藏最上方menuplugins: 'advlist table lists paste preview fullscreen',toolbar: 'fontselect fontsizeselect forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | imageUpload quicklink h2 h3 blockquote table numlist bullist preview fullscreen',/*** 下面方法是为tinymce添加自定义插入图片按钮* 借助iview的Upload组件,将图片先上传到存储云上，再将图片的存储地址放入编辑器内容*/setup: (editor) => {editor.ui.registry.addButton('imageUpload', {// text: '插入图片',tooltip: '插入图片',icon: 'image',onAction: () => {let upload = that.$refs.imageUploadupload.handleClick()}})}}},activated () {this.tinymceFlag++},mounted () {} } </script>

6、视图组件中 引入 <tinymce-editor /> 组件

<tinymce-editor /> import TinymceEditor from '../../components/tinymce-editor/tinymce-editor'components: {TinymceEditor},

 

转载于:https://www.cnblogs.com/slightFly/p/11302908.html

《新程序员》：云原生和全面数字化实践50位技术专家共同创作，文字、视频、音频交互阅读

总结

以上是生活随笔为你收集整理的TinyMCE的使用的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。