该文章创建(更新)于08/17/2019，请注意文章的时效性！

缘由

最近写了一个PHP留言本，但对后台的编辑框一直不满意，就想到了怎么添加Markdown编辑器，经过两天的探索，终于搞出来了。

项目demo

使用说明

难点

• 把markdown完美的添加到网站中
• 获取编辑后的html代码，并存入数据库

解决办法

• 获取markdown支持文件-我选择的是 Editor.md
• 把文件解压放到和网站的根目录
• 添加一下代码到需要的php文件中，注意按自己的实际文件位置来修改地址

<!--markdwwn需要-->
<link rel="stylesheet" href="js/editor.md-master/css/editormd.css" />

<div align="center">
<!--我是把数据传输到edit.php，然后存入数据库中（获取的是第二个textare的值，即我们需要的html语言）-->
    <form action="edit.php" method="POST">
        <table border="1" width="95%">

            <tr>
                <div id="test-editor">
                    <textarea style="display:none;" name="mark">### 关于 Editor.md
**Editor.md** 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。</textarea>
<!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 -->

                    <textarea class="editormd-html-textarea" name="post"></textarea>
                </div>
            </tr>

            <tr>
                <input type="submit" value="提交" style="font-size:32px;">
            </tr>

        </table>
    </form>
</div>

<script type="text/javascript">
    $(function() {
        var editor = editormd("test-editor", {
             width  : "95%",
                 height : 350,
         path   : "js/editor.md-master/lib/",
         saveHTMLToTextarea : true  //该选项必须开启才能获取到html语言
        });
    });
</script>

<!--markdwwn需要-->
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="js/editor.md-master//editormd.min.js"></script>

其它

• 让wordpress支持markdown

最后

希望大家多多支持和关注我的项目!

要不赞赏一下?

微信

支付宝

PayPal

Bitcoin