富文本编辑器
文章平均质量分 73
白白布凯西
都是自学的,多多指正,共同进步
展开
-
解决tinymce中富文本中dom元素标签中属性不生效的问题
最近在使用api给tinymce编辑器中内容节点增加属性时,发现有些属性即使使用api增加上去,但是经过tinymce过滤后,并没有呈现到最终的页面的节点上,比如onmousedown使用onmousedown可以使鼠标光标无法落在该元素内,可以实现很多编辑器编辑操作的限制,但是通过tinymce.activeEditor.selection.setContent()方法添加节点时,发现最后页面上渲染出来的节点中并没有onmousedown属性。如下实际输出的页面效果。原创 2024-03-28 15:21:18 · 315 阅读 · 0 评论 -
在tinymce6中开发自定义批注功能
工具栏按钮,分别为添加批注、显示所有批注、删除批注和隐藏批注。文档中的批注显示和侧边栏中批注详情显示(包括回复)如下//评论区功能// 关闭评论框//通过锚点跳转到评论图标所在位置.getDoc()?.selection.select(commentNode) //选中评论图标// 确保已正确获取到元素后再操作})== null) {包括了新增评论,关闭评论框,点击跳转到文档中评论图标位置的函数。原创 2023-12-22 10:50:25 · 1489 阅读 · 11 评论 -
如何实现tinymce多语言的切换
实现tinymce多语言切换原创 2023-11-17 15:02:29 · 979 阅读 · 0 评论 -
tinymce6实现目录功能(包含生成目录大纲和点击跳转)
终于最近又回到文档编辑器开发这边了,可以继续给大家更新tinymce的更多经验了。之前是在vue2开发的系统中使用tinymce5编辑器,实现了很多功能没有分享,最近做框架迁移,在vue3搭建的框架中实现之前的功能,同时我把tinymce的版本也升级到了6.x,后面会多多分享。原创 2023-11-15 15:43:13 · 1044 阅读 · 6 评论 -
tinymce6编辑器中的API相关问题
最近把tinymce的版本由5.10.3升级到了6.5.0,大版本更新后,官方把很多API名称换了,英文文档晦涩难懂,歪果仁写文档也不怎么条理清晰,在这里记录下所有的问题,方便回顾,也供大家参考。原创 2023-09-14 14:52:34 · 280 阅读 · 1 评论 -
tinymce编辑器高度height属性不生效的问题
都是autoresize插件的锅,这是高度随编辑器内容高度自适应的插件,如果引入,init中的height属性就会失效。之前使用的时候是记得的,但是时间久远,最近升级技术栈,重新做编辑器,忘记了,浪费个把小时检查,必须记下来。原创 2023-09-12 09:30:59 · 676 阅读 · 0 评论 -
vue3+vite+ts引入tinymce6
之前介绍了vue2如何引入tinymce5,也介绍了很多tinymce的技巧和插件以及自定义插件。也讲了我最近在升级系统技术栈,那既然从vue2+webpack+js升级到了vue3+vite+ts,那编辑器也应该紧跟潮流升级到tinymce6(V6.7.0)。tinymce6将一部分基础的插件放进了编辑器核心代码中,即不用再外部引入了,这增加代码的间接性,但也导致很多报错,后面一一讲解。网上也有讲解vue3如何引入tinymce的,但是都不是很全,归根结底没有涉及原理。原创 2023-09-11 16:37:17 · 1774 阅读 · 2 评论 -
tinymce编辑器如何自定义插件(vue)
tinymce中自定义插件,包括注册菜单,更改图标,插件编写原创 2023-08-02 16:24:44 · 3303 阅读 · 4 评论 -
tinymce富文本编辑器如何实现部分内容无法删除
上一篇文章讲了如何使tinymce部分内容无法编辑,那么当然也有特殊需求是如何使部分内容无法删除啦。原创 2023-07-07 11:04:49 · 1101 阅读 · 1 评论 -
tinymce富文本编辑器中的部分内容不可编辑
老规矩,先介绍需求,防止大家看半天不知道在看什么。最近需要在文档编辑器中控制每一段的权限,包括是否显示、是否可编辑。如果你仅仅只是使用tinymce编辑器,没有自定义功能,没有改变它原有的html结构,那么你文档中的元素应该大部分都是p标签、h标签、li标签、table标签以及img标签等;如果你和我一样在编辑器内的html结构上进行了很多操作,那么你的文档结构会多出了很多div以及嵌套结构。别担心,下面分情况介绍各种解决办法。原创 2023-07-05 15:43:40 · 1699 阅读 · 0 评论 -
记录如何在tinymce富文本编辑器中操作dom
我其他文章中有tinymce的API汇总,但是基本纯翻译英文文档的API,由于原英文文档中API部分写的…实在一言难尽,所以翻译过来一样是一坨x,所以还是决定把自己用过的API结合自己的具体业务场景记录下来。原创 2023-07-04 17:01:31 · 943 阅读 · 10 评论 -
vue2中如何引入TinyMCE并使用
满足复杂需求的富文本编辑器tinyMCE在vue2的项目中如何安装原创 2023-06-29 14:23:39 · 3336 阅读 · 2 评论 -
tinyMCE的API tinymce编辑器实例部分(中文)
tinyMCE富文本编辑器API的中文翻译原创 2023-06-29 13:39:34 · 2157 阅读 · 1 评论