cherry-markdown
cherry-markdown copied to clipboard
加载动画替换的问题
var customMenuA = Cherry.createMenuHook('Remote ', {
iconName: 'remote',
onClick: function(selection) {
// 加载动画
const { begin, end } = this.$getSelectionRange();
const loaderElement = document.createElement("span");
loaderElement.className = "spinner-border spinner-border-sm";
const marker = this.editor.$cherry.getCodeMirror().markText(begin, end, {
replacedWith: loaderElement.cloneNode(true),
});
return '';
}
});
这个span顺利加进去了, 在codemirror中显示也没问题 但是在cherry中,只要执行完毕,动画就消失了,marker还存在
可以通过增加这行代码(
this.updateMarkdown = false;
)让cherry跳过点击按钮后的后续操作,欢迎尝试~
谢谢,但是没有达到效果 Codemirror的其他操作没发现问题, 但是mark没有生效
刚试了下是没问题的(见上面动图,图片比较大,可能要稍微多等一会),我在/examples/scripts/index-demo.js
里加入了下面的代码:
var customMenuA = Cherry.createMenuHook('Remote ', {
iconName: 'remote',
onClick: function(selection) {
// 加载动画
const { begin, end } = this.$getSelectionRange();
const loaderElement = document.createElement("span");
loaderElement.className = "spinner-border spinner-border-sm";
loaderElement.textContent = selection;
const marker = this.editor.$cherry.getCodeMirror().markText(begin, end, {
replacedWith: loaderElement.cloneNode(true),
});
this.updateMarkdown = false;
return '';
}
});
刚试了下是没问题的(见上面动图,图片比较大,可能要稍微多等一会),我在
/examples/scripts/index-demo.js
里加入了下面的代码:var customMenuA = Cherry.createMenuHook('Remote ', { iconName: 'remote', onClick: function(selection) { // 加载动画 const { begin, end } = this.$getSelectionRange(); const loaderElement = document.createElement("span"); loaderElement.className = "spinner-border spinner-border-sm"; loaderElement.textContent = selection; const marker = this.editor.$cherry.getCodeMirror().markText(begin, end, { replacedWith: loaderElement.cloneNode(true), }); this.updateMarkdown = false; return ''; } });
可以得到预期效果,谢谢
@sunsonliu 可以考虑把 suggester-panel 用codemirror的widget来装载
这样不用折腾层级关系, 在定高的环境下,suggester-panel的用户体验就很差啦
@sunsonliu 可以考虑把 suggester-panel 用codemirror的widget来装载 这样不用折腾层级关系, 在定高的环境下,suggester-panel的用户体验就很差啦
收到,之前没有了解过codemirror的widget,我们研究下,如果你有兴趣也欢迎给我们提pr哈~
@sunsonliu 有没有快捷安全的方式增加分屏, 看了previewer的代码,还挺复杂, 我的场景是, 把TOC新开一个分屏来显示,再做一些扩展 我现在的实现是,简单粗暴的,新增一个div, 但是有一些兼容问题,需要改挺多地方的, 需要处理previewer的预览开关, 需要处理宽度调整 😭
<div class="cherry-previewer cherry-markdown theme__default" style="width: 30%;">TOC</div>
是要做侧边栏目录展示吧,这个建议利用cherry.getToc()
获取目录信息,然后在cherry外部自定义一个侧滑目录出来
已实现右侧悬浮目录,可在https://tencent.github.io/cherry-markdown/examples/index.html 这里体验哈