折腾:
【未解决】混合HTML源码和格式化后的显示效果的所见即所得的html编辑器
期间,去试试
yabwe/medium-editor: Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.
MediumEditor
去试试
下载代码到本地
本地打开是可以看到效果:
![](https://www.crifan.com/files/pic/uploads/2021/03/f44f6ad87f41499685eda536254e8998.jpg)
但是源码太臃肿:
![](https://www.crifan.com/files/pic/uploads/2021/03/6e7f30f86d6f4a8aae0b827e64b02458.jpg)
换一个干净的。
参考:
MediumEditor
的介绍,去用代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>medium editor | test</title> <link rel="stylesheet" href="css/medium-editor.css"> <link rel="stylesheet" href="css/themes/default.css"> </head> <body> <div> <div class="editable"> <p>My father’s family name being <a href="https://en.wikipedia.org/wiki/Pip_(Great_Expectations)">Pirrip</a>, and my Christian name Philip, my infant tongue could make of both names nothing longer or more explicit than Pip. So, I called myself Pip, and came to be called Pip.</p> <p>test html content</p> </div> </div> <script src="js/medium-editor.js"></script> <script> var editor = new MediumEditor('.editable'); </script> </body> </html>
![](https://www.crifan.com/files/pic/uploads/2021/03/58bcc92b574b44e48b0ea57548d5c3e5.jpg)
实现了基本的效果:
![](https://www.crifan.com/files/pic/uploads/2021/03/d73a8c05491b4712ae358c4d0a1e0700.jpg)
然后把之前的 完全的全部的html,拷贝进来,看看能否显示。
只拷贝核心的 文章主题内容
此处是article部分的html
然后是可以显示出内容的:
![](https://www.crifan.com/files/pic/uploads/2021/03/fa77b2ad6e304b9899c77d1bd535b43b.jpg)
![](https://www.crifan.com/files/pic/uploads/2021/03/f19bf779e984465b90c60fcaf2a8e72f.jpg)
选中后,点击B,去加粗:
也是可以加粗的:
![](https://www.crifan.com/files/pic/uploads/2021/03/8a0db0ca9acb4f15940025e0b76bb397.jpg)
另外试了试,H2 加上 下划线,也是可以的:
![](https://www.crifan.com/files/pic/uploads/2021/03/6f3ca35085e84404a273507ba1ccafd3.jpg)
![](https://www.crifan.com/files/pic/uploads/2021/03/018e36dd77144a9c82cdfaf278a44b2c.jpg)
目前,基本上是能满足基本要求的。
图片点击了,无法调整,但是去试了试,可以加链接:
![](https://www.crifan.com/files/pic/uploads/2021/03/0296c4cbe2a742e9a5c0578e19dab8df.jpg)
![](https://www.crifan.com/files/pic/uploads/2021/03/a378ce0c8b55455db255d4ef21204bbf.jpg)
![](https://www.crifan.com/files/pic/uploads/2021/03/128e171d256043178b71fe15985d71b8.jpg)
确定后,鼠标移动上去就能显示链接了:
![](https://www.crifan.com/files/pic/uploads/2021/03/e97de2bb4a49407db47775444cec84b8.jpg)
不过暂时有点小问题:
- 引用” 无效
- 选中文字,点击引用,无效果
有待后续深入研究再说。