markdown编辑器的简单使用显示正常的内容

原创

lijingshan34 2023-03-02 08:48:02 博主文章分类：php ©著作权

文章标签 编辑器 markdown html css ico 文章分类 HarmonyOS 后端开发

©著作权归作者所有：来自51CTO博客作者lijingshan34的原创作品，请联系作者获取转载授权，否则将追究法律责任

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8" />
    <title>Simple example - Editor.md examples</title>
    <link rel="stylesheet" href="./md/examples/css/style.css" />
    <link rel="stylesheet" href="md/css/editormd.css" />
    <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="layout">
    <header>
        <h1>Simple example</h1>
    </header>
    <form action="do.php" method="post">
        <div id="test-editormd">
                <textarea style="display:none;">[TOC]

#### Disabled options

- TeX (Based on KaTeX);
- Emoji;
- Task lists;
- HTML tags decode;
- Flowchart and Sequence Diagram;

#### Editor.md directory

    editor.md/
            lib/
            css/
            scss/
            tests/
            fonts/
            images/
            plugins/
            examples/
            languages/
            editormd.js
            ...

```html
<!-- English -->
<script src="../dist/js/languages/en.js"></script>

<!-- 繁體中文 -->
<script src="../dist/js/languages/zh-tw.js"></script>




<div class="se-preview-section-delimiter"></div>

var testEditor; $(function() { testEditor = editormd("test-editormd", { width : "90%", height : 640, syncScrolling : "single", path : "md/lib/" }); /* // or testEditor = editormd({ id : "test-editormd", width : "90%", height : 640, path : "../lib/" }); */ });

“`

</textarea>
        </div>
        <input type="submit"/>
    </form>

</div>
<script src="./md/examples/js/jquery.min.js"></script>
<script src="./md/editormd.min.js"></script>
<script type="text/javascript">
    var testEditor;

    $(function() {
        testEditor = editormd("test-editormd", {
            width   : "90%",
            height  : 640,
            syncScrolling : "single",
            path    : "md/lib/"
        });

        /*
         // or
         testEditor = editormd({
         id      : "test-editormd",
         width   : "90%",
         height  : 640,
         path    : "../lib/"
         });
         */
    });
</script>
</body>
</html>

<?php
session_start();
header("Content-Type:text/html; charset=utf-8");
header("Access-Control-Allow-Origin: *");

$_SESSION['code'] = htmlspecialchars($_POST["test-editormd-markdown-doc"]);

?>

<?php
/**
 * Created by PhpStorm.
 * User: 27394
 * Date: 2017/3/23
 * Time: 13:25
 */
session_start();
//echo $_SESSION['code'];
?>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8" />
    <title>HTML Preview(markdown to html) - Editor.md examples</title>
    <link rel="stylesheet" href="md/examples/css/style.css" />
    <link rel="stylesheet" href="md/css/editormd.preview.css" />
    <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
    <style>
        .editormd-html-preview {
            width: 90%;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="layout">
    <div id="test-editormd-view2">
        <textarea id="append-test" style="display:none;"><?php echo $_SESSION['code'];?></textarea>
    </div>
</div>
<!-- <script src="js/zepto.min.js"></script>
<script>
    var jQuery = Zepto;  // 为了避免修改flowChart.js和sequence-diagram.js的源码，所以使用Zepto.js时想支持flowChart/sequenceDiagram就得加上这一句
</script> -->
<script src="md/examples/js/jquery.min.js"></script>
<script src="md/lib/marked.min.js"></script>
<script src="md/lib/prettify.min.js"></script>

<script src="md/lib/raphael.min.js"></script>
<script src="md/lib/underscore.min.js"></script>
<script src="md/lib/sequence-diagram.min.js"></script>
<script src="md/lib/flowchart.min.js"></script>
<script src="md/lib/jquery.flowchart.min.js"></script>

<script src="md/editormd.js"></script>
<script type="text/javascript">
    $(function() {
        var testEditormdView2;
        testEditormdView2 = editormd.markdownToHTML("test-editormd-view2", {
            htmlDecode      : "style,script,iframe",  // you can filter tags decode
            emoji           : true,
            taskList        : true,
            tex             : true,  // 默认不解析
            flowChart       : true,  // 默认不解析
            sequenceDiagram : true,  // 默认不解析
        });
    });
</script>
</body>
</html>