wordlimit.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. // 插件代码内容
  2. tinymce.PluginManager.add('wordlimit', function (editor) {
  3. var pluginName = '字数限制'
  4. var app = tinymce.util.Tools.resolve('tinymce.util.Delay')
  5. var Tools = tinymce.util.Tools.resolve('tinymce.util.Tools')
  6. var wordlimit_event = editor.getParam('ax_wordlimit_event', 'SetContent Undo Redo Keyup input paste')
  7. var options = editor.getParam('wordlimit', {}, 'object')
  8. var close = null
  9. var toast = function (message) {
  10. close && close.close()
  11. close = editor.notificationManager.open({
  12. text: message,
  13. type: 'error',
  14. timeout: 3000
  15. })
  16. return
  17. }
  18. // 默认配置
  19. var defaults = {
  20. // max: 0, // 最多可以输入多少字
  21. spaces: false, // 是否含空格
  22. isInput: false, // 是否在超出后还可以输入
  23. maxMessage: '超出最大输入字符数量!',
  24. changeCallback: () => {}, // 自定义的回调方法
  25. changeMaxCallback: () => {},
  26. toast // 提示弹窗
  27. }
  28. class WordLimit {
  29. constructor(editor, options) {
  30. options = Tools.extend(defaults, options)
  31. let preCount = 0
  32. let _wordCount = 0
  33. let oldContent = editor.getContent()
  34. let WordCount = editor.plugins.wordcount
  35. let sumLetter = function (html) {
  36. var re1 = new RegExp('<.+?>', 'g')
  37. var txt = html.replace(re1, '')
  38. txt = txt.replace(/\n/g, '')
  39. txt = txt.replace(/&nbsp;/g, ' ')
  40. return { txt: txt, html }
  41. }
  42. editor.on(wordlimit_event, function (e) {
  43. var content = editor.getContent() || e.content || ''
  44. if (!options.spaces) {
  45. // 字数
  46. _wordCount = WordCount.body.getCharacterCount()
  47. } else {
  48. // 不含空格字数
  49. _wordCount = WordCount.body.getCharacterCountWithoutSpaces()
  50. }
  51. options.changeCallback({ ...options, editor, num: _wordCount, content, ...sumLetter(content) })
  52. if (_wordCount > options.max) {
  53. preCount = _wordCount
  54. // 禁止再输入
  55. if (options.isInput == !1) {
  56. // 内容超出还原
  57. editor.setContent(oldContent)
  58. // 还原后重新统计
  59. if (!options.spaces) {
  60. _wordCount = WordCount.body.getCharacterCount()
  61. } else {
  62. _wordCount = WordCount.body.getCharacterCountWithoutSpaces()
  63. }
  64. }
  65. editor.getBody().blur()
  66. editor.fire('wordlimit', {
  67. maxCount: options.max,
  68. wordCount: _wordCount,
  69. preCount: preCount,
  70. isPaste: e.type === 'paste' || e.paste || false
  71. })
  72. toast(options.maxMessage)
  73. }
  74. oldContent = editor.getContent()
  75. })
  76. }
  77. }
  78. var setup = function () {
  79. // 如果没设置最大输入限制,则不进行下一步操作
  80. if (!options && !options.max) return false
  81. // 如果没有配置字数统计,则不进行下一步,并且提示配置字数统计
  82. if (!editor.plugins.wordcount) return toast('请先在tinymce的plugins配置wordlimit之前加入wordcount插件')
  83. app.setEditorTimeout(
  84. editor,
  85. function () {
  86. let editDom = editor.getContainer()
  87. let wordNum = editDom.querySelector('button.tox-statusbar__wordcount')
  88. if (wordNum?.innerText?.indexOf('字符') == -1) wordNum.click()
  89. new WordLimit(editor, options)
  90. },
  91. 300
  92. )
  93. }
  94. setup()
  95. return {
  96. getMetadata: function () {
  97. return { name: pluginName }
  98. }
  99. }
  100. })