TinyMCE Vue的使用

环境

• vue：3.2.13
• tinymce：6.3.1

快速引入

1. 在public目录下创建js文件夹，将 tinymce 文件夹放入此中
2. 前往官网下载中文js，放入 tinymce/plugins 文件中
3. 在 index.html 中引入 tinymce.min.js，如下：

   <script src="js/tinymce/tinymce.min.js" type="text/javascript"></script>

4. 在vue文件中使用如下代码进行初始化

   <template>
   <textarea id="text">
   </textarea>
     <button @click="upload()">上传</button>
   </template>
   
   <script setup>
   import {onMounted} from "vue";
   
   let editor;
   onMounted(async () => {
     editor = await tinymce.init({
       selector: 'textarea#text',
       placeholder: "说点什么吧",
       language: 'zh-Hans',
       menubar: false,
       // plugins: "lineheight,kityformula-editor,wordcount,image,table," +
       //     "media,link,insertdatetime,help,fullscreen,lists,advlist,anchor,charmap,code,codesample,directionality,emoticons",
       // toolbar: [
       //     'undo redo emoticons bold italic underline forecolor backcolor ltr rtl hr bullist numlist table help',
       //     'file media link insertdatetime anchor charmap lineheight code codesample wordcount kityformula-editor fullscreen'
       // ],
       plugins:'code,table,autosave,lists,advlist,anchor,autolink,charmap,emoticons,insertdatetime,media,preview,quickbars,searchreplace,template,wordcount',
       toolbar: ['aligncenter | alignjustify | alignleft | alignnone | alignright | blockquote | backcolor | blocks | bold | copy | cut | fontfamily | fontsize | forecolor | h1 | h2 | h3 | h4 | h5 | h6 | newdocument | outdent | paste | pastetext | print | redo | remove | removeformat | selectall | strikethrough | styles | subscript | superscript | underline | undo | visualaid | code | restoredraft | bullist | anchor | link | charmap | emoticons | insertdatetime | media | preview | searchreplace | table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol | template | wordcount'],
       color_cols: 5,
       insertdatetime_formats: ["%H点%M分", "%Y年%m月%d日", '%Y年%m月%d日 %H点%M分'],
       textpattern_patterns:[
         {start: '*', end: '*', format: 'italic'},
         {start: '**', end: '**', format: 'bold'},
         {start: '#', format: 'h1'},
         {start: '##', format: 'h2'},
         {start: '###', format: 'h3'},
         {start: '####', format: 'h4'},
         {start: '#####', format: 'h5'},
         {start: '######', format: 'h6'},
         {start: '1. ', cmd: 'InsertOrderedList'},
         {start: '* ', cmd: 'InsertUnorderedList'},
         {start: '- ', cmd: 'InsertUnorderedList' }
       ],
       automatic_uploads: false,
       images_upload_handler: (blobInfo, progress) => new Promise(resolve => {
         progress(100)
         // 在这里进行上传操作 并返回地址
         console.log(2)
         resolve('data:' + blobInfo.blob().type + ';base64,' + blobInfo.base64());
       }),
       file_picker_callback: function(callback, value, meta) {
         var input = document.createElement('input');
         input.setAttribute('type', 'file');
         var filetype='.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4';
         switch(meta.filetype){
           case 'media':
             filetype = '.mp3, .mp4, .avi, mpeg'
             break;
           case 'file':
           default:
         }
         input.setAttribute('accept', filetype);
         input.click();
         input.onchange = function() {
           var file = this.files[0];
           // 应当进行上传操作
           console.log(file.name);
         }
       },
     })
   })
   async function upload() {
     console.log(1)
     await editor[0].uploadImages()
     console.log(3, editor[0])
   }
   </script>
   
   <style scoped>
   #text {
     width: 50vw;
     height: 50vh;
   }
   
   </style>

• 配置由 Q群 TinyMCE 兔818515594 中 网友 呆头呆脑 提供 

js下载地址（天翼云盘）：

Gitee: https://gitee.com/lihanxaing/work-public-open-source