ZSSAER'HOME

TinyMCE富文本编辑器

TinyMCE是一款易用、且功能强大的所见即所得的可跨平台富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。

TinyMCE的优势：

开源可商用，基于LGPL2.1
插件丰富，自带插件基本涵盖日常所需功能（示例看下面的Demo-2）
接口丰富，可扩展性强，有能力可以无限拓展功能
界面好看，符合现代审美
提供经典、内联、沉浸无干扰三种模式（详见“介绍与入门”）
对标准支持优秀（自v5开始）
多语言支持，官网可下载几十种语言。
官网及文档：www.tiny.cloud
官网下载：www.tiny.cloud/get-tiny/self-hosted/
Github：github.com/tinymce
TinyMCE是否收费

tinymce主程序及自带的大部分插件均提供社区开源版，可免费使用且可商用。tinymce的主要盈利模式为【付费插件及拓展服务】，有关付费项目的列表，请参考：https://www.tiny.cloud/pricing

Vue下快速使用

安装TinyMCE相关依赖包

根据使用的js包管理工具,进行导入依赖

yarn add tinymce  ||  npm install tinymce -S

yarn add @tinymce/tinymce-vue  ||  npm install @tinymce/tinymce-vue -S

汉化编辑器

TinyMCE是国外的插件,所以自然默认为英文版本,需要使用中文的话,要去官网下载汉化包:

https://www.tiny.cloud/get-tiny/language-packages/
在项目public文件夹下新建tinymce文件夹，将下载后的汉化压缩包解压至此文件夹下
再将node_modules/tinymce/skins文件夹也复制到public/tinymce文件夹下(最终如下图所示)
导入Emoji表情插件 (可跳过)

将node_modules/tinymce/plugins/emoticons文件夹复制到public/tinymce里

最后将其添加到组件的plugins和toolbar下(第6步组件以及加入无需重复加入).
添加首行缩进功能 (可跳过)

前往插件文档里下载intent2em插件:http://tinymce.ax-z.cn/more-plugins/indent2em.php

将解压后的首行缩进插件intent2em复制到node_modules/tinymce/plugins文件夹下.

在其intent2em文件夹中创建index.js并写入以下代码

// Exports the "indent2em" plugin for usage with module loaders
// Usage:
//   CommonJS:
//     require('tinymce/plugins/indent2em')
//   ES2015:
//     import 'tinymce/plugins/indent2em'
require('./plugin.js');

最后复写plugins.js

(function () &#123;
        'use strict';
    
        var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
        var global$1 = tinymce.util.Tools.resolve('tinymce.util.Tools');
        
  
        var doAct = function (editor) &#123;
          var dom = editor.dom;
          var blocks = editor.selection.getSelectedBlocks();
          var act = '';
          var indent2em_val = editor.getParam('indent2em_val', '2em')
          global$1.each(blocks, function (block) &#123;
              if(act=='')&#123;
                  act = dom.getStyle(block,'text-indent')== indent2em_val ? 'remove' : 'add';
              &#125;
              if( act=='add' )&#123;
                  dom.setStyle(block, 'text-indent', indent2em_val);
              &#125;else&#123;
                  var style=dom.getAttrib(block,'style');
                  style = style.replace(/text-indent:[\s]*2em;/ig,'');
                  dom.setAttrib(block,'style',style);
              &#125;
  
          &#125;);
        &#125;;
  
        var register = function (editor) &#123;
          editor.ui.registry.getAll().icons.indent2em || editor.ui.registry.addIcon('indent2em','<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M170.666667 563.2v-102.4H887.466667v102.4zM170.666667 836.266667v-102.4H887.466667v102.4zM512 290.133333v-102.4H887.466667v102.4zM238.933333 341.333333V136.533333l204.8 102.4z" fill="#2c2c2c" p-id="5210"></path></svg>');
          editor.ui.registry.addButton('indent2em', &#123;
            tooltip: '首行缩进',
            icon: 'indent2em',
            onAction: function () &#123;
              doAct(editor);
            &#125;
          &#125;);
          editor.ui.registry.addMenuItem('indent2em', &#123;
            text: '首行缩进',
            icon: 'indent2em',
            onAction: function () &#123;
              doAct(editor);
            &#125;
          &#125;);
        &#125;;
  
        global.add('indent2em', function (editor) &#123;
          register(editor)
        &#125;);
  
        function Plugin () &#123;
        &#125;
    
        return Plugin;
    &#125;)();

最后将其添加到组件的plugins和toolbar下(第6步组件以及加入无需重复加入).

配置TinyMCE组件

在src/components下新建TEditor.vue，并写入如下代码:

以上为vue3的v-model默认绑定值, 如vue2.x使用,需要修改其v-model的默认绑定值.(modelValue => value && update:modelValue => input)

其中引入baseUrl为后端Api地址,主要用作图片上传.

调用组件



import TEditor from '@/components/TEditor.vue'

该项目有多个TinyMCE插件.by Five-great

imagetools [增强优化]：图片编辑工具插件，对图片进行处理。优化跨域，功能更丰富；
table [增强优化]：表格插件，处理表格。增强优化表格控制，增加表格转图片功能，便捷布局按钮；
indent2em[增强优化]：首行缩进插件。提供中文段落排版的首行缩进2个字符的功能。增强优化加入字间距非默认情况，也能实现准确首行缩进2字符；
letterspacing：设置间距插件。可以设置文档中的文字间距；
layout：一键布局插件。可以给文档段落进行一键快速排版布局；
importword：导入word插件。可以直接导入word ,并且保证word中图片不会丢失，自动转为base64;
upfile：文件上传。可以点击导入文件，可自定义编辑文件名;
bdmap：百度地图。支持更改尺寸，自定义标签，开启导航功能,支持vue;
axupimgs: 多图上传。可同时上传多组图片，支持vue;
attachment: 附件上传。拥有附件类型对应图标，支持vue;

使用方法:

按需求将其插件文件夹复制到node_modules/tinymce/plugins文件夹下,再到组件中引用,如

import '@npkg/tinymce-plugins/importword' 
import '@npkg/tinymce-plugins/lineheight' 
import '@npkg/tinymce-plugins/layout' 
...

TinyMCE富文本编辑器

TinyMCE富文本编辑器

TinyMCE是否收费

Vue下快速使用

更多插件