首页 > 其他分享> 文章详细

粗暴将tinymce富文本编辑器整合到vue项目

2020-01-12 09:51:28 阅读：652 来源： 互联网

标签：文件文本编辑 vue url tinymce 插件上传 toolbar

之前我使用的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 &nbsp; 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引入了。

。

标签：文件,文本编辑,vue,url,tinymce,插件,上传,toolbar
来源： https://www.cnblogs.com/fqh123/p/12181946.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

粗暴将tinymce富文本编辑器整合到vue项目