huidong

首页 | 会员登录 | 关于争取 2022 寒假做出汇东网 Ver3.0.0 !
搜索文章


想弄个md编辑器在网站上,找到了这个编辑器——editor.md


直达github:https://github.com/pandao/editor.md 


下载release,看了一下examples,结合网上的教程,大概是这么配置:


在项目中创建editor.php,editor.md文件夹

将下载的editor.md文件夹中的:

css

fonts

images

lib

plugins

editormd.min.js

这些,拷贝到你的项目目录中的editor.md文件夹中。

然后下载 jquery.min.js ,和editor.php放在同一目录。


在editor.php中:

<!DOCTYPE html>
<html>
    <head>
    
        <!-- editor.md 所需文件 -->
        <link rel="stylesheet" href="./editor.md/css/editormd.css" />
        <script src="jquery.min.js"></script>
        <script src="./editor.md/editormd.min.js"></script>  
        
        <link rel="stylesheet" href="./editor.md/css/editormd.css" />
        <script src="./editor.md/lib/marked.min.js"></script>
        <script src="./editor.md/lib/prettify.min.js"></script>
        <script src="./editor.md/lib/raphael.min.js"></script>
        <script src="./editor.md/lib/underscore.min.js"></script>
        <script src="./editor.md/lib/sequence-diagram.min.js"></script>
        <script src="./editor.md/lib/flowchart.min.js"></script>
        <script src="./editor.md/editormd.min.js"></script>

        
    </head>
    <body>
    
        <form method="post">
            <div id="test-editormd">
                <!-- 文本框内是 Markdown 语句 -->
                <textarea name="text" style="display:none;"> ## test </textarea>
            </div>
            <br/>
            <button name="button" value="submit">YES</button>
        </form>
        
        
        <script type="text/javascript">
            $(function() {
                var testEditor = editormd("test-editormd", {
                    width: "90%",
                    height: 300,
                    path : './editor.md/lib/',
                    
                    // 自定义工具栏
                    toolbarIcons : function() {
                        return editormd.toolbarModes['full']; // full, simple, mini
                    },
                });
            });
        </script>
        
        <hr/>
        
    </body>
</html>

   

<?php

    $button = $_POST['button'];
    if($button == "submit")
    {
        $text = $_POST['text'];
        
        echo "
            <div id='test-markdown-view'>                
                <textarea style='display:none'>{$text}</textarea>
            </div>
        ";
        
        echo "<hr/>Get data:<br/>{$text}<hr/>Data length:".strlen($text);
        
        echo '
            <script type="text/javascript">
                $(function() {
                    var testView = editormd.markdownToHTML("test-markdown-view", {
                        htmlDecode : "style,script,iframe"
                    });
                });
            </script>
        ';
    }

?>


done.


运行editor.php即可!


这个就是有一个问题:我运行的时候输入框的工具栏会乱码,一直无法解决,所以最后我没有使用这个编辑器。




返回首页


Copyright (C) 2018-2024 huidong