粗暴将tinymce富文本编辑器整合到vue项目
Posted fqh123
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了粗暴将tinymce富文本编辑器整合到vue项目相关的知识,希望对你有一定的参考价值。
之前我使用的tinymce富文本编辑器,版本时4版本的,一些新的功能使用不上,现在想把5版本的tinymce整合进项目,之前tinymce是通过cdn的形式引入的,不会占用项目体积,
但是又想使用tinymce的新功能,比如加入第三方插件什么的,地图插件,设置行高,多图片上传等,都是很吸引人的功能,于是打算先不顾文件体积,将tinymce整个文件拷贝到项目里,这样方便插入第三方插件,
中文官网:http://tinymce.ax-z.cn/configure/integration-and-setup.php
首先,tinymce最新版本下载地址:https://www.tiny.cloud/get-tiny/self-hosted/ 找到最新版本,现在是5.15版本,下载生产环境pro
然后解压得到以下文件:tinymce
放到vue的public目录下
在index.html页面引入
<!-- 5.1.5 --> <script src="./tinymce/tinymce.min.js"></script>
然后在项目中
初始化配置:
initTinymce() { const _this = this window.tinymce.init({ selector: `#${this.tinymceId}`, base_url: ‘/tinymce‘,//指定插件及皮肤所在的文件路径 inline: false,//是否开启内敛模式,不开启就是iframe模式 // language: this.languageTypeList[‘zh‘], language:‘zh_CN‘, language_url: ‘/tinymce/langs/zh_CN.js‘, fontsize_formats: ‘12px 14px 16px 18px 24px 36px 48px 56px 72px‘, height: this.height, body_class: ‘panel-body ‘, object_resizing: false, toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar, menubar: this.menubar, plugins: plugins, end_container_on_empty_block: true, powerpaste_word_import: ‘clean‘, 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, nonbreaking_force_tab: true, // inserting nonbreaking space need Nonbreaking Space Plugin init_instance_callback: editor => { if (_this.value) { editor.setContent(_this.value) } _this.hasInit = true editor.on(‘NodeChange Change KeyUp SetContent‘, () => { this.hasChange = true this.$emit(‘input‘, editor.getContent()) }) },
需要加上语言包,中文官网可以下载,之后将zh_CN.js放在tinymce下的langs文件夹下,没有此文件夹可以创建一个,然后按照上面的语言配置即可,指定语言、指定语言包路径,当然,我们本地引用tinymce时,需要指定插件皮肤等文件所在的位置:
base_url: ‘/tinymce‘,//指定插件及皮肤所在的文件路径
然后加入第三方插件时,就从中文官网上下载对应的插件文件,解压好之后,放在plugins文件下,然后配置plugins和toolbar即可,很简单
另外集成七牛上传图片的一段代码,大家可以看看,
images_upload_handler(blobInfo, success, failure, progress) { // progress(0); console.log("开始上传图片") console.log(blobInfo.blob());//将blobinfo变成易于理解的file对象 tools.updateOfflineImg(blobInfo.blob(),_this.token).then(url=>{ console.log(url) success(url); }).catch(err=>{ failure(err); }) },
七牛上传需要自己封装好方便的方法,大家自己可以封装,这里就不多说了。
另外提醒一下,中文官网也有vue集成tinymce的方法,可以去使用,不过我是按照自己之前使用的集成方法,感觉不用改太多的代码,所以就没有按照中文官网上集成的方法使用。
上诉术方法集成后,打包体积国让增大到吓人的底部,整整增加了6M那个样子,有点吓人,不过如果用不了三方插件,比如多图上传,地图,设置行高等等时,我们完全可以用cdn的形式引入,这样就会凭空减少6M的体积,我觉的牺牲点功能还是比较好的,项目体积大真让人受不了。希望tinymce早日把地图和多图上传集成吧,这样就可以随意用cdn引入了。
。
以上是关于粗暴将tinymce富文本编辑器整合到vue项目的主要内容,如果未能解决你的问题,请参考以下文章