項目使用 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的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。