cherry-markdown icon indicating copy to clipboard operation
cherry-markdown copied to clipboard

[Bug report]使用cherryInstance.engine.makeHtml(context)直接渲染页面的时候复制按钮无法点击

Open wapco opened this issue 2 years ago • 4 comments

Describe the bug 当使用cherryInstance.engine.makeHtml(context)来生成html并渲染到页面的时候,如果有代码块,点击复制代码按钮无法触发复制操作。

这个需求是不需要有markdown编辑框,仅仅用来显示数据库中存的多个markdown代码片段。所以只用了engine.makeHtml

wapco avatar Jul 04 '23 02:07 wapco

实例化cherryInstance还是会带有很多编辑器逻辑,可以按照文档直接引入解析引擎

import CherryEngine from 'cherry-markdown/dist/cherry-markdown.engine.core';
const cherryEngineInstance = new CherryEngine({}); // 配置同cherryInstance
const htmlContent = cherryEngineInstance.makeHtml('# welcome to cherry editor!');

jiawei686 avatar Jul 04 '23 06:07 jiawei686

实例化的时候没问题,只是通过makeHtml渲染出来的html里面复制按钮的事件丢失了导致没有触发到复制的功能。

/**
 * 渲染Markdown为html
 * @param context
 */
export function renderMarkdownToHtml(context) {
    if (cherryInstance == null) {
        cherryInstance = new Cherry({
            editor: {
                defaultModel: 'previewOnly',
            },
            callback: {
                onCopyCode: function (e, code) {
                    console.log('这个事件不会被调用到')
                }
            }
        });
    }
    let html =  cherryInstance.engine.makeHtml(context) ;
   // 将html追加到dom中逻辑
}

wapco avatar Jul 04 '23 06:07 wapco

额,复制代码块是cherry的预览区域提供的功能,只用cherry.engine是没办法获得预览区域能力的,可以考虑使用cherry的纯预览模式

sunsonliu avatar Jul 04 '23 06:07 sunsonliu

这个没办法支持这个事件吗?有时候不方便用预览功能,比如聊天列表,需要渲染几十条聊天记录,直接返回html再用mvvm更新每个对话,会方便一些。

wapco avatar Jul 04 '23 10:07 wapco