Dev:所见即所得开发 #490
Dev:所见即所得开发 #490
Conversation
feat 在cherry.js中实现了preview所见即所得框架.附加修正各个js,使其能够支持contenteditable
| )}</a>${suffix}`; | ||
| return `${prefix}<a href="${encodeURIOnce( | ||
| `${$protocol}${address}`, | ||
| )}" rel="nofollow" contenteditable="false">${$e(address)}</a>${suffix}`; |
There was a problem hiding this comment.
不太希望在输出的HTML里增加contenteditable属性，有种业务场景是markdown编辑器输出的html内容是富文本编辑器的输入（见下图），如果增加了contenteditable=false属性就会导致这种业务场景需要修改（会遭到业务方抵制）。。建议这个属性在previewer侧通过hover事件动态添加
| }</a>${closeTag ? '</li>' : ''}`; | ||
| return `<li class="${this.tocNodeClass}">${nodePrefix}<a href="${tocLink}" class="level-${ | ||
| node.level | ||
| }" contenteditable="false">${node.text}</a>${closeTag ? '</li>' : ''}`; |
There was a problem hiding this comment.
toc是目录语法，对应markdown原文是[toc] 这个是没办法进行编辑的哈（也就是不论预览区域怎么改，对应的markdown原文只能是[toc]）
There was a problem hiding this comment.
这里的含义应该和之前的link一致,只是对于链接进行非editable的处理,否则在preview区将无法跳转而自动定义为修改内容
| function replaceNthOccurrence(md, oldValue, newValue, occurrencePosition) { | ||
| let index = -1; | ||
| for (let i = 0; i <= occurrencePosition; i++) { | ||
| index = md.indexOf(oldValue, index + 1); |
There was a problem hiding this comment.
这里有点小问题，预览区域里的textContent可能和md里的不一样（如下图），这时候可能会导致预览区域的编辑不生效。
另外我们实现了一部分所见即所得的编辑能力，全都放在了PreviewerBubble.js里，可以参考这里的实现哈
There was a problem hiding this comment.
有参考部分实现.
一个合理的解决方法是利用engine的
$md = this.$beforeMakeHtml(md);
$md = this.$dealParagraph($md);
$md = this.$afterMakeHtml($md);
做类似的前后处理.之前因为发现markdown语法的**,都具有模块分级,认为此处有对a,b的划分.
这些应该是html格式的预处理了
|
完整版的所见即所得，强烈希望快点上线 |
收到，不过保守估计完整版的所见即所得编辑还需要比较多的工作量，短期内来看预览区域的所见即所得编辑还不能像富文本编辑器那样。。。 |
本次pr修正了hooksconfig以及preview中的两个bug,详见commit
并且在cherry.js中初步实现简单的所见即所得
主要流程:
1.为previewer提供contenteditable,并且禁用所有链接的contenteditable防止修改
2.通过mutation来对于preview模块下的html标签下的可修改content进行监控
当内容发生修改时,利用oldvalue与walkdom的历遍,匹配在html树中出现的位置,即第index次出现oldvalue
3.通过对于md源码修正,修改第index处的oldvalue为newvalue,完成基本所见即所得
TODO:
1.现在长文件下,修改preview区偶尔会产生错乱位移,重定位到开头,对应源码尚未查看,暂未修
2.增加新行或者在空行中增加新内容的功能尚未实现,与实现时原理有关,waiting for add