vue使用tinymce(新增字数限制)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
·
前提:已经使用了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);
}
···
});
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'
}
}
}
})
主要添加的就是这四行代码
在返回后添加一个校验的bool值
在component/tinymce/index.vue
并在ax_wordlimit_callback函数中进行接收:
最后在使用组件处进行emit导出即可
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
9e887079
[skip ci] 1 年前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐


所有评论(0)