thinkphp 使用markdown编辑器

最新推荐文章于 2023-06-07 15:26:42 发布

梦到韩大厨

最新推荐文章于 2023-06-07 15:26:42 发布

阅读量760

点赞数

分类专栏： layui THINKPHP markdown 文章标签：编辑器前端 vue.js

本文链接：https://blog.csdn.net/x007008009/article/details/121861953

版权

THINKPHP 同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

layui

12 篇文章 0 订阅

订阅专栏

markdown

1 篇文章 0 订阅

订阅专栏

官方的地址自己去下载

在这里插入图片描述
放到项目中之后然后引入jq css js


<html>
<head>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" href="/node_modules/editor/css/editormd.css" />
    <script src="/node_modules/editor/editormd.min.js"></script>
</head>

<body>
    <button id="look">查看源码</button>
    <div id="test-editormd">
        <textarea></textarea>
    </div>

     <!--在该div中展示,如有初始化的数据可以放在textarea中-->
     <div id="testEditorMdview">
        <textarea id="appendTest" style="display:none;"></textarea>
    </div>


</body>
<script>
    var testEditor;
    testEditor = editormd("test-editormd", {
        placeholder: '本编辑器支持Markdown编辑，左边编写，右边预览',  //默认显示的文字，这里就不解释了
        width: "60%",
        height: 800,
        syncScrolling: "single",
        path: "/node_modules/editor/lib/",   //你的path路径（原资源文件中lib包在我们项目中所放的位置）
        theme: "white",//工具栏主题
        previewTheme: "white",//预览主题
        editorTheme: "pastel-on-white",//编辑主题
        imageUpload: true,
        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
        imageUploadURL: "{:url('Knowledge/uploadImg')}",//上传图片使用方法
        saveHTMLToTextarea: true,
        emoji: true,
        taskList: true,
        tocm: true,         // Using [TOCM]
        tex: true,                   // 开启科学公式TeX语言支持，默认关闭
        flowChart: true,             // 开启流程图支持，默认关闭
        sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
        toolbarIcons: function () {  //自定义工具栏，后面有详细介绍
            return editormd.toolbarModes['full']; // full, simple, mini
        },
    });
    // testEditor.getMarkdown();
    // 在js中调用getMarkdown这个方法可以获得Markdown格式的文本。


	//点击展示按钮
    $("#look").click(function () {
    	//存储在数据库中即可
        var s = testEditor.getMarkdown();
  
		
		//存储之后如何展示
        $("#appendTest").val(s);

        var testEditormdView2 = editormd.markdownToHTML("testEditorMdview", {
            htmlDecode: "style,script,iframe",  // you can filter tags decode
            emoji: true,
            taskList: true,
            tex: true,  // 默认不解析
            flowChart: true,  // 默认不解析
            sequenceDiagram: true,  // 默认不解析
        });


    })
</script>

</html>
下边就是展示的效果

在这里插入图片描述

梦到韩大厨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
thinkphp 使用markdown编辑器

官方的地址自己去下载放到项目中之后然后引入jq css js<html><head> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <link rel="stylesheet" href="/node_modules/editor/css/editormd.css" /> <script src="/node_mod
复制链接

扫一扫