- 博客(33)
- 收藏
- 关注
RSS订阅原创 基于tinymce实现多人在线实时协同文本编辑
这可能是最后一次写tinymce相关的文章了，一方面tinymce的底层设计限制了很多功能的实现，另一方面tinymce本身越来越商业化，最新的7版本已经必须配置key，否则面临无法使用的问题。
2024-08-21 10:50:07
1250
16
原创 vue实现录音并转文字功能，包括PC端web，手机端web
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
2024-04-26 16:06:24
4199
1
原创 解决tinymce中富文本中dom元素标签中属性不生效的问题
最近在使用api给tinymce编辑器中内容节点增加属性时，发现有些属性即使使用api增加上去，但是经过tinymce过滤后，并没有呈现到最终的页面的节点上，比如onmousedown使用onmousedown可以使鼠标光标无法落在该元素内，可以实现很多编辑器编辑操作的限制，但是通过tinymce.activeEditor.selection.setContent()方法添加节点时，发现最后页面上渲染出来的节点中并没有onmousedown属性。如下实际输出的页面效果。
2024-03-28 15:21:18
451
原创 整合tinymce工具栏按钮
以上代码均为tinymce官方api，可以在引用tinymce的组件时的init变量中的setup函数中写入，也可以写在扩展文件plugin.js，通过插件引入，具体可以参考我另一篇引入自定义插件的文章。最近准备整合一下所有的功能，我的个人github上面其实有开源的这部分功能，暂时还是私有未公开，后面我抽时间优化后会公开，感兴趣的可以持续关注下。
2024-03-26 16:26:18
445
原创 如何在tinymce中实现一些自定义弹框和侧边栏
弹框等其他所有自定义功能都可以这样操作，自己编写一个dialog或者饿了么的dialog然后控制显隐的函数和变量绑定到editor上，在插件中使用editor调用即可。最开始我的实现是绑在window全局变量上，在任何地方都可以调用到，但是后来发现更官方的方法是挂在editor上，这是编辑器挂在所有变量和函数专用的变量。以下是编辑器的插件代码，在plugin.js中，不了解如何自定义插件的，请看我另一篇文章介绍。只要在plugin.js中能够调用到页面上的变量和方法，就可以随意操控自己自定义的组件了。
2024-03-21 14:35:56
824
原创 关于querySelector和getElementById的区一些问题
今天遇到一个比较有意思的bug，通过querySelector选择器选择指定id的元素时，如果这个id中有分号，会报错。究其根本，就是querySelector选择指定id时，id不能有分号。但是经测试，getElementById方法是可以获取到包含分号的id的元素的。
2024-01-05 15:02:25
589
原创 在tinymce6中开发自定义批注功能
工具栏按钮，分别为添加批注、显示所有批注、删除批注和隐藏批注。文档中的批注显示和侧边栏中批注详情显示（包括回复）如下//评论区功能// 关闭评论框//通过锚点跳转到评论图标所在位置.getDoc()?.selection.select(commentNode) //选中评论图标// 确保已正确获取到元素后再操作})== null) {包括了新增评论，关闭评论框，点击跳转到文档中评论图标位置的函数。
2023-12-22 10:50:25
1876
14
原创 在vue3的setup语法糖中为什么无法直接使用useRouter().currentRoute
如果在组件内部需要访问当前路由的信息，最佳实践是使用 const router = useRouter();来获取路由实例，然后通过 router.currentRoute 或其他属性来访问路由信息。这样可以确保在路由实例被正确初始化后再去访问路由信息，避免可能的未定义错误。
2023-12-20 15:17:34
1228
原创 tinymce6实现目录功能（包含生成目录大纲和点击跳转）
终于最近又回到文档编辑器开发这边了，可以继续给大家更新tinymce的更多经验了。之前是在vue2开发的系统中使用tinymce5编辑器，实现了很多功能没有分享，最近做框架迁移，在vue3搭建的框架中实现之前的功能，同时我把tinymce的版本也升级到了6.x，后面会多多分享。
2023-11-15 15:43:13
1347
6
原创 vue3单独重新渲染子组件
我们经常在处理表单时，一般用弹窗类表单，不会存在此类问题，因为弹窗的打开关闭已经实现重新渲染弹窗组件。但是如果表单和列表在同一页面，你希望在表单编辑完成保存后，单独刷新页面的下半部分详情组件，这时需要主动使子组件重新渲染，以便拿到更新后的值。
2023-11-15 09:39:17
2694
原创 vue3中循环渲染子组件时，如何调用子组件中的变量或函数
在setup语法糖中，当一个父组件循环渲染子组件时，子组件中定义一个双向绑定的变量，如何在父组件获取该变量。（获取函数同理）
2023-11-01 15:56:45
1521
1
原创 vue3中props的传值问题（传值失败，传值无法响应变化）
一般遇到父组件给子组件传值，props必不可少，但是在vue3中，有的人会遇到子组件接收到props中的值不会更新的情况，比如子组件的aa值并不会随着父组件中fatherData的变化而变化，甚至如果你的父组件中fatherData没有赋初始值，在子组件中props.sonData直接会是undifined。
2023-09-22 15:29:31
11181
3
原创 tinymce6编辑器中的API相关问题
最近把tinymce的版本由5.10.3升级到了6.5.0，大版本更新后，官方把很多API名称换了，英文文档晦涩难懂，歪果仁写文档也不怎么条理清晰，在这里记录下所有的问题，方便回顾，也供大家参考。
2023-09-14 14:52:34
329
1
原创 vue3+ts封装通用组件过程中遇到的“对象的类型为 “unknown“”的TS报错问题
vue3+ts封装通用组件时，需要传入需要的props，然后使用动态属性来控制组件的渲染。这个过程中最可能会遇到TS的类型校验报错。如果是使用JS，那么封装过程一气呵成，将来类型不对了或者数据为空了都会在控制台报错然后调试，但是TS的特点就是让你在写代码的时候把类型定好。
2023-09-13 16:39:47
4644
1
原创 tinymce编辑器高度height属性不生效的问题
都是autoresize插件的锅，这是高度随编辑器内容高度自适应的插件，如果引入，init中的height属性就会失效。之前使用的时候是记得的，但是时间久远，最近升级技术栈，重新做编辑器，忘记了，浪费个把小时检查，必须记下来。
2023-09-12 09:30:59
859
原创 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
2057
3
原创 vue3+vite+TS封装本地svg图标库（不用安装任何插件）
一般vue开发的项目都会搭配饿了么组件库使用，里面的图标够小项目的需求了，链接:实在不行，阿里妈妈开发的矢量图标库IconFont里绝对可以找你需要的图标。链接:。但是，当你的项目需要动态加载图标时，或是遇到“用户自定义目录时可选择图标”这样的需求时，你就需要封装一个本地的svg图标库了，或者你有幸担起了公司里架构师的位置时，封装各种组件库也是必定会遇到的问题。下面介绍的方法无需安装任何插件，优点是操作简单，当然也有缺点，相对没有特别灵活。
2023-09-11 09:08:45
708
原创 TS检查类型报错“元素隐式具有 “any“ 类型，因为类型为 “string“ 的表达式不能用于索引类型”
从报错信息可以看出是TS的类型检查报错（不影响项目编译），是因为动态索引使用了string类型，但是icons.ts文件中没有预设索引的类型，从而引发了报错。相信大家根据代码也看出我在做什么了，没错就是封装本地的svg图标库，网上教程参差不齐，各种安装插件，下一篇文章介绍如何封装本地svg图库，不需要任何插件。但是TS是微软开发的类似于c或者java等语言的强类型语言，不会做任何的隐式转换，类型不对会直接报错。最开始尝试了直接修改icons.ts中的属性的类型，即。至此，TS的检查类型不会再报错。
2023-09-05 16:12:50
1745
1
原创 Element Plus导航栏同时展开open和select方法的问题
Element Plus导航栏同时展开open和select方法的问题
2023-09-01 11:23:18
1596
2
原创 vue3 + element plus+ts 实现穿梭框右侧数据上下移动功能
element plus实现transfer穿梭框右侧数据上下移动的功能
2023-08-25 17:21:14
2186
4
原创 vue3+ts项目中导入组件时报错has no default export
报错是该组件没有导出，即"components/details/index.vue"has no default export.
2023-08-16 14:51:49
3733
1
原创 路由仅仅改变传参无法触发页面数据刷新
当你用router-view渲染页面时，大型项目难免用到路由传参，好处就不多说了。但是，使用过程中会发现，只改变路由传递的参数而没有改变路由其他地址的话，页面是不会重新加载的。原理是当使用动态路由匹配传递参数时 , 默认会让子路由中的组件页面"复用" , 此时子路由中的页面是不会被销毁的 , 页面的data mounted(){} 等钩子函数不再执行 , 导致路由传递的参数变了 , 但是路由界面不更新。
2023-07-20 17:44:53
349
1
原创 element ui导航栏中index使用动态绑定时的报错问题
[Vue warn]: Invalid prop: custom validator check failed for prop "index"的报错解决方案
2023-07-20 13:53:41
323
原创 Element ui中NavMenu导航菜单报错问题
是vue-router的原因。导航栏重复点击同一模块时，会弹出这个报错，一般情况下不影响功能，但是如果你的页面逻辑里有刷新页面相关的设置时，也会影响功能，可能导致页面数据拿不到。PS：只有当vue-router版本为3.0以上时会有这个报错，所以一种解决方法是将vue-router改为3.0版本，但是不推荐这种做法，控制版本并不是一个好的解决方案。
2023-07-18 11:08:57
350
1
原创 前端绘制流程图、泳道图
使用magicFlow插件绘制。原生HTML页面也可以，vue或react前端框架也可以，官网有详细安装方法，本文章后面也会详细说明。
2023-07-11 18:46:14
3286
5
原创 tinymce富文本编辑器如何实现部分内容无法删除
上一篇文章讲了如何使tinymce部分内容无法编辑，那么当然也有特殊需求是如何使部分内容无法删除啦。
2023-07-07 11:04:49
1416
1
原创 tinymce富文本编辑器中的部分内容不可编辑
老规矩，先介绍需求，防止大家看半天不知道在看什么。最近需要在文档编辑器中控制每一段的权限，包括是否显示、是否可编辑。如果你仅仅只是使用tinymce编辑器，没有自定义功能，没有改变它原有的html结构，那么你文档中的元素应该大部分都是p标签、h标签、li标签、table标签以及img标签等；如果你和我一样在编辑器内的html结构上进行了很多操作，那么你的文档结构会多出了很多div以及嵌套结构。别担心，下面分情况介绍各种解决办法。
2023-07-05 15:43:40
2002
原创 记录如何在tinymce富文本编辑器中操作dom
我其他文章中有tinymce的API汇总，但是基本纯翻译英文文档的API，由于原英文文档中API部分写的…实在一言难尽，所以翻译过来一样是一坨x，所以还是决定把自己用过的API结合自己的具体业务场景记录下来。
2023-07-04 17:01:31
1166
10
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人