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 = thiswindow.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 Plugininit_instance_callback: editor => {if (_this.modelValue) {editor.setContent(_this.modelValue)}_this.hasInit = trueeditor.on('NodeChange Change KeyUp SetContent', () => {this.$emit('update:modelValue', editor.getContent())})},paste_preprocess: (plugin, args) => {// 处理远程图片let imageArray = []args.content.replace(/]*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 著作权归作者所有，商业转载请联系作者获得授权，非商业转载请注明出处。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！