tinymce 富文本限制字数超出不显示

(function () {'use strict';let Tools = tinymce.util.Tools.resolve('tinymce.util.Tools');let global = tinymce.util.Tools.resolve('tinymce.PluginManager');let defaults = {// max: 0, // 最多可以输入多少字spaces: !1, // 是否含空格isInput: !1, // 是否在超出后还可以输入toast: null, // 自定义的提示方法, 默认用编辑器自带};class WordLimit {constructor(editor, options) {this.editor = editor;this.options = Tools.extend(defaults, options);var _this = this,oldContent = editor.getContent(),WordCount = editor.plugins.wordcount,preCount = 0,_wordCount = 0;editor.on('input paste undo redo Keyup ', function (e) {var content = editor.getContent() || e.content || '';if (!_this.options.spaces) { // 字数_wordCount = WordCount.body.getCharacterCount();} else { // 不含空格字数_wordCount = WordCount.body.getCharacterCountWithoutSpaces();}if (_wordCount > _this.options.max) {preCount = _wordCount;// 禁止再输入if (_this.options.isInput == !1) {// 内容超出还原editor.setContent(oldContent);// 还原后重新统计if (!_this.options.spaces) {_wordCount = WordCount.body.getCharacterCount();} else {_wordCount = WordCount.body.getCharacterCountWithoutSpaces();}}editor.getBody().blur();editor.fire('wordlimit', {maxCount: _this.options.max,wordCount: _wordCount,preCount: preCount,isPaste: (e.type === 'paste' || e.paste) || false});}oldContent = editor.getContent();});}};function Plugin() {global.add('wordlimit', function (editor) {var options = editor.getParam('wordlimit', {}, 'object');if (!options && !options.max) {return !1;}if (typeof options.toast !== 'function') {options.toast = function (message) {editor.notificationManager.open({text: message,type: 'error',timeout: 3000,});}}if (!editor.plugins.wordcount) {options.toast('请先在tinymce的plugins配置wordlimit之前加入wordcount插件');return !1;}editor.on('init', function (e) {new WordLimit(editor, options);});});}Plugin();}());

1. 创建 WordLimit 文件

2. 要在wordcount 字数统计插件下引入

3.配置 WordLimit 记得在 plugins 配置中引入

 wordlimit: {max: 10, // 最多可以输入多少字spaces: !1, // 是否含空格isInput: !1, // 是否在超出后还可以输入// 自定义的提示方法, 默认用编辑器自带toast: function (message: any) {}},init_instance_callback: (editor: any) => {editor.on('wordlimit', function (e: any) {var beyond = 0;if (e.wordCount > e.maxCount) {beyond = e.wordCount - e.maxCount;}// 可以吧alert换成自己的提示组件warnMsg('最多只能输入' + e.maxCount + '个字' + (beyond > 0 ? '，已超出' + beyond + '个字，超出部分请删除' : '。'));});},

完整代码

<template><editor v-model="myValue" :init="init" :disabled="disabled" :id="tinymceId" ref="editorRef"></editor>
</template><script setup lang="ts">
import { warnMsg } from "@/utils/msg";
//JS部分
//在js中引入所需的主题和组件
import tinymce from "tinymce/tinymce";
import "tinymce/skins/content/default/content.css";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver";
import "tinymce/themes/silver/theme";
import "tinymce/icons/default"; //引入编辑器图标icon，不引入则不显示对应图标
//   import 'tinymce/models/dom' // 这里是个坑 一定要引入//在TinyMce.vue中接着引入相关插件
import "tinymce/icons/default/icons";
import "tinymce/plugins/image"; // 插入上传图片插件
import "tinymce/plugins/media"; // 插入视频插件
import "tinymce/plugins/table"; // 插入表格插件
import "tinymce/plugins/lists"; // 列表插件
import "tinymce/plugins/link";
import "tinymce/plugins/wordcount"; // 字数统计插件
import "tinymce/plugins/code"; // 源码
import "tinymce/plugins/fullscreen"; //全屏
import "tinymce/plugins/searchreplace";
import "tinymce/plugins/preview";
import '@/utils/letterspacing'  // 间距插件
import '@/utils/wordlimit' // 字数插件
import { uploadImg } from "@/api/understand";
const emits = defineEmits(["getContent",]);
//这里我选择将数据定义在props里面，方便在不同的页面也可以配置出不同的编辑器，当然也可以直接在组件中直接定义
const props = defineProps({value: {type: String,default: () => {return "";},},baseUrl: {type: String,default: "",},disabled: {type: Boolean,default: false,},plugins: {type: [String, Array],default:"link lists image code table wordcount preview fullscreen media searchreplace letterspacing wordlimit",// default://   'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave bdmap indent2em autoresize formatpainter axupimgs',}, //必填toolbar: {type: [String, Array],default:"undo redo  | bold italic underline | fontselect fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bdmap indent2em lineheight formatpainter axupimgs  image letterspacing| media| searchreplace  | bullist numlist | code",// default://   ' cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \// styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \// table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs',}, //必填
});
//用于接收外部传递进来的富文本
let win: any = window;
const editorRef = ref(null);
const myValue = ref(props.value);
const tinymceId = ref("vue-tinymce-" + +new Date() + ((Math.random() * 1000).toFixed(0) + "")
);
//定义一个对象 init初始化
const init = reactive({selector: "#" + tinymceId.value, //富文本编辑器的id,// icons_url: '/web-official-website-manage/icons/custom/icons.js', //自定义图标// icons: 'custom',language_url: "/web-official-website-manage/langs/zh-Hans.js",language: "zh-Hans",skin_url: "/web-official-website-manage/skins/ui/oxide",height: 500, //编辑器高度branding: false, //是否禁用“Powered by TinyMCE”menubar: true, //顶部菜单栏显示image_dimensions: true, //去除宽高属性plugins: props.plugins, //这里的数据是在props里面就定义好了的toolbar: props.toolbar, //这里的数据是在props里面就定义好了的toolbar_mode: 'sliding',font_formats:"Arial=arial,helvetica,sans-serif; 宋体=SimSun; 微软雅黑=Microsoft Yahei; Impact=impact,chicago;", //字体fontsize_formats: "11px 12px 14px 16px 18px 24px 30px 36px 48px 64px 72px", //文字大小// paste_convert_word_fake_lists: false, // 插入word文档需要该属性paste_webkit_styles: "all",paste_merge_formats: true,nonbreaking_force_tab: false,paste_auto_cleanup_on_paste: false,file_picker_types: "media",setup: function (editor: any) {editor.ui.registry.addIcon("image",`<svg t="1664002320321" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4420" width="24" height="24"><path d="M125.9 185h772.2v653.9H125.9z" fill="#1F53CC" p-id="4421"></path><path d="M164.7 217.2h694.6v516.7H164.7z" fill="#FECD44" p-id="4422"></path><path d="M458.9 734l-8.6-43.8-101.5-102.8-135 146.6z" fill="#FC355D" p-id="4423"></path><path d="M306.9 348.7m-66.7 0a66.7 66.7 0 1 0 133.4 0 66.7 66.7 0 1 0-133.4 0Z" fill="#FFFFFF" p-id="4424"></path><path d="M384.6 734h474.7V608.8L687.8 400.1z" fill="#FC355D" p-id="4425"></path><path d="M422.5 662l-37.9 72 52.1-57.5z" fill="#BF2847" p-id="4426"></path><path d="M302.5 778.9h418.9v16.7H302.5z" fill="#00F0D4" p-id="4427"></path></svg>`);},content_css: "/web-official-website-manage/skins/content/default/content.css", //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入wordlimit: {max: 10, // 最多可以输入多少字spaces: !1, // 是否含空格isInput: !1, // 是否在超出后还可以输入// 自定义的提示方法, 默认用编辑器自带toast: function (message: any) {}},init_instance_callback: (editor: any) => {editor.on('wordlimit', function (e: any) {var beyond = 0;if (e.wordCount > e.maxCount) {beyond = e.wordCount - e.maxCount;}// 可以吧alert换成自己的提示组件warnMsg('最多只能输入' + e.maxCount + '个字' + (beyond > 0 ? '，已超出' + beyond + '个字，超出部分请删除' : '。'));});},//图片上传// images_upload_url: "/localFile/uploadFile",images_upload_handler: (blobInfo: any, progress: any, failure: any, success: any) =>new Promise(async (resolve, reject) => {if (blobInfo.blob().size / 1024 / 1024 > 2) {// reject({ message: "上传失败，图片大小请控制在 2M 以内", remove: true });failure('上传失败，图片大小请控制在 2M 以内')return;} else {const ph = win.configs.IMG_URL;let params = new FormData();params.append("file", blobInfo.blob());const res: any = await uploadImg(params);if (res.code == 200) {progress(ph + res.data); //上传成功，在成功函数里填入图片路径} else {reject("HTTP Error: 上传失败" + res.data.code);return;}}}),// 文件上传  需要的话添加// 上传视频file_picker_callback: (callback: any, value: any, meta: any) => {if (meta.filetype == 'media') {// callback('movie.mp4', { source2: 'alt.ogg', poster: 'image.jpg' });let input = document.createElement('input');input.setAttribute('type', 'file');input.setAttribute('accept', '.mp3, .mp4');input.click();input.onchange = function (v: any) {// console.log(v.target.files[0]); //视频文件信息   上传即可    规定视频格式大小需重写逻辑  获取视频时长}}}
});
//监听外部传递进来的的数据变化
watch(() => props.value,() => {myValue.value = props.value;emits("getContent", myValue.value);}
);
//监听富文本中的数据变化
watch(() => myValue.value,() => {emits("getContent", myValue.value);}
);//在onMounted中初始化编辑器
onMounted(() => {tinymce.init({});
});
</script>
<style>
.tox-tinymce {width: 100%;touch-action: none !important;
}
</style>

tinymce 富文本限制字数超出不显示相关推荐

tinymce富文本编辑器的使用
tinymce富文本编辑器的使用 1.基本介绍 tinymce富文本官网:https://www.tiny.cloud/ 中文文档:http://tinymce.ax-z.cn/ tinymce-np ...
Vue项目中tinymce富文本的安装以及配置
Vue项目中tinymce富文本的安装以及配置对于目前网上存在的许多富文本插件中,个人还是觉得tinymce相对比较强大一些.在使用配置的过程中,可能会出现配置不完全,导致使用不了的情况,下面把我个 ...
在vue3.0项目中使用tinymce富文本编辑器
目录一.安装二.完整代码三.事项说明四.参考文档之前看了好几篇关于 vue项目中使用 tinymce的文章, import引入大量 tinymce插件, /node_modules/ti ...
vue实战025:配置TinyMCE富文本编辑器
目录组件安装组件引用添加模板初始化编辑器常用属性配置扩展插件使用之前分享了一篇vue实战021:Vue-Quill-Editor富文本编辑器使用,有网友说TinyMCE更好用,所以今天来 ...
tinymce富文本框踩坑
tinymce富文本框踩坑 1.页面中需要多个富文本框时,每个富文本框的id必须做唯一标识,否则无法编辑 2.在tinymce富文本框需要做判断来显示时,谨慎使用v-if和v-show v-if会使富 ...
Tinymce富文本使用教程
文章目录 1. 开始 2. 快速使用引入tinymce脚本 3. 常用配置 selector language language_url height readonly plugins toolba ...
tinymce富文本语言切换的坑
要实现的功能是三种语言(英文,繁体中文,简体中文)切换,原来是用tinymce-vue 和element做的,大概是这样,el-dialog弹窗里面用el-tab包含三个tinymce,但是中途发现很 ...
tinymce富文本编辑器的视频插件如何上传本地视频
最近使用了tinymce富文本编辑器的视频上传功能,发现默认只能填写视频链接,不能上传本地的视频.为此,我专门研究下如何上传本地视频. 版本:tinymce版本是^5.0.16,@tinymce/ti ...
Layui 使用 TinyMCE 富文本编辑器
Layui 使用 TinyMCE 富文本编辑器 Layui 使用 TinyMCE 富文本编辑器 1.进入 Layui 第三方组件平台下载该拓展组件 2.写一个测试 Demo 3.调用 TinyMCE ...

tinymce 富文本限制字数超出不显示

tinymce 富文本限制字数超出不显示相关推荐

最新文章

热门文章

tinymce 富文本限制字数 超出不显示

tinymce 富文本限制字数 超出不显示相关推荐

最新文章

热门文章

tinymce 富文本限制字数超出不显示

tinymce 富文本限制字数超出不显示相关推荐