THINKPHP框架中引入Markdown编辑器和解决Github emoji图标无法显示

本文链接：https://blog.youkuaiyun.com/xxxPHP_er/article/details/131088132

文章介绍了如何在ThinkPHP框架中引入和使用Markdown编辑器Editor.md，包括编辑器的配置、前端Markdown内容展示，以及解决GitHubemoji图标无法显示的问题。用户需要下载Editor.md编辑器，设置CSS、HTML和JS引用，配置编辑器选项，同时提供图片上传接口。对于GitHubemoji不显示的修复，需要将表情包下载到本地并修改编辑器的配置路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

THINKPHP框架中引入Markdown编辑器的实例和注意事项，以及前端展示Markdown格式内容、Github emoji图标无法显示的问题。

下载地址

Markdown编辑器下载地址以及演示:Editor.md - 开源在线 Markdown 编辑器

代码实现

<!-- css -->
<link rel="stylesheet" href="editormd/css/editormd.css" />

<!-- html -->
<div class="layui-input-block" id="test-editor">
<textarea hidden name="content" class="layui-textarea"></textarea>
</div>

<!-- js -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="editor.md/editormd.js"></script>
<script type="text/javascript">
    var editor = editormd("test-editor", {
        width  : "91%",
        height : 520,
        path   : "editormd/lib/",//资源地址
        theme : "dark",//工具栏主题
        previewTheme : "dark",//预览主题
        editorTheme : "pastel-on-dark",//编辑主题
        // markdown : md,
        codeFold : true,
        //syncScrolling : false,
        saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
        searchReplace : true,
        //watch : false,                // 关闭实时预览
        htmlDecode : "style,script,iframe|on*",      // 开启 HTML 标签解析，为了安全性，默认不开启
        //toolbar  : false,             //关闭工具栏
        //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
        emoji : true,//开启表情
        taskList : true,
        tocm            : true,         // Using [TOCM]
        tex : true,                   // 开启科学公式TeX语言支持，默认关闭
        flowChart : true,             // 开启流程图支持，默认关闭
        sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
        //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
        //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
        //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
        //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
        //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
        imageUpload : true,//开启图片上传
        imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],//图片类型
        imageUploadURL : "{:url('api/uploadImg')}",//上传接口
        onload : function(d) {
            /*上传图片成功后可以做一些自己的处理*/
        }
    });
</script>

图片上传接口返回数据类型

{'success'=>'状态','url'=>'图片地址，成功时返回','message'=>'消息'}

默认是保存Markdown格式内容，若要保存html格式内容需开起saveHTMLToTextarea，然后通过editor.getHTML()获取html内容。

效果展示

页面展示

1.展示Markdown格式内容

<!-- 资源引入 -->
<link rel="stylesheet" href="editormd/css/editormd.css" />
<script src="editormd/lib/marked.min.js"></script>
<script src="editormd/lib/prettify.min.js"></script>
<script src="editormd/editormd.js"></script>
<!-- html -->
<div class="content" id="content">
    <textarea  style="display:none;">{$content}</textarea>
</div>
<!-- js -->
<script>
$(function () {
    testEditor = editormd.markdownToHTML("content", {//注意：这里是上面div的id
        htmlDecode: "style,script,iframe",
        emoji: true,
        taskList: true,
        tocm: true,
        tex: true, // 默认不解析
        flowChart: true, // 默认不解析
        sequenceDiagram: true, // 默认不解析
        codeFold: true
    });
});
</script>

2.展示HTML格式内容

<!-- 资源引入 -->
<link rel="stylesheet" href="editormd/css/editormd.css" />
<script src="editormd/lib/marked.min.js"></script>
<script src="editormd/lib/prettify.min.js"></script>
<script src="editormd/editormd.js"></script>
<!-- html -->
<div class="content" id="content" >{$content}</div>
<!-- js -->
<script>
    $(function () {
        editormd.markdownToHTML("content");
    })
</script>