- 博客(47)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 React富文本编辑器开发（十三）序列化
Slate是一个用于编辑富文本内容的框架，它支持复杂的、嵌套的数据结构。为了确保编辑器的内容始终保持一致和有效，Slate提供了规范化（）机制。规范化的目的是确保编辑器内容的形状符合特定的约束条件。Slate默认提供了一些内置约束，如确保元素节点包含至少一个文本后代、合并相邻的文本节点、块节点只包含特定类型的子节点等。开发人员可以根据特定的需求添加自定义约束，通过扩展编辑器上的函数来实现。此函数在插入或更新节点时被调用，允许开发人员检查和修复节点的状态以符合约束。规范化是一个多次执行的过程，每次调用。
2024-03-06 21:53:34
1101
原创 React富文本编辑器开发（十二）插件
由于内联样式优先于样式表，您使用样式表提供的样式将不会覆盖默认样式。文本级别的格式化的一个缺点是您不能保证任何给定格式是 “连续的” —— 也就是说它会作为一个单独的叶子保留。中渲染叶子是类似的——您不能保证即使一个单词具有一种格式，该叶子也是连续的，因为它取决于它与其他格式的重叠方式。它不会重新发明自己的视图层，您不必学习新的东西。除了插件函数之外，您可能还想公开与您的插件一起使用的辅助函数。允许您控制自定义节点和属性在您的富文本领域中的渲染行为。而不是样式表来提供您的样式，这样会覆盖默认的内联样式。
2024-03-06 21:52:36
1226
原创 React富文本编辑器开发（十一）命令与编辑器
..Editor,// ...},在编写自己的命令时，您经常会使用Slate提供的Transforms帮助程序。
2024-03-06 21:51:45
1157
原创 React富文本编辑器开发（十）变换
Slate的数据结构是不可变的，因此你不能直接修改或删除节点。相反，Slate带有一系列的 “transform” 函数，可实现更改编辑器的值的目的。Slate的变换函数被设计得非常灵活，可以表示可能需要对编辑器进行的各种更改。然而，这种灵活性一开始可能很难理解。通常，您将对零个或多个节点应用单个操作。例如，下面介绍如何通过非标准操作（或调试/跟踪哪些节点将受到一组节点选项的影响）可能需要使用来创建的JavaScript迭代器和for的循环来行动。
2024-03-06 08:33:10
1129
原创 React富文本编辑器开发（九）位置
位置是指在使用Slate编辑器中进行插入、删除或执行其它操作时引用文档中特定位置的方式。有几种不同类型的位置接口，每种接口都用于不同的用例。
2024-03-06 08:31:59
501
原创 React富文本编辑器开发（八）节点
节点，也就是Node, DOM树就是由节点组成的，leaf是节点， element也是节点，节点贯穿始终。EditortextSlate 文档是一种嵌套和递归结构。在文档中，元素可以有子节点，所有这些子节点都可以有子节点，没有限制。嵌套和递归结构使您能够对简单行为（如用户提及和主题标签）或复杂行为（如带有标题的表格和图形）进行建模。
2024-03-05 15:43:22
496
原创 SwiftUI之CoreData详解（一）
coreData是一种数据持久化的方案，是对SQLite的一种封装。一说到这种桌面化的数据库，我就无比的怀念, 多好的数据库产品，被微软扼杀了，相当年教大学生妹子们国家二级数据库时都是手把手教的，呃~~~，不好意思，说的有点跑题了。要想使用coreData, 首先我们要先创建一个模型文件，它是一个结尾的文件，这个模型文件说白了就是一个库，是的，因为coreData。
2024-03-04 19:57:17
1594
原创 React富文本编辑器开发（六）
虽然现在我们的内容能够实时的保存，但是页面一刷新还是还原了，这是显而易见的，因为我们并没有在组件初始化时从我们的LocalStore中读取数据，所以就只显示初始变量中的内容。以现在我们所了解的内容而言，或许你发现了一个问题，就是我们的编辑器的内容如何保存的问题，数据的保存是最重要的一个环节，无法保存的数据意义不大。现在，相关的基础知识我们应该有个大概的了解了，但离我们真正的开发出一个实用型的组件还有一段距离，不过不用担心，我们离目标已经越来越近。上面的工具很简单，就是把所有的节点纯文本化。
2024-03-03 21:56:45
683
2
原创 React富文本编辑器开发（五）
这样代码也清爽了许多，功能我们也抽取出来了，这为我们日后的工具栏的设计创建了基础。了，下面我就形如进行这样的操作，把相关的可复用的命令操作抽取出来。事件里了，但如果我想复用相同的功能怎么办呢，最好的办法就是。到目前为止我们所有的功能操作都是直接写在。
2024-03-01 20:00:54
582
原创 React富文本编辑器开发（四）
通过前一章的内容得知，元素的渲染是通过渲染器来呈现的，块级元素通过指定。上一节我们做了块级元素的格式操作，这节我们来讲行内元素的相关操作。行内元素的样式一般指。也是元素，那么就要设计样式。时将所选择的内容变成粗体，修改。瞧，我们的功能越来越多是不是。创建一个新文件，将所有。我们再增加一个功能，当按。
2024-03-01 19:34:11
574
原创 React富文本编辑器开发（三）
现在我们的编辑器显示的内容很单一，这自然不是我们的目标，让呈现的内容多元化是我们的追求。这就需要让编辑器能够接收多元素的定义。从初始数据的定义我们可以推断数据的格式远不止一种，那么其它类型的数据如何定义及呈现的呢，我们新建一个文件。时光标所在的块应该会变成一个代码块。再次按一次时就变成普通的文本段落。元素，相反也能转化回默认元素。为了让两者的元素有较大的变化，我们对。现在新的要求来了，我们希望能动态的把选中的段落转换化。这个组件平常的不能再平常了。当然还要把这个渲染器指定给。
2024-03-01 16:18:04
878
原创 React富文本编辑器开发（二）
我们接着上一节的示例内容，现在有如下需求，我们希望当我们按下某个按键时编辑器有所反应。这就需要我们对编辑器添加事件功能。现在看控制台的打印结果，能捕获到每一次的按键值。当然这肯定不是我们想要的，我们想要的是有一个实用的功能。时就能看到界面上的变化了。
2024-03-01 14:46:54
840
原创 React 模态框的设计（八）优化补充
在之前的弹窗的设计中，有两处地方现在做一点小小的优化，就是把。中的 onPointerEnter 事件 用。来规换，效果更佳，同样的，在。
2024-02-29 22:57:12
1180
原创 React 模态框的设计（七）整合与测试
一个弹窗是不是也挺复杂的，是的，往往看似简单的东西真正做起来很复杂。只有多试验才能出真知。光看不练肯定是不行的。下面我们来把前几节的内容整合一下就大功告成了。本示例中所有的引入目录的位置请根据自己的项目做适当的调整。本弹窗系列到此完结。相关的内容前几节已经讲得很通透了。
2024-02-29 15:12:58
727
原创 React 模态框的设计（六）Draggable的整合
前一节课中漏了一个知识点，当内容很长时需要滚动，这个滚动条是很影响美观的。在MacOS下的还能忍，win系统下简直不能看。如何让长内容能滚动又不显示滚动条呢，我尝试过很多办法，最终下面这个方法目前来说是最完美的。我们创建一个css文件。把它引入 到 ModelContent组件中就好了。目前我测试了Edge、Safari、Chrome三款浏览器，效果不错。其它的没有测试，不知道什么效果，欢迎大家告诉我。
2024-02-29 15:02:12
656
原创 React 模态框的设计（五）主体设计
弹窗的主体设计没什么特别，就是把细分化后的各个功能封装在一个个的小组件内，然后再整合。这样逻辑就分开了，不乱。
2024-02-29 13:52:47
887
原创 React 模态框的设计（四）状态管理
最近忙的不可开交，每天恨不得把时间掰开使用，挣不到钱还没时间，有时候我在想我怎么混得这个样子。题外话不多说，从这节课开始，我把这个模态框的教程写完整。请看效果：这个模态框功能相对比较完整，应该能满足大部分的使用场景了，相信看完这个系统的文章后，你应该就能开发出一个自己的模态框了。其实看似简单，其实比较复杂的，react有其天生的缺陷，如何绕开它的缺点，我们就要多思考，把React文档看透才行，多练习，多实践，多做笔记，这样我们才能少走弯路。
2024-02-29 13:23:11
1224
原创 React 模态框的设计（三）拖动组件的完善
组件的设计中给了一个简化的方法，今天我来完善一下这个组件，可用于任何可移动组件的包裹。这个优化中，增加了一个注目的效果，还增加了触发可拖动区域的指定功能，这样我们对可拖动组件有更大的自由掌控。这样就能判断当前鼠标是否处于指定的组件上并启动移动效果。由于我们要实现抓取注目动画和移动动画，都是通过。事件会触发拖动的移动效果。实现的，但是我们只要缩放动画，所以我用了两层。这样就有了开头的效果了。的情况下，可拖动组件中含有。指定的类名的子组件的。, 我来做个小组件测试。
2024-02-23 16:37:50
862
2
原创 React 模态框的设计（二）
自定义组件是每个前端开发者必备的技能。我们在使用现有框架时难免有一些超乎框架以处的特别的需求，比如关于弹窗，每个应用都会用到，但是有时我们使用的框架中提供的弹窗功能也是功能有限，无法满足我们的应用需求，今天 我来讲一下在React中如何自定义各种样式的弹窗。相信通过这篇文章，你能在自定义组件方面技能有一个质的提升。相关的知识能够掌握的更加牢固。先看最终的效果：首先本实例都是在MUI及基础上设计的，样式部分我使用了。
2024-02-22 16:27:45
750
原创 React 模态框的设计（一）拖动组件的设计
春节终结束了，忙得我头疼。终于有时间弄自己的东西了。今天来写一个关于拖动的实例讲解。先看效果：这是一个简单的组件设计，如果用原生的js设计就很简单，但在React中有些事件必须要多考虑一些。这是一个系列的文章，专门针对实际应用开发过程中的技术难点逐个讲解，相信大家能用得着。再次说明，我的示例都是基于MUI框架的，如果你不讲究样式的话，也可以直接采用原生dom的样式设计。关于项目的创建及MUI的应用请查看我以往的文章，都是详细的教程讲解。
2024-02-21 10:28:05
623
原创 React框架之MaterialUI详解 （一）开始
React框架有很多，基本上主流的我都用过，小众的我也用过，但是MaterialUI是我用的最顺手的一个框架，几曾何时我也想过自己整一个框架，后来还是放弃了，主要是精力和时间跟不上。再说了，就是现在的框架已经非常优秀了， 没有必要再一个轮子。Material UI 是一个开源的 React 组件库，实现了 Google 的 Material 设计风格。它功能全面，开箱即用。
2024-02-05 16:41:53
1072
原创 React Emotion 如何优雅的使用样式（一）
Emotion 是一个专为使用 JavaScript 编写 css 样式而设计的库。它提供了强大且可预测的样式组合，以及源映射、标签和测试实用程序等功能为开发人员提供了出色的体验，并且支持字符串和对象样式。上面讲了多种使用 Emotion的方法，如果你使用的是 React，最简单的入门方法是使用包。如果你不使用 React，你应该使用包。
2024-02-05 15:23:55
1478
原创 React实例之完善布局菜单（三）
接着上篇的内容继续。规划界面布局。界面分为三个部分，左边为菜单部分，右边上部有个80 px高度左右的功能区，下面是主内容区。依据这个设计，我们进行下面的步骤：在 SMenu项目中创建一个目录：SLayout, 这个目录里我们存储各种布局，我们先来示例一种，其它的我们根据需要可以自行设计。在这个目录中创建文件这个没什么好说的，就是主要就是利用Flex的特殊用Bootstrap对界面进行布局，没什么难度。现在我们利用这个布局把所用的元素添加进来。
2024-02-04 17:22:59
1024
原创 React实例之完善布局菜单（二）
我们继续未完的课程。我们已经设计完所有theme的有关逻辑和代码了。接下来就是菜单部分，首先，菜单分为菜单头和菜单列表，还有收缩模式和缩略模式。为配置能用化的考虑，我们在菜单配置方面采用了Json数组。而菜单本身的数据状态和App的业务逻辑是没有关联的。所以我们尽可能的把两者隔离开。组件间的状态共享一般通过 Props 、state、 及Reducer 这么种方式。对于单层状态的上下传递我们采用 Props 和 state 就可以，但对于多层级的状传递这种方式就很不合适了。
2024-02-04 12:07:08
1284
原创 React实例之完善布局菜单（一）
自定义颜色模式就有点技术含量了。也是最繁琐的一环。首先我们要定义的每种颜色要有两个模式下的颜色值。这就要一个标准，由于我没有采用 TS 设计模式，所以就要用其它的办法来约束定义的行为，比如一个函数就是一个很好的办法。我们在STheme目录中创建一个工具函数库，把所有的我们自定义的工具函数放到其中统一导出就好了。// 生成基本颜色，lightColor为浅色，darkColor为深色return {/*** 生成主题模型* @returns*//*** 生成MUI系统主题。
2024-02-03 17:30:53
1382
原创 React Router 完美教程（下）
关于路由的主要应用技术我已经讲完了，根据这些应用方法，配置 React的状态管理，会使我们的应用更加灵活，设计更加方便。只要多练习，多思考，就一定能开发出非常完美的产品。
2024-02-01 06:35:22
1165
1
原创 React Router 完美教程（上）
什么叫路由呢，说白了就是如何处理页面的跳转。在传统的网站中，我们都是向服务器请求页面及相应的css和js代码。自从前后端分离的相思提出后，一堆基于js虚拟Dom的框架应运而生。React就是其中优秀的代表作之一。这种方式极大的优化了开发体验。从些，我们前端开发也可以向开发桌面软件一样那么的优雅，这在开发中后端产品中优势特别明显。那么，既然已经分离了，在浏览器中如何处理跳转关系呢，这就离不开路由这个话题了。在React中借助 Router 这个第三方包可以优雅的处理这种操作，让我们的界面实现丝滑的转换。
2024-01-31 14:47:32
1331
原创 在Ubuntu环境下搭建小型化Git服务器
对于我们写代码的人来说，git再熟悉不过了，也必不可少，比如像我，在单位写了点东西，晚上回到家有时还要捯饬一下，但电脑带来带去的也麻烦不是，有了私有的Git库，就方便多了，随时随地都能同步代码，方便的不只一点点。今天我说来讲讲如何在的环境下搭建我们私有的Git存储库，这里给大家介绍一个库gitolite，不是一般的好用啊， 是相当的好用。下面开始介绍它。
2024-01-29 17:25:29
1175
原创 React一学就会(7): 细说redux及其应用
不知不觉一个星期结束了，很快就要过年了，中间休息了两天，小孩生病，我也有点感冒了，还好，我的这个 React 基础教学课程也基本结束了。大家有不明白的可以留言问我，我一定竭尽所能的帮助你。后面几节课就 React 常用的几款第三方插件进行详细的讲解。本系列课程以Axios等插件主题进行讲解。都非常重要，可以说是学习React绕不过去的知识内容。这节课是Redux的内容。
2024-01-29 16:03:45
1277
原创 React一学就会(6): 细说Hooks及其应用
这几天小孩生病发烧，天天跑医院，搞得精力实在跟不上。写作的时间大大减少，写出的质量也不高。关于昨天写的函数组件的内容有点乱，很多都是直接参考了官方文档，今天再对相关的知识作个补充。请大家谅解。
2024-01-26 18:28:14
908
1
原创 React一学就会(5): 函数组件的高级特性
有时，我们希望在组件之间重用一些有状态逻辑。以上面的示例为例，假设我们还想在另一个组件中重用订阅逻辑，我们也许会将这个逻辑提到到一个名为：useFriendStatus。});它根据参数friendID，返回我们的好友是否在线的一个功能。return (每个组件的状态是完全独立的。Hooks是一种重用状态逻辑的方法，而不是状态本身。事实上，对Hook的每次调用都有一个完全隔离的状态，因此我们甚至可以在一个组件多次使用相同的自定义Hook。自定义Hook。
2024-01-25 19:09:40
771
原创 React一学就会(4): 强化练习二
书接上回，是不是感觉已经有点入门了。不过别急，码哥我准备了很多干货，等我们把这些基本几个章节的学完，码哥带着你一起装逼一起飞。我不大可能只是带着你们入门，那不是我的风格。码哥会教你如何开发一个完整中后台。前端后端如何匹配，什么安全什么策略都会教给你。如果你还有其它兴趣，我还可以教你许多网络知识，Android开发、IOS开发，Mac开发、c#开发等等。总之，一年的时间你肯定学不完。根本学不完。
2024-01-24 17:40:30
508
原创 React一学就会(3): 强化练习一
这节课我们用前两节课的知识做一个实践，在实战中巩固我们所学。本来我想借用官方的示例翻译一下，再补充一点就完事了，当写好了后仔细审核一翻后感觉不行，有点乱。官方那个示例真不适合用来做基础教程，就没有发，已经删了。白瞎了我一个下午的时间。本着`老码出品必属精品`的原则，今天自己亲手撸一个，咱要么不做，做就要做好。开撸。
2024-01-23 18:05:06
991
1
原创 React一学就会(2): 快速上手
有了上一节的铺垫，基础环境我们已经创建好了，再次运行它, 并在浏览器中右击，选择检查菜单项，打开控制台，如下图所示这是我们上节课操作的结果。到目前为止，你只要你跟着我一步一步的做，就行了。或许你已经懂得并了解了一react的基础结构了，也或许你还一头雾水，不过不用担心，开胃菜还没开始。react以状态化构建组件的方式极大的优化了我们的开发成本，一但掌握你就爱不释手。
2024-01-21 15:55:21
862
1
原创 React一学就会(1): 项目的创建
随着JS的发展，基于JS应用几乎是无处不在，于是乎，众多框架应运而生。react就是众多优秀框架中不可多得的之一。框架这东西，每个程序员心里都有一个不同的排名。各见所爱了。我写这个一系列的教程一是想给刚学的朋友一点参考。二是自我总结一下经验，做点笔记。这将是一个超完整超详细的一个系列教程，跟着学，可以快速打通你的任督二脉。本系列教程参考了大量的资料，有官方的，也有网友的，但每一个实例都是经过精心fj雕琢后再验证的，确保不会误人子弟。
2024-01-20 13:45:16
914
原创 Ubuntu下的目录权限操作
权限分为三级，可读、可写、可执行，分别用字母：r、 w、 x、表示，操作者对某一文档或多个文档可同时拥有多项权限，比如：rwx表示拥有全部权限，rx表示拥有读和执行的权限。此外，权限可以用数字来表示，r用4表示，w用2表示，x用1表示,如果赋予某个人多项权限，则直接加上相应的权限数字即可，如：7表示全部权限（4+2+1），6表示读写权限（4+2），如果撤销全部权限直接赋予0就可以了。后面的权限描述三个字符为一组，分别表示所有者权限、所属组权限、其它用户权限，固定排例，没有的权限用"-"表示；
2024-01-19 15:14:14
785
1
原创 React之布局菜单
基于这篇文章，你应该首先已经了解了如何创建`react`项目，用`create-react-app`也好，用`vite`也罢。首先你要会创建项目。我的组件UI采用的是MUI, 所以要安装MUI,当然你也可以使用其它的UI组件。当你学习完这个小节并且充分理解后，你就可以随心所欲的做出修改。
2024-01-19 14:53:35
991
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人