vueにTinymceリッチテキストエディタを追加

1.package.jsonにプラグインをインストールする

"@tinymce/tinymce-vue": "^2.1.0",
"tinymce": "^5.1.5"

追加後、再インストール
2.パッケージコンポーネントは直接使用することもでき、パッケージは後期の延性を考慮する

 

//     ，          

      

        

            
        
        

      
  

     手动引入需要的插件 

  import tinymce from 'tinymce/tinymce'
  import 'tinymce/themes/silver/theme'
  import Editor from '@tinymce/tinymce-vue'
  import 'tinymce/plugins/image'
  import 'tinymce/plugins/link'
  import 'tinymce/plugins/code'
  import 'tinymce/plugins/table'
  import 'tinymce/plugins/lists'
  import 'tinymce/plugins/contextmenu'
  import 'tinymce/plugins/colorpicker'
  import 'tinymce/plugins/textcolor'
  import 'tinymce/plugins/preview'
  import 'tinymce/plugins/media'

Dataでエディタを定義します.アップロード方法は2種類あるので、2つのアップロード方法を書いてmethodsに書いていましたが、呼び出すとき、調整できません.私が書いた問題があるかもしれません.自分で試してみてください.

init: {
          fontsize_formats: '8px 10px 12px 14px 16px 18px', //    
          language_url: '../../static/tinymce/langs/zh_CN.js',
          language: 'zh_CN',
          skin_url:  '../../static/tinymce/skins/ui/oxide',
          height: 500,
          content_css: ['../../static/tinymce/skins/content/default/content.css'],
          accept: '',
          // eslint-disable-next-line standard/object-curly-even-spacing
          branding: false,
          selector: '#textarea',
          paste_data_images: false,
          file_picker_types: 'media',
          media_live_embeds: true,
          plugins: '  link table  lists image code colorpicker textcolor  contextmenu ', // media
          toolbar: '  preview bold italic  underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | undo redo | code uploadpic',
          audio_template_callback: function (data) {
            return ''
          },
          setup: (editor) => {
            // eslint-disable-next-line eqeqeq
            editor.ui.registry.addButton('preview', {
              text: '  ',
              onAction: (_) => {
                this.preview()
              }
            })
          },
          file_picker_callback: (cb, value, meta) => {
            //    meidia     ,  meta.filetype == 'media'   ，  file_picker_callback media(  )、image(  )、file(  )     
            // eslint-disable-next-line eqeqeq
            if (meta.filetype == 'media') {
              //        type=file     input
              let input = document.createElement('input')
              input.setAttribute('type', 'file')
              input.onchange = function () {
                let file = this.files[0]//         。       ，       
                uploadPic(file, cb)
                /*  let xhr, formData;
                 xhr = new XMLHttpRequest();
                 xhr.open('POST', self.apiUrl);
                 xhr.withCredentials = self.credentials;
                 xhr.upload.onprogress = function (e) {
                   //   (e.loaded / e.total * 100)
                 };
                 xhr.onerror = function () {
                   //           
                   console.log(xhr.status);
                   return;
                 };
                 xhr.onload = function () {
                   let json;
                   if (xhr.status < 200 || xhr.status >= 300) {
                     console.log('HTTP   : ' + xhr.status);
                     return;
                   }
                   json = JSON.parse(xhr.responseText);
                   //      JSON   {status: 0, msg: "    ", data: {location: "/localImgs/1546434503854.mp4"}}
                   if(json.status==0){
                     //           
                     let mediaLocation=json.data.location;
                     //cb()    ， mediaLocation         
                     cb(mediaLocation, { title: file.name });
                   }else{
                     console.log(json.msg);
                     return;
                   }

                 }; */
              }
              //     
              input.click()
            }

            async function uploadPic(blobInfo, cb) {
              let formData = new FormData()
              //            ，    ，   
              // formData.append('file', blobInfo)
              // let res = await upload.upload(formData)
              // let data = res.data
              // eslint-disable-next-line eqeqeq
              // if (data && data.code == 0) {
              //   cb(data.data, {title: blobInfo.name})
              //   return data.data
              // } else {

              // }
            }
          },
          images_upload_handler: (blobInfo, success, failure) => {
            if (blobInfo.blob().size > 1024 * 1024) {
              failure('      ,   1M')
            } else {
              uploadPic(this.type)
            }

            async function uploadPic(type) {
              let formData = new FormData()
              //            ，    ，   
              // formData.append('file', blobInfo.blob())
              // let res
              // if (type === 'preview') {
              //   res = await pagemanager.uoloadImage(formData)
              // } else {
              //   res = await upload.upload(formData)
              // }
              // let data = res.data
              // // eslint-disable-next-line eqeqeq
              // if (data && data.code == 0) {
              //   success(data.data)
              // } else {
              //   failure('    ')
              // }
            }
          }
        }

リッチテキストの初期化

components: {Editor},

created() {
      tinymce.init(this.init)
},

 
*私がインストールを開始したバージョンは高すぎて、プラグインを導入した後、エディタをロードすることができなくて、それからバージョンを今使っているこれに下げて、ロードすることができます
ドキュメントや度娘にも言及されていますが、バージョンとプラグインの関係では、バージョンは5を超えてはいけません.