编辑器，TS

lwg649 · Feb 27, 2022 · 53ed4ca · 53ed4ca
1 parent f683aab
commit 53ed4ca
Show file tree

Hide file tree

Showing 45 changed files with 1,152 additions and 5 deletions.
diff --git a/dom-demo/7-contenteditable.ts b/dom-demo/7-contenteditable.ts
@@ -56,6 +56,7 @@
         console.log('selection:', selection);
     });
 
+    // 输入时，内容还未插入文本框中
     document.addEventListener('compositionstart', e => {
 
     });

diff --git a/dom-demo/9-table.ts b/dom-demo/9-table.ts
@@ -0,0 +1,12 @@
+/**
+ * @author 素燕（我有个公众号：素燕）
+ * @description 表格
+ */
+
+(function () {
+    let rootEl = document.querySelector('.sy-dom-app') as HTMLElement;
+    if (!rootEl) {
+        return;
+    }
+
+}());
diff --git a/dom-demo/README.md b/dom-demo/README.md
@@ -1,3 +1,5 @@
+# HTML和DOM学习
+
 ownerDocument 的作用？
 
 操作节点的方法：
@@ -16,4 +18,8 @@ childNodes
 cloneNode
 ```
 
-document.documentElement 为 HTML 元素；
+document.documentElement 为 HTML 元素；
+
+## 参考
+
+- [MDN HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
diff --git a/dom-demo/base.css b/dom-demo/base.css
diff --git a/dom-demo/editor/avatar.jpg b/dom-demo/editor/avatar.jpg
diff --git a/dom-demo/editor/doc.md b/dom-demo/editor/doc.md
@@ -0,0 +1 @@
+# 简单的编辑器实现
diff --git a/dom-demo/editor/editor.css b/dom-demo/editor/editor.css
@@ -0,0 +1,33 @@
+body {
+    padding: 0;
+    margin: 0;
+}
+
+h1 {
+    text-align: center;
+}
+
+.table-container {
+    background-color: #f5f5f5;
+    width: 90%;
+    overflow: auto;
+    margin: 20px auto;
+    padding: 40px;
+}
+
+td,
+th {
+    border: 1px solid rgb(190, 190, 190);
+    padding: 10px 20px;
+}
+
+table {
+    border-collapse: collapse;
+    border: 1px solid rgb(200, 200, 200);
+    letter-spacing: 1px;
+    font-size: 0.8rem;
+}
+
+.container {
+    border: 1px dashed rgb(200, 200, 200);
+}
diff --git a/dom-demo/editor/index.css b/dom-demo/editor/index.css
@@ -0,0 +1,33 @@
+body {
+    background-color: #f5f5f5;
+}
+
+.editor-container {
+    background-color: #fff;
+    width: 800px;
+    min-height: 500px;
+    margin: 0 auto;
+    padding: 20px;
+    border: 1px solid blue;
+    margin-top: 44px;
+}
+
+.toolbar-container {
+    position: fixed;
+    top: 0;
+    height: 40px;
+    background-color: #fff;
+    width: 100%;
+    border-bottom: 1px solid #f1f1f1;
+}
+
+.toolbar-container span {
+    display: inline-block;
+    margin: 10px 20px;
+    height: 100%;
+    cursor: pointer;
+}
+
+.code {
+    background-color: #f5f5f5;
+}
diff --git a/dom-demo/editor/index.html b/dom-demo/editor/index.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./index.css">
+    <link rel="stylesheet" href="./editor.css">
+    <title>编辑器</title>
+</head>
+
+<body>
+    <div class="toolbar-container">
+        <span data-command="bold">B</span>
+    </div>
+    <div class="editor-container" contenteditable="true">
+        <h1>编辑器实现原理</h1>
+        <p>使用 <span class="code">contenteditable</span> 实现编辑器，这里面的内容都可以编辑。编辑器需要包含：</p>
+        <ol class="container">
+            <li>加粗</li>
+            <li>斜体</li>
+            <li>撤销</li>
+            <li>恢复</li>
+            <li>格式刷</li>
+            <li>清除格式</li>
+            <li>字体</li>
+            <li>下划线</li>
+            <li>字体颜色</li>
+            <li>填充颜色</li>
+            <li>对齐</li>
+            <li>首行缩进</li>
+            <li>行间距</li>
+            <li>字符间距</li>
+            <li>引用</li>
+            <li>分割线</li>
+            <li>表格</li>
+            <li>代码</li>
+            <li>表情</li>
+        </ol>
+        <h3>1.表格编辑</h3>
+        <!-- 表格嵌套表格 -->
+        <div class="table-container" contenteditable="true">
+            <table>
+                <caption>素燕的个人简介</caption>
+                <thead>
+                    <tr>
+                        <th>姓名</th>
+                        <th>公司</th>
+                        <th>职位</th>
+                        <th>爱好</th>
+                        <th>备注</th>
+                    </tr>
+                </thead>
+                <tr>
+                    <td>素燕</td>
+                    <td>百度</td>
+                    <td>
+                        <!-- 嵌套的表格 -->
+                        <table id="table2">
+                            <tr>
+                                <td>前端</td>
+                                <td>iOS</td>
+                            </tr>
+                            <tr>
+                                <td colspan="2">行胜于言，愿意做有挑战的事情</td>
+                            </tr>
+                        </table>
+                    </td>
+                    <td>
+                        <p>写作</p>
+                    </td>
+                    <td>
+                        <ol>
+                            <li>公众号素燕作者</li>
+                            <li>《前端小课》作者</li>
+                            <li>大前端工程师</li>
+                            <li>对技术充满热情</li>
+                        </ol>
+                    </td>
+                </tr>
+            </table>
+        </div>
+        <!-- 列表 -->
+        <h3>2.列表</h3>
+        <h5>目前都有哪些知名的编辑器：</h5>
+        <ul>
+            <li>quill</li>
+            <li>slate</li>
+        </ul>
+        <h5>编辑器实现的等级划分：</h5>
+        <ol>
+            <li>L0: 依托于<span class="code">contenteditable</span>与<span class="code">document.excCommend()</span>
+            ，无需专门的编辑器团队，可扩展性差</li>
+            <li>L1: 依托于<span class="code">contenteditable</span></li>
+            <li>L2: 完全自己实现</li>
+        </ol>
+
+        <h3>3.图片</h3>
+        <p>试一试删除图片</p>
+        <img src="./avatar.jpg" width="120px"/>
+
+        <h3>4.链接</h3>
+        <p>发现没有下面的链接点不了</p>
+        <a href="https://github.com/lefex/FE">素燕的GitHub</a>
+
+        <h3>5.分割线</h3>
+        <p>我是一个分割线</p>
+        <hr>
+    </div>
+
+    <script src="./toolbar.ts" type="module"></script>
+</body>
+
+</html>
diff --git a/dom-demo/editor/toolbar.ts b/dom-demo/editor/toolbar.ts
@@ -0,0 +1,40 @@
+/**
+ * @author 素燕（我有个公众号：素燕）
+ * @description toolbar
+ * 由于 execCommand 方法已经废弃，故不在讨论这种实现方式
+ */
+
+/**
+ * 加粗如何实现：
+ */
+
+const editorEl = document.querySelector('.editor-container') as HTMLDivElement;
+
+editorEl.onblur = (e) => {
+    console.log('editor blured', e);
+    // 阻止编辑器失去焦点
+    editorEl.focus();
+};
+
+editorEl.onfocus = (e) => {
+    console.log('editor focused', e);
+}
+
+document.addEventListener('selectionchange', e => {
+    const selection = window.getSelection();
+    console.log('selection:', selection);
+});
+
+const bold = () => {
+    let boldEl = document.querySelector('span[data-command="bold"]') as HTMLButtonElement;
+    if (!boldEl) {
+        return;
+    }
+    boldEl.addEventListener('click', (e) => {
+        console.log('bold');
+        editorEl.focus();
+        e.preventDefault();
+    });
+}
+
+bold();
diff --git a/dom-demo/event.html b/dom-demo/event.html
@@ -30,6 +30,7 @@
     </style>
 </head>
 <body>
+    <a href="https://zh.javascript.info/focus-blur">blur and focus event</a>
     <div id="wrap" class="wrap" onclick="didClicked()">
         <div id="sub1" class="sub1" onclick="didClicked1()">
             <div id="sub2" class="sub2" onclick="didClicked2()"></div>

diff --git a/dom-demo/form.html b/dom-demo/form.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>form表单</title>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/dom-demo/list.html b/dom-demo/list.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>列表使用</title>
+    <style>
+        .container {
+            background-color: #f5f5f5;
+            width: 800px;
+            overflow: auto;
+            margin: 20px auto;
+            padding: 40px;
+        }
+
+        h2 {
+            text-align: center;
+        }
+
+        /* li {
+            list-style-type: circle;
+        } */
+
+        /* ul li li {
+            list-style-type: square;
+        } */
+    </style>
+</head>
+
+<body>
+    <h2>HTML中的列表</h2>
+    <div class="container" contenteditable="true">无序列表UL
+        <ul>
+            <li>第一名：素燕</li>
+            <li>第二名：Lefex</li>
+            <li>参与奖:
+                <ul>
+                    <li>大鹏</li>
+                    <li>可怜猫</li>
+                </ul>
+            </li>
+        </ul>
+    </div>
+
+    <div class="container" contenteditable="true">有序列表OL
+        <ul>
+            <li>first item</li>
+            <li>second item
+            <!-- Look, the closing </li> tag is not placed here! -->
+              <ol>
+                <li>second item first subitem</li>
+                <li>second item second subitem</li>
+                <li>second item third subitem</li>
+              </ol>
+            <!-- Here is the closing </li> tag -->
+            </li>
+            <li>third item</li>
+          </ul>
+    </div>
+</body>
+
+</html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -56,6 +56,7 @@ @@
             console.log('selection:', selection);
         });
+        // 输入时，内容还未插入文本框中
         document.addEventListener('compositionstart', e => {
         });
@@ Expand Down @@