vue使用tinymce（新增字数限制）

前提：已经使用了tinymce，且是本地引用

---

1、进入tinymce官网下载字数限制插件

2、将解压得到的文件夹，放到TinyMCE主目录下的plugins文件夹

我这里是将其放在了/public/tinymce/plugins下面

3、直接在你的component/tinymce/index.vue文件初始化处使用

tinymce.init({
    selector: '#tinydemo',
    ···
    plugins: "code ax_wordlimit",
    toolbar: "code",
    ax_wordlimit_num:40,
    ax_wordlimit_callback: function(editor,txt,num){
        tipsJS('当前字数：' + txt.length + '，限制字数：' + num);
    }
    ···
});
1
2
3
4
5
6
7
8
9
10
11

4、文档

---

以上是引用插件的基本用法，但是部分项目在使用时还需要校验当输入超过后又删除回来的判断方法

这里我对解压后的文件进行了修改：

// plugin.js

tinymce.PluginManager.add('ax_wordlimit', function (editor) {
  const pluginName = '字数限制'
  const global$1 = tinymce.util.Tools.resolve('tinymce.util.Tools')
  const global$2 = tinymce.util.Tools.resolve('tinymce.util.Delay')
  const ax_wordlimit_type = editor.getParam('ax_wordlimit_type', 'letter')
  const ax_wordlimit_num = editor.getParam('ax_wordlimit_num', false)
  const ax_wordlimit_delay = editor.getParam('ax_wordlimit_delay', 500)
  const ax_wordlimit_callback = editor.getParam('ax_wordlimit_callback', function () {})
  const ax_wordlimit_event = editor.getParam('ax_wordlimit_event', 'SetContent Undo Redo Keyup')
  let onsign = 1
  // 统计方法1：计算总字符数
  const sumLetter = function () {
    const html = editor.getContent()
    const re1 = new RegExp('<.+?>', 'g')
    let txt = html.replace(re1, '')
    txt = txt.replace(/\n/g, '')
    txt = txt.replace(/ /g, ' ')
    const num = txt.length
    return { txt: txt, num: num }
  }
  const onAct = function () {
    if (onsign) {
      onsign = 0
      // 此处预留更多统计方法
      switch (ax_wordlimit_type) {
        case 'letter':
        default:
          var res = sumLetter()
      }
      if (res.num > ax_wordlimit_num) {
        ax_wordlimit_callback(editor, res.txt, ax_wordlimit_num, false)
++      } else if (res.num === 0) {
++        ax_wordlimit_callback(editor, res.txt, ax_wordlimit_num, false)
++      } else {
++        ax_wordlimit_callback(editor, res.txt, ax_wordlimit_num, true)
      }
      setTimeout(function () { onsign = 1 }, ax_wordlimit_delay)
    }
  }
  const setup = function () {
    if (ax_wordlimit_num > 0) {
      global$2.setEditorTimeout(editor, function () {
        const doth = editor.on(ax_wordlimit_event, onAct)
      }, 300)
    }
  }

  setup()

  return {
    getMetadata: function () {
      return {
        name: pluginName,
        url: 'http://tinymce.ax-z.cn/more-plugins/ax_wordlimit.php'
      }
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

主要添加的就是这四行代码

在返回后添加一个校验的bool值

在component/tinymce/index.vue
并在ax_wordlimit_callback函数中进行接收:

最后在使用组件处进行emit导出即可