php添加Markdown输入法,并传输对应html到数据库中

缘由

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

项目demo

使用说明

难点

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

解决办法

  • 获取markdown支持文件-我选择的是 Editor.mdeditormd-logo-64x64-1
  • 把文件解压放到和网站的根目录
  • 添加一下代码到需要的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>

其它

最后

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


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *