TinyMCE Vue的使用

TinyMCE Vue的使用

原创

c396e9e233140553

 

环境

  • 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

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    请登录后查看评论内容