美文网首页让前端飞Web前端之路前端开发
Vue环境下tinymce简易教程(优化图片上传+powerpa

Vue环境下tinymce简易教程(优化图片上传+powerpa

作者: 千叶鸟 | 来源:发表于2019-05-30 14:59 被阅读2次

    环境

    VUE webpack tinymce4

    额外插件

    1. 用于优化本地图片上传的第三方插件:tinymce-imageupload
    2. 用于加强word源复制粘帖的官方插件(这是收费插件,我这里不提供资源,只是教大家怎么配置):wordpress

    开撸

    安装tinymce-vue

    npm install @tinymce/tinymce-vue -S
    

    安装tinymce

    npm install tinymce -S
    

    安装好之后,需要将node_modules目录下面的tinymce/skins目录放到一个可以访问到的地方(一般来说是static目录,也可以是CDN之类的,反正能访问到就行)

    安装中文语言包

    官网语言包下载地址
    选择你想要的语言下载即可(别跟我说不认识Chinese (China)
    下载后将得到zh_CN.js文件(以简体中文为例),同样,放到一个你能访问到的地方(static目录或CDN)

    引入依赖项

    import tinymce from 'tinymce/tinymce';
    import Editor from '@tinymce/tinymce-vue';
    

    初始化编辑器

    添加配置对象:

    content: '',
    editorInit: {
      language: 'zh_CN',    //  指定语言
      language_url: '/static/tinymce/zh_CN.js', //  指定语言包地址
      skin_url: '/static/tinymce4/skins/lightgray', //  指定主题地址(必须项,否则编辑器不能成功渲染出来)
      height: 300
    }
    

    在templete中添加一个Editor元素

    <editor v-model='content' :init='editorInit'></editor>
    

    完成!应该就可以看到页面能成功将编辑器渲染出来了。

    添加插件

    tinymce已自带了很多常用插件,但是很多默认是不启用的,需要主动引用并配置才行,这里我们以添加全屏插件fullscreen为例:

    1. 引入
    import 'tinymce/plugins/fullscreen';
    

    editorInit中配置

    editorInit: {
      ...
      plugins: "fullscreen",    //  多个插件,用空格分隔
      ...
    }
    

    常用配置

    editorInit: {
      ...
      statusbar: false, //  是否显示底部状态栏
      menubar: false,   //  配置菜单栏(设置为false则隐藏)
      toolbar: "fullscreen | bold italic",   //  工具之间用空格分隔,| 表示显示一个分块符
      //    editor为当前编辑器的实例对象
      setup: function(editor) {
        //  这里为给编辑器绑定一个单击事件
        editor.on('click', function(e) {
          console.log('Editor was clicked');
        });
      }
      }
      ...
    }
    

    支持粘帖图片

    1. 引入
    import 'tinymce/plugins/paste'
    
    1. 添加配置
    editorInit: {
      ...
      paste_data_images: true,  //  设置为允许粘帖图片
      //    上传方式1:填写images_upload_url和images_upload_base_path
      images_upload_url: '/upload', //  图片上传地址
      images_upload_base_path: '/some/basepath',
      //    上传方式2(建议这种):自定义上传逻辑
      images_upload_handler: function (blobInfo, success, failure) {
      }
      ...
    }
    

    优化图片上传

    其实我觉得开启支持粘帖图片和powerpaste之后,就不需要这个了。如果有这方面的需求,可以参考这个。安装比较简单,给个github地址,自己看下吧,和普通plugins基本无异。
    https://github.com/x-shadow-x/tinymce-imageupload
    效果图:

    image

    PS:这个插件在tinymce5上无法使用,而且配置上不是那么的灵活,如果想用,建议基于改插件,做一些修改。

    添加powerpaste插件

    1. 需要自行下载好对应版本的powerpaste(实在找不到可以私信我),我下载的是powerpast4.0.1-317
      image
    2. 放到一个一个你能访问到的地方
    3. 很重要的一步,我看到网上很多“教程”说如果是用npm安装tinymce不能使用powerpaste,其实呢,只要花点心思读读官方文档,就可以发现,其实是可以的,只要利用external_plugins配置一下就OJBK了
    editorInit: {
      ...
      //    添加扩展插件
      external_plugins: {
        'powerpaste': '/static/tinymce/powerpaste/plugin.min.js'
      }
      ...
    }
    
    1. powerpaste详细配置项可以再参考powerpaste插件使用手册
    2. 添加好之后,当从word复制内容到tinymce时,便会提示是否要保留格式:


      image

    切换/生成主题

    主题生成网站:http://skin.tiny.cloud/

    image

    下载下来的主题怎么用?
    很简单,用skin_url配置一下目录地址就OK了

    editorInit: {
      ...
      skin_url: '/static/tinymce4/skins/myskin',
      ...
    }
    

    相关文章

      网友评论

        本文标题:Vue环境下tinymce简易教程(优化图片上传+powerpa

        本文链接:https://www.haomeiwen.com/subject/irhvtctx.html