萤途个人博客

[[ slide_text ]]

[[ item.c ]]

Editor-md使用

发布时间: 2026-01-21 作者: wshsm 来源: yt

# Editor-md使用

开源网址

```
https://pandao.github.io/editor.md/
```

## TeX公式渲染

如果不配置的话默认是无法进行渲染的，就像下面这样

![TeX公式不渲染的问题](image.png)

### 文章编写和展示页面配置

配置文章编写页面，首先下载Tex公式渲染需要的程序，建议用最新的网址，不要下载版本太低的，如果版本太低可能会不支持中文

cdn网址：

```0.16.9
https://cdn.bootcdn.net/ajax/libs/KaTeX/0.16.9/katex.min.js
https://cdn.bootcdn.net/ajax/libs/KaTeX/0.16.9/katex.min.css
```

由于cdn引用加载比较慢，建议保存到本地路径 `/static/editor.md-master/lib/KaTeX/0.16.9/` 下

js代码配置，启用tex，并引入刚刚下载的本地文件

```javascript
<script type="text/javascript">
    $(function() {
        var editor = editormd("editor", {
            /*** 其他配置 ***/
            tex : true,
        });

editormd.katexURL = {
            js  : "/static/editor.md-master/lib/KaTeX/0.16.9/katex.min",  // 注意：不需要写 .js 后缀
            css : "/static/editor.md-master/lib/KaTeX/0.16.9/katex.min"   // 注意：不需要写 .css 后缀
        };
    });

</script>
```

## 代码一键复制

![标签结构](/media/uploads/articles_image/202601/20260124_234941_屏幕截图_2026-01-24_234907.png "标签结构")

基本思想，给每个 pre 创建一个i标签，并创建一个点击事件，点击事件找到父亲并从父亲下的所有的 code 里面获取内容，最终添加到剪切板，遍历 `pre` 代码实现:

```
code_copy(){
    $('pre').each(function (){
        // 使用elementplus的图标库
        let iconSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" ><path fill="currentColor" d="巴拉巴拉巴拉巴拉..."></path></svg>'
        let copy_btn = $('<i title="copy" class="code_copy">' + iconSvg + '</i>');
        $(this).append(copy_btn)

// 给刚才创建的按钮绑定点击事件
        copy_btn.on('click', function() {
            // 克隆一份当前的 pre 标签
            let clone = $(this).parent().clone();
            
            // 在克隆体中删掉“复制按钮”自己，防止把按钮的乱码也复制进去
            clone.find('.code_copy').remove();
            
            let codeText = '';

let $dom = clone.find('code');
            $dom.each(function() {
                // 遍历每一行，获取文本并手动加上换行符
                codeText += $(this).text().trimEnd() + '\n';
            });

// 创建一个临时的 textarea 元素
            let textarea = $('<textarea>' + codeText + '</textarea>')
            
            // 挂载 -> 选中 -> 执行命令 -> 移除
            $('body').append(textarea)
            textarea[0].select()
            document.execCommand('Copy')
            textarea.remove()

ElementPlus.ElMessage.success('复制成功！');
        });
    })
}
```

你觉得文章怎么样

wshsm

嗯

2026年1月21日 22:36
点赞 (0) 回复 (0)