- 博客(107)
- 收藏
- 关注
RSS订阅原创 【CodeMirror】系列（二）官网示例（四）选区、文档修改、装饰器
编辑器的状态始终至少持有一个选择范围。当启用多个选择时，它可能有多个选择范围。范围由一个anchor（在移位选择时不移动的点）和一个head（移动的点）组成。当这两者相同时，这就是光标选择；否则就是一个范围选择。当存在多个选择范围时，其中一个将被视为主范围（这也是浏览器原生选择将反映的范围）。如果你有编辑器状态，可以通过找到主选择范围。它是一个 SelectionRange 对象，具有anchor和head属性（如果想知道范围的最大和最小值，通过from / to属性获取），用于保存文档位置。
2025-04-09 11:05:15
748
原创 【CodeMirror】系列（二）官网示例（三）自定义语言包、混合语言解析
本篇文章来学习CodeMirror官网示例中的自定义语言包和混合语言解析
2025-03-19 11:48:17
920
原创 【CodeMirror】系列（二）官网示例（一）基础篇以及配置
本篇文章是对于CodeMirror官网中的示例项目中的基础编辑器和配置项部分的学习
2025-03-15 17:19:00
1005
原创 【CodeMirror】系列（一）官网文档学习（一）系统指南
本篇文章是对CodeMirror官网文档中系统指南篇的中文解释，虽说好多都是AI写的，但是组织语言还是需要花费很长时间，适合没有用过CodeMirror，想了解CodeMirror的系统架构的朋友。
2025-03-15 13:53:27
748
原创 Monaco Editor系列（十三）给静态文本添加高亮
前言：在一些富文本编辑器中，我们可能会想插入一段代码，但是只用于展示用途，只需要给代码高亮就可以，这个时候就不需要创建一个新的 Monaco Editor 实例，Monaco提供的有让静态文本按照特定语言高亮的API。
2025-03-09 09:46:31
494
原创 【PPTist】幻灯片放映
放映功能的代码都在，我们看一下放映的功能。首先是，进入全屏放映进入全屏指的是整个编辑器进入全屏就先找一下当前的浏览器能用的全屏的方法，然后调用。然后执行然后通过这个属性控制的App..vue中的组件的显示进入放映模式通过幻灯片放映的下拉框进入的是，就是BaseView。然后右键有一个，就是。
2025-01-14 10:50:13
982
原创 【PPTist】公式编辑、插入音视频、添加动画
点击公式的时候会变成true交互的方式：1、直接输入 latex 公式2、点击常用符号3、点击预置公式都可以自动生成公式预览。
2025-01-10 16:29:01
1099
原创 【PPTist】插入形状、插入图片、插入图表
插入形状有两种情况，一种是插入固定的形状，一种是插入自定义的形状。插入固定的形状时，跟上一篇文章是一样一样的，都是调用的方法，只不多传的类型不一样。还有插入线条，也是类似的。所以咱们那接下来主要看插入自定义形状时的代码执行流程。
2025-01-09 16:25:18
10222
原创 Monaco Editor 系列报错修复：webpack-cli已经下载了但是还报错
今天想把项目push到gitee上，复制、拖动改动了好多，导致项目起不来了，从头安装依赖，但是出现了一个奇怪的报错。众所周知，我们启动项目是在。目录下，安装依赖也是在这个目录下，我webpack-cli已经下载了，但是还报错。或者在根目录下，把webpack、webpack-cli 都装一下，我就是这样。就是说在根目录和website目录下都得安装哈！突然想到，会不会是要在根目录下也安装一个。遇到和我一样报错的可以试试。试了一下，果然是这样！
2025-01-07 14:41:08
368
原创 【PPTist】批注、选择窗格
如果我们增加了登录功能，还可以在批注上显示当前的用户名和头像，不过现在是写死的。我们在全局搜索 “选择窗格” 就可以发现，点击这个按钮的时候，会触发的方法是。，然后把中意的头像放进去，然后把模版中的icon改成我们的头像就好啦。点击下面的列表中的菜单项的时候，幻灯片中的对应的元素会被选中。属性，添加回复也跟上面的添加批注的逻辑差不多，没啥复杂的。另外选中某个元素的时候，右侧的样式也会改变成选中元素的样式。点击菜单项后面的小眼睛切换元素的显示的时候，还是修改。修改的时候就修改这个目标元素的属性即可。
2025-01-06 11:52:11
1035
原创 【PPTist】表格功能
自定义指令定义了两个生命周期函数，一个是mounted，一个是unmounted。自定义指令被挂载的时候，会接受一个参数。mounted的第一个参数是默认参数，表示使用自定义指令的元素，第二个参数是通过自定义指定传递过来的参数。然后绑定了右键菜单事件，并且将事件记录了一个索引值，便于元素卸载的时候解绑右键菜单时间// 定义自定义指令// 在元素挂载时// 保存事件处理器引用，方便后续解绑// 绑定右键菜单事件},// 在元素卸载时// 清理事件监听，避免内存泄漏},
2024-12-27 16:50:41
1501
原创 【PPTist】网格线、对齐线、标尺
可以看到里面的线条数据，只有一个不是整数，所以 562.5 应该就是最后一行的纵坐标，不过最后一行应该也是50的倍数，所以应该是下边框上还有一条线。，其中就两个方法，一个计算网格线颜色的，避免网格线颜色和底色太接近看不清；然后我们会发现代码的组织性真的很好，这些钩子函数在另外的文件中维护，并且方法名很明确。，大致就是找选中的元素的所有的位置，取最边缘的位置，作为包含所有的选中元素的范围。主要跟缩放行为有关，中间顶部 500 的位置和左侧 300 的位置是固定的。它的父组件跟上面的对齐线的父组件是同一个。
2024-12-25 11:43:50
776
原创 【PPTist】组件结构设计、主题切换
不过我有一个疑问，显然，默认的主题的配色方案使用的是第一个，但是为什么默认的字体不是第一个主题也就是我设置的这个字体呢？那要找一下默认的主题是在哪里呢？然后设置主题的时候，看一下是怎么执行的，将主题应用到当前幻灯片和应用全部的方法在。那么我们给第一个元素的字体换一个花哨的字体试一试。定义的一个默认展示的幻灯片数据，只是配色和第一个主题颜色一样。可以看到，第一个主题的字体已经改变了，卡哇伊~应用全局的话，就成功修改所有的字体啦。就是这个地方，预置的主题。，在模版中使用这几个属性。
2024-12-23 17:58:39
1137
原创 【PPTist】画布状态管理
画布状态都在哪里使用，这是一个关键的问题，以后我们在开发新功能的时候，需要知道什么时候要调用这里面的方法。的定义还挺多的，但是里面的实现都比较简单，都是设置状态的值。文件进行修改，并且导出模版中需要使用的属性，然后在模版中使用。文件，看一下接口定义，包含各个部分的编辑状态、选中状态等等。方法为例，这个方法是用来改变画布的缩放的百分比的，在。如果我们要在编辑区域增加一个新的属性，就需要把属性定义到。监听到这个属性变化之后，会计算出画布的位置，然后执行。这个元素我们看一下是谁，就是这个编辑区域。
2024-12-16 15:47:38
640
原创 【PPTist】历史记录功能
定义在中，使用的是pinia状态管理库，和Vuex挺像的，但是要更简洁一下State存储原始数据需要响应式的数据全局共享的数据Getters需要根据 state 计算的值多处使用的计算逻辑需要缓存的计算结果Actions业务逻辑封装异步操作多个状态修改的组合分别看一下它的几个属性。
2024-12-13 15:58:17
873
原创 【element-tiptap】字体下拉框过滤浏览器不支持的字体
一篇文章中，我介绍了如何在【element-tiptap】编辑器中引入我们需要的其他字体。但是有一个问题，不同的设备，不同的浏览器，对字体的支持程度是不一样的，如果浏览器不支持某一个字体的话，就算设置了字体其实显示的也还是默认字体。所以我们最好可以先判断一下浏览器是否支持我们需要的字体，支持的话再添加到字体下拉框中。文件中使用，对字体进行判断，在这个文件中把字体过滤好，后面的组件代码就不用动了。
2024-12-10 14:59:49
257
原创 【element-tiptap】添加公式编辑器【MathQuill】
前面的文章[【element-tiptap】实现公式编辑](https://blog.youkuaiyun.com/weixin_45855469/article/details/143676666) 中，已经实现了一种非常简单的公式编辑，键入latex公式直接在文档中转换。今天讲的另一个更加复杂的公式编辑器的扩展，双击公式的时候弹出公式编辑的弹窗，可以对公式进行可视化编辑。
2024-12-03 16:09:14
1130
原创 【element-tiptap】导出word
方法中异步加载远程的图片资源，然后转成 base64，后来发现这个方法只能是同步的，所以就需要先遍历文档所有节点，将所有的图片都转成 base64。当前的图片，是保存在服务器返回的地址上，需要转换成 base64。其中的 #35 还是很关键的，是修复的图片尺寸检测失败的 bug。后来，我发现源码里还是有很多不完善的地方，官网还有处于 open 状态的提交记录😂。2、图片会变得很大，是因为图片的宽高没有传进去，使用的是默认的宽高。这个网站上找一个合适的图标，把它的 svg 复制下来。以及定义菜单的提示语。
2024-11-27 14:07:18
1198
2
原创 【PPTist】添加PPT模版
前言：这篇文章来探索一下如何应用其他的PPT模版，给一个下拉菜单，给出几个项目中内置的模版，点击模版可以进行切换
2024-11-22 14:26:37
1460
2
原创 【element-tiptap】Tiptap编辑器核心概念----内容、扩展与词汇
前言：本篇文章继续来讲Tiptap编辑器的核心概念，主要是内容、扩展、词汇相关的概念
2024-11-20 17:00:53
1641
原创 【PPTist】开源PPT编辑器初体验
另外项目目录也比较清晰，就是传统的 Vue3 项目。学习一个开源项目，最好的学习方式是从某一个功能入手，这一篇咱们就来看一个简单的功能吧，就是【添加幻灯片】功能。寓意着store中可以存储着多个对象，但是它们的根部又紧密相连~~~~~~可以看到幻灯片其实是一个数组，逻辑还挺容易看懂的。下载运行就不说了，很简单方便，而且没有报错。方法，用来创建一个空白页并添加到下一页。文件中，点击按钮的时候会触发。先全局搜索一下 “添加幻灯片”组件，这个组件是第三方的依赖。然后幻灯片的展示使用的是。另外存储数据使用的是。
2024-11-20 14:38:14
1406
原创 【element-tiptap】导入word并解析成HTML
本文主要探索了在 【element-tiptap】 中使用开源的库 【word-file-transform】 进行word文档的上传和解析
2024-11-13 16:47:27
1180
原创 【element-tiptap】实现公式编辑
【tiptap-math】还提供了可以在线体验效果的demo从这个demo中大家也能看到，功能很完备，但是公式会以 block 的形式展示，而不是行内形式。为了可以更加灵活的修改代码，我直接把源码放到了项目里，而不是通过 npm 下载的形式，这样就可以直接修改源码先简单的描述一下这个项目实现的功能吧1、当输入类似于$$1*2=1$$的用$$包裹的内容时，会将其中的内容自动转换为公式，并且进入编辑模式。
2024-11-11 13:34:05
921
原创 【前端基础】如何判断鼠标选中文本的方向
鼠标选中文本的方向，分两种，从左往右，和从右往左。其中涉及到选中区域可能跨行的问题，稍微有点复杂。经过苦思冥想终于找到一个比较完美的方法判断鼠标选择的方向，亲们，有没有简单的办法可以分享给我！// range不分前后。'鼠标选择的方向：'
2024-10-29 16:56:40
410
原创 【element-tiptap】如何添加格式刷扩展？
开源的库里面有三个文件其实可以仿照咱们代码里面的其他的定义扩展的代码，把这些代码合并成一个。格式刷的需求比较简单，功能比较单一。
2024-10-25 18:21:34
906
原创 【element-tiptap】如何实现查找替换功能？
这是一个稍微复杂的功能了，因为 element-tiptap 中没有查找替换功能，需要从零开始开发。但是，在万能的github上有一个开源的库，我们可以借用一下 tiptap-search-and-replace不过这个库是没有UI的，只有一个扩展的方法。但是这个关键的方法只要有了，剩下的就简单多了searchAndReplace.ts我的项目的目录名文件名都已经从首字母大写改成了全部小写的写法，不影响大家阅读哦我们首先把这个源码放到 scr/extensions 目录下面然后UI我们可以参考在线
2024-10-23 18:01:29
1194
原创 【element-tiptap】如何修改选中内容时的背景颜色？
前言：element-tiptap 用鼠标选中内容的时候，背景颜色跟系统设置的主题有关，比如的我的就是卡哇伊的pink，默认是淡蓝色。毕竟每次修改往样式文件里找定义是不方便的，最好将颜色定义为常量。那么我们找一下颜色的定义文件。这篇文章来探索一下，怎么自己规定选中的内容的背景颜色。但是我们观察一下语雀，背景颜色是它规定好的颜色。但是这个颜色的定义咱们可以深究一下。好吧，没想到这么简单哈哈哈。水一篇水一篇~~~~
2024-10-21 18:17:24
406
原创 【element-tiptap】如何改造CommandButton，显示选中项？
这篇文章主要讲的是改造CommandButton，让它可以显示文字，并且在编辑器获取焦点的时候，把焦点处的内容的属性通过CommandButton显示出来
2024-10-21 09:19:37
1202
原创 【element-tiptap】如何把分隔线改造成下拉框的形式？
当前的分隔线只有细横线这一种形式但是咱们可以看一下wps中的分隔线，花里胡哨的这些在wps里都需要使用快捷键打出来，真没找到菜单在哪里那么这篇文章咱们就来看一下如何改造分隔线组件，改造成下拉框的形式，并且把咱们想要的分隔线都放进去分隔线扩展是这个。
2024-10-18 09:17:07
1253
原创 【element-tiptap】如何引进系统中的字体？
标出来的地方，就是该字体对应的英文标识符，有的字体没有，就写汉字就行。经过我的实验呢，发现加 宋体、黑体 这样的汉字是木有用的，但是但是，我们使用中文字体的英文表示法就好啦！原因是咱们导出的方式由之前的命名导出改为了默认导出，那么咱们在导入的时候，就不能再使用花括号进行导入。但是其中有几个是没效果的，可能是因为我电脑上没有这种字体，有需要的同学可以搜一下怎么下载。这个文件的代码，把中文的字体的中文名和英文名的对应关系定义好，然后也加到 默认字体 中。确实，这样子是好使的，但是呢，能不能显示成中文呢？
2024-10-10 15:52:08
1152
原创 【element-tiptap】如何增加一个扩展项，为文字渲染颜色？
酱紫有些单调，我喜欢五颜六色的。那么这篇文章就来看下菜单项里面如何增加一个颜色的扩展，可以为文字修改颜色🥗🥗🥗。扩展列表都可以在这个文档里面找到，根据文档的说明，分为两个步骤，非常的简单方便快速。文本颜色呢，就不用自己开发扩展了，tiptap 有提供现成的扩展。可以看到，当前这个页面的文字，都是黑色的（除了链接）
2024-10-09 17:34:51
309
原创 【element-tiptap】如何将编辑器初始化为全屏显示？
我们在学习一个项目的代码的时候，最好的学习方式就是带着问题学习。就像题目的这个小问题，今天就一起来探索这一课题吧！是 Vue3 中，接收祖先组件数据的方法，发出数据的祖先组件需要使用。这个组件的定义稍微有点长，主要看控制缩放的属性是怎么来的。方法，创建出来的扩展，对应的组件呢，就是。配置项，看名字咱们就能看出来是缩放控制。，即可实现编辑器初始化就显示全屏效果啦。这个小符号明显就是控制编辑器缩放的。那么我们就在全局搜一下。可以看到，这个属性是通过。首先看下项目启动后的页面。我们点进去看一下它的定义。
2024-10-09 15:45:36
521
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人