极简富文本编辑器Demo

马黑黑

mhEditor

</> B I U D C 整站系统

Textarea

假装发布

马黑黑

代码

1. <style>
   
2. h2 { text-align: center; }
   
3. #ed_outer {
   
4.         width: 740px;
   
5.         height: 500px;
   
6.         border-radius: 6px;
   
7.         box-shadow: 3px 6px 12px darkgray;
   
8.         margin: 20px auto;
   
9.         position: relative;
   
10.         display: flex;
    
11.         flex-direction: column;
    
12. }
    
13. #ed_top, #ed_foot {
    
14.         border: 1px solid gray;
    
15.         border-radius: 6px;
    
16.         background: #f0f0f0;
    
17.         padding: 8px;
    
18.         display: flex;
    
19.         gap: 0 4px;
    
20.         align-items: center;
    
21. }
    
22. #ed_top {
    
23.         border-radius:  6px 6px 0 0;
    
24.         border-bottom-color: transparent;
    
25. }
    
26. #ed_edit {
    
27.         flex-grow: 1;
    
28.         border: 1px solid gray;
    
29.         box-sizing: border-box;
    
30.         position: relative;
    
31. }
    
32. #ed_foot {
    
33.         border-radius: 0 0 6px 6px;
    
34.         border-top-color: transparent;
    
35. }
    
36. #elm, #rDiv {
    
37.         width: 100%;
    
38.         height: 100%;
    
39.         background: white;
    
40.         padding: 8px;
    
41.         border: none;
    
42.         outline: none;
    
43.         overflow: hidden auto;
    
44.         resize: none;
    
45.         box-sizing: border-box;
    
46.         word-break: break-word;
    
47.         tab-size: 4;
    
48.         position: absolute;
    
49. }
    
50. #elm {
    
51.         font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    
52.         background: #f8f8dc;
    
53.         display: none;
    
54. }
    
55. #rDiv > p {
    
56.         margin: 8px 0;
    
57.         padding: 0;
    
58. }
    
59. #rDiv > p:nth-of-type(1)) { margin: 0 0; }
    
60. .btn {
    
61.         width: 30px;
    
62.         height: 30px;
    
63.         border: none;
    
64.         outline: none;
    
65.         padding: 0;
    
66.         cursor: pointer;
    
67. }
    
68. .btn:hover { border: 1px solid gray; }
    
69. 
    
70. #font_color, #bg_color, #edlist {
    
71.         width: 20px;
    
72.         height: 20px;
    
73.         box-sizing: border-box;
    
74.         display: flex;
    
75.         align-items: center;
    
76. }
    
77. .grow1 {
    
78.         flex-grow: 1;
    
79.         text-align: right;
    
80. }
    
81. </style>
    
82. 
    
83. <h2>mhEditor</h2>
    
84. <div id="ed_outer">
    
85.         <div id="ed_top">
    
86.                 <button id="code" class="btn" title="代码模式"></></button>
    
87.                 <button id="bold" class="btn" title="加粗(Ctrl+B)"><b>B</b></button>
    
88.                 <button id="italic" class="btn" title="斜体(Ctrl+I)"><i>I</i></button>
    
89.                 <button id="underline" class="btn" title="下划线(Ctrl+U)"><u>U</u></button>
    
90.                 <button id="strikethrough" class="btn" title='删除线'><del>D</del></button>
    
91.                 <button id="removeformat" class="btn" title="清除格式">C</button>
    
92.                 <span class="grow1"><a href="http://mhh.52qingyin.cn/">整站系统</a></span>
    
93.         </div>
    
94.         <div id="ed_edit">
    
95.                 <textarea id="elm">Textarea</textarea>
    
96.                 <div id="rDiv" contenteditable="true"><p><br></p></div>
    
97.         </div>
    
98.         <div id="ed_foot">
    
99.                 <span class="grow1"></span>
    
100.                 <button id="test" onclick='alert("感谢点击！")'>假装发布</button>
     
101.         </div>
     
102. </div>
     
103. 
     
104. <script>
     
105. 
     
106. (function() {
     
107.         let codeState = false;
     
108.         let btns = document.querySelectorAll('.btn');
     
109. 
     
110.         let formatCode = (code) => {
     
111.                 let regAr = [
     
112.                         [/(<\/p>|<\/div>)(<)/g, '$1\n$2'],
     
113.                         [/<div>(<br>)?<\/div>|<p><\/p>/g, ''],
     
114.                         [/^[\t]*\n/gm, '']
     
115.                 ];
     
116.                 regAr.forEach((item) => {
     
117.                         code = code.replaceAll(item[0],item[1]);
     
118.                 });
     
119.                 return code;
     
120.         };
     
121. 
     
122.         btns.forEach((item) => {
     
123.                 item.onclick = () => {
     
124.                         if(item.id === 'code') {
     
125.                                 if(codeState) {
     
126.                                         rDiv.innerHTML = elm.value;
     
127.                                         elm.style.display = 'none';
     
128.                                         rDiv.style.display = 'block';
     
129.                                 }else{
     
130.                                         elm.value = formatCode(rDiv.innerHTML);
     
131.                                         elm.style.display = 'block';
     
132.                                         rDiv.style.display = 'none';
     
133.                                 }
     
134.                                 codeState = !codeState;
     
135.                         }else{
     
136.                                 document.execCommand(item.id,false,item.id);
     
137.                         }
     
138.                         elm.value = formatCode(rDiv.innerHTML);
     
139.                 };
     
140.         });
     
141. 
     
142.         rDiv.oninput = () => elm.value = rDiv.innerHTML;
     
143. })();
     
144. 
     
145. </script>
     

复制代码

马黑黑

Wndows 的记事本，是一个处理纯文本的编辑器，Windows还有一个富文本编辑器，在安装word之类的办公软件之前编辑富文本的极好替代品，用过的朋友应该知道什么叫做富文本。

富文本编辑器支持图文共存。Web富文本编辑器，可以使用div之类的常规元素来模拟编辑界面，仅需一个属性值设置，contenteditable="true"。当 contenteditable 设置为true，div 或 p 之类的元素，就都可以对之编辑，且支持粘贴图片、给选定文本设置样式等。HTML核心代码举例如下：

<div contenteditable="true"></div>

上面这句代码，就可以令 div 处于可编辑状态。当然，我们需要给它设置样式，并用JS处理一些输入交互，正如本帖示例一样。

Demo只是一个简单展示，它提供一个基础，我们可以在此基础上进行扩展。

特别说明：本示例工具栏的几个小功能，均使用 execCommand 实现，该API已经被w3c宣布即将下架，但各大浏览器仍然完好支持。

马黑黑

contenteditable 属性是所有现代浏览器都支持的。contenteditable的值有三个：

true : 元素进入可编辑其内内容
false : 元素不可以编辑内容
plaintext-only : 元素仅可编辑纯文本，就像textArea控件一样，遗憾的是目前只有Chromium类的浏览器支持

除了 contenteditable 属性，还可以通过 CSS 的 user-modify 属性设置元素实现，仅 Chromium 类浏览器支持。

马黑黑

作为demo，示例是不完善的，也自然会存在逻辑上的以及其他方面的缺陷。也许，我这里只是提供一种思路，虽然主要是想展现HTML之强大。

如果要做一个可以部署到自己的项目的编辑器，demo远远不够，需要进一步构思与完善。此外要指出的是，特别重要的：

要有 form，上述代码全部或部分隶属于form。当 button 置于form中，要给出 type 属性，type="button"，否则每一个按钮都是提交。真正的提交按钮 type="submit“。form和提交按钮都应有 name 属性，然后结合项目，form的提交行为即 action 属性指向根据需要给出明确值。

幸运草

富文本，介个名字好听

幸运草

虽然不懂，看懂 mhEditor 的含义了，就是马黑编辑器

红影

输入一些文字，果然可以做加粗斜体等操作。还是头一次知道这个，感谢黑黑的介绍

红影

图片也可以放进去呢，只是不知道怎么去调。也不错，点代码模式，就直接看到图片地址了

亦是金

太深奥，看不懂。按红影说的试了试，挺灵的。我就跟在大侠后面学习套用！

马黑黑

亦是金 发表于 2023-12-7 09:40
太深奥，看不懂。按红影说的试了试，挺灵的。我就跟在大侠后面学习套用！

这只是一个demo编辑器代码，演示一下

马黑黑

幸运草 发表于 2023-12-7 09:05
富文本，介个名字好听

马黑黑

幸运草 发表于 2023-12-7 09:06
虽然不懂，看懂 mhEditor 的含义了，就是马黑编辑器

马黑黑

红影 发表于 2023-12-7 09:31
图片也可以放进去呢，只是不知道怎么去调。也不错，点代码模式，就直接看到图片地址了

富文本，就是不止是文本

马黑黑

红影 发表于 2023-12-7 09:31
图片也可以放进去呢，只是不知道怎么去调。也不错，点代码模式，就直接看到图片地址了

这个不是全功能编辑器，可以在代码模式中调整

马黑黑

红影 发表于 2023-12-7 09:13
输入一些文字，果然可以做加粗斜体等操作。还是头一次知道这个，感谢黑黑的介绍

论坛发帖都有这类编辑器的。富文本编辑器的开发门槛高、坑多且深，据说很多人都钻进去后出不来。

如果仅仅基于 contenteditable+execCommand，做个轻奢型的富文本编辑器其实不难，问题是，execCommand已经判了死刑，我们得基于 contenteditable + （range + section）去开发，或者用数据模型+映射方式来实现，这将是一个庞大复杂的工程。

红影

马黑黑 发表于 2023-12-7 12:47
富文本，就是不止是文本

原来是这个意思啊。

红影

马黑黑 发表于 2023-12-7 12:48
这个不是全功能编辑器，可以在代码模式中调整

哦哦，我试试。。。

马黑黑

红影 发表于 2023-12-7 13:06
哦哦，我试试。。。

马黑黑

红影 发表于 2023-12-7 13:06
原来是这个意思啊。

只是文本，是穷文本，记事本就是这个。