master

分支 (1)

管理

管理

master

easymde
/
index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>SimpleMarkDownEditor-Demo</title>
    <link rel="stylesheet" href="easymde/easymde.min.css">
    <style>
        .CodeMirror {height: 500px;/*SimpleMDE的高度*/}
    </style>
</head>
<body>

<section class="main-content">
    <textarea id="detail"></textarea>
</section>

<script src="easymde/easymde.min.js"></script>
<script>
    //初始化SimpleMDE
    var easymde = new easymde(
        {
                element: document.getElementById("detail"), //文本域ID
                autosave: {
                    enabled: true, //开启自动保存
                    uniqueId: "MyUniqueID", //唯一ID值，通过唯一ID值进行保存编写记录
                    delay: 1000 //多少毫秒保存一次
                },
                promptURLs: true, // 如果设置为true，则会显示一个JS警报窗口，要求提供链接或图像URL。默认为false。
                renderingConfig: {
                    codeSyntaxHighlighting: true //开启代码高亮
                },
                placeholder: "|",
                //status: ["autosave", "lines", "words","cursor"], //设置为false 则禁用状态栏 默认为true 开启所有
                toolbar: [ //所有工具栏
                    "bold", //黑体
                    "italic", //斜体
                    "strikethrough", //删除线
                    "heading", //标题
                    "heading-smaller", //缩小标题
                    "heading-bigger", // 增大标题
                    "heading-1", //小标题
                    "heading-2", //中标题
                    "heading-3", //大标题
                    "|", //分割线
                    "code", // 代码块
                    "quote", //引用
                    "unordered-list", // 无序列表
                    "ordered-list", // 有序列表
                    "clean-block", // 清除块样式
                    "|", //分割线
                    "link", //添加超链接
                    "image", //添加图片
                    "table", //添加表格
                    "horizontal-rule", // 水平线
                    "|",
                    "preview", //全屏预览
                    "side-by-side", //分屏预览
                    "fullscreen", //全屏
                    "|", //分割线
                    "undo", //清空
                    "redo", // 重做
                    "guide" // 说明
                ]
            }
    );
</script>
</body>
</html>