tinymce富文本

tinymce从本地引入加载

先从官网下载对应版本包之后复制到public下 附官网：https://www.tiny.cloud/get-tiny/self-hosted/

tinymce组件中改动如下：

const tinymceCDN = "/js/tinymce/tinymce.min.js"/*https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js*/

initTinymce() {
      const _this = this
      window.tinymce.init({
        selector: `#${this.tinymceId}`,
        /*language: this.languageTypeList['zh'],*/
        language_url:'/js/tinymce/langs/zh_CN.js',
        height: this.height,
        body_class: 'panel-body ',
        object_resizing: true,
        toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
        menubar: this.menubar,
        plugins: plugins,
				end_container_on_empty_block: true,
        powerpaste_word_import: 'propmt',
				powerpaste_html_import: 'propmt',
				powerpaste_allow_local_images: true,
				paste_data_images: true,
        code_dialog_height: 450,
        code_dialog_width: 1000,
        advlist_bullet_styles: 'square',
        advlist_number_styles: 'default',
        imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
        default_link_target: '_blank',
        link_title: false,
        fontsize_formats: "11pt 12pt 12pt 14pt 18pt 24pt 36pt 72pt",
        nonbreaking_force_tab: true, // inserting nonbreaking space   need Nonbreaking Space Plugin
        init_instance_callback: editor => {
          if (_this.modelValue) {
            editor.setContent(_this.modelValue)
          }
          _this.hasInit = true
          editor.on('NodeChange Change KeyUp SetContent', () => {
            this.$emit('update:modelValue', editor.getContent())
          })
        },
				paste_preprocess: (plugin, args) => {
					// 处理远程图片
					let imageArray = []
					args.content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, capture) => {
						//判断是否需要本地化
						if(capture.indexOf('//')===0) imageArray.push('http:'+capture)
						else imageArray.push(capture)
					})
					if (imageArray.length > 0) this.uploadRemoteFile(imageArray, 0)
				},
        images_upload_handler: function (blobInfo, success, failure) {
          // 处理本地图片
          // 在回调中，记得调用success函数，传入上传好的图片地址；
          // blobInfo.blob() 得到图片的file对象；
          let files = blobInfo.blob()
          if (!files.name) {
            files = new window.File([files], 'image.png')
          }
          let formData = new FormData();
          formData.append('file', files)
          uploadImage(formData)
          .then(res => {
            success(process.env.VUE_APP_Image + '/' + res.data)
          })
        },
        setup(editor) {
          editor.on('FullscreenStateChanged', (e) => {
            _this.fullscreen = e.state
          })
        },
        convert_urls: false
      })
    },

最后就可以愉快的使用了！！
著作权归作者所有。
商业转载请联系作者获得授权，非商业转载请注明出处。
作者：TW
链接：http://www.lucklytw.cn/detail/7
来源：lucklytw.cn 著作权归作者所有，商业转载请联系作者获得授权，非商业转载请注明出处。