Skip to content

Commit

Permalink
25/01/19
Browse files Browse the repository at this point in the history
  • Loading branch information
WindRunnerMax committed Jan 19, 2025
1 parent f4cb9ff commit bbef689
Show file tree
Hide file tree
Showing 4 changed files with 13 additions and 4 deletions.
1 change: 1 addition & 0 deletions .scripts/docs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -431,6 +431,7 @@ export const docs: Record<string, string[]> = {
"Environment/斐讯K3C改散热",
"Environment/解决ufw下pptp客户端连接问题",
"Environment/建立DNS隧道绕过校园网认证",
"Environment/Ubuntu20.04配置CuckooSandbox环境",
],
IMGProcess: [
"IMGProcess/强智教务系统验证码识别OpenCV",
Expand Down
11 changes: 9 additions & 2 deletions Backup/从零设计实现富文本编辑器.md
Original file line number Diff line number Diff line change
Expand Up @@ -250,16 +250,23 @@ export interface Op {

其实这里还需要注意的是,`execCommand`命令的行为在各个浏览器的表现是不一致的,这也是之前我们提到的浏览器兼容行为的一种,然而这些行为我们也没有任何办法去控制,这都是其默认的行为:

- 在空`contenteditable`编辑器的情况下,直接按下回车键,在`Chrome`中的表现是会插入`<div><br></div>`,而在`Firefox(<60)`中的表现是会插入`<br>``IE`中的表现是会插入`<p><br></p>`
-
- 在空`contenteditable`编辑器的情况下,直接按下回车键,在`Chrome`中的表现是会插入`<div><br></div>`,而在`FireFox(<60)`中的表现是会插入`<br>``IE`中的表现是会插入`<p><br></p>`
- 在有文本的编辑器中,如果在文本中间插入回车例如`123|123`,在`Chrome`中的表现内容是`123<div>123</div>`,而在`FireFox`中的表现则是会将内容格式化为`<div>123</div><div>123</div>`
- 同样在有文本的编辑器中,如果在文本中间插入回车后再删除回车,例如`123|123->123123`,在`Chrome`中的表现内容会恢复原本的`123123`,而在`FireFox`中的表现则是会变为`<div>123123</div>`
- 在同时存在两行文本的时候,如果同时选中两行内容再执行`("formatBlock", false, "P")`命令,在`Chrome`中的表现是会将两行内容包裹在同个`<p>`中,而在`FireFox`中的表现则是会将两行内容分别包裹`<p>`标签。
- ...

当然,默认的行为并不是完全没有用的,在某些情况下,我们可能要实现纯`HTML`的编辑器。毕竟如果在基于`MVC`模式的编辑器实现中,会处理掉对`Model`来说无效的数据内容,这样就导致原本的`HTML`内容丢失,因此在这种需求背景下依赖浏览器的默认行为可能是最有效的,这种情况下我们可能主要关注的就是`XSS`的处理了。

### ContentEditable
`ContentEditable``HTML5`中的一个属性,可以让元素变得可编辑,再配合上内置的`execCommand`就是我们上边聊的最基本`DEMO`。那么如果要实现最基本的文本编辑器,就只需要在地址栏中输入下面的内容:

```text
data:text/html,<div contenteditable style="border: 1px solid black"></div>
```



### Canvas
排版引擎

Expand Down
3 changes: 2 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
如果觉得还不错,点个`star`吧 😁

<!-- Summary Start -->
版本库中共有`492`篇文章,总计`92674`行,`1093259`字,`3043319`字符。
版本库中共有`492`篇文章,总计`92798`行,`1096179`字,`3048941`字符。
<!-- Summary End -->

这是一个前端小白的学习历程,如果只学习而不记录点什么那基本就等于白学了。这个版本库的名字`EveryDay`就是希望激励我能够每天学习,下面的文章就是从`2020.02.25`开始积累的文章,都是参考众多文章归纳整理学习而写的。文章包括了`HTML`基础、`CSS`基础、`JavaScript`基础与拓展、`Browser`浏览器相关、`Vue`使用与分析、`React`使用与分析、`Plugin`插件相关、`RichText`富文本、`Patterns`设计模式、`Linux`命令、`LeetCode`题解等类别,内容都是比较基础的,毕竟我也还是个小白。此外基本上每个示例都是本着能够即时运行为目标的,新建一个`HTML`文件复制之后即可在浏览器运行或者直接可以在`console`中运行。
Expand Down Expand Up @@ -455,6 +455,7 @@
* [斐讯K3C改散热](Environment/斐讯K3C改散热.md) [(*en-us*)](I18N/Environment/斐讯K3C改散热.md)
* [解决ufw下pptp客户端连接问题](Environment/解决ufw下pptp客户端连接问题.md) [(*en-us*)](I18N/Environment/解决ufw下pptp客户端连接问题.md)
* [建立DNS隧道绕过校园网认证](Environment/建立DNS隧道绕过校园网认证.md) [(*en-us*)](I18N/Environment/建立DNS隧道绕过校园网认证.md)
* [Ubuntu20.04配置CuckooSandbox环境](Environment/Ubuntu20.04配置CuckooSandbox环境.md) [(*en-us*)](I18N/Environment/Ubuntu20.04配置CuckooSandbox环境.md)

## IMGProcess
* [强智教务系统验证码识别OpenCV](IMGProcess/强智教务系统验证码识别OpenCV.md) [(*en-us*)](I18N/IMGProcess/强智教务系统验证码识别OpenCV.md)
Expand Down
2 changes: 1 addition & 1 deletion Timeline.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Timeline

前端笔记系列共有 424 篇文章,总计 75542 行, 865755 字, 2399928 字符。
前端笔记系列共有 424 篇文章,总计 75542 行, 865758 字, 2399928 字符。

### 2025-01-18
第 424 题:[Canvas编辑器之剪贴板数据处理](Plugin/Canvas编辑器之剪贴板数据处理.md)
Expand Down

0 comments on commit bbef689

Please sign in to comment.