Editor.md构建Markdown富文本编辑器

所属分类:输入-丰富的输入

 35814  316  查看评论 (5)
分享到微信朋友圈
X
Editor.md构建Markdown富文本编辑器 ie兼容8

Editor.md

前端引用css:

<link rel="stylesheet" href="css/editormd.css" />

html文本框设置:

<div id="test-editormd">
  <textarea name="content"  style="display:none;"></textarea>                                     
</div>

前端引用js:

<script src="editormd.js"></script>

引用代码片段:

var testEditor;
    $(function() {
        $.get("examples/test.md", function(md){
            testEditor = editormd("test-editormd", {
                width: "98%",
                height: 730,
                path : 'lib/',
                markdown : md,
                codeFold : true,
                saveHTMLToTextarea : true,
                searchReplace : true,
                htmlDecode : "style,script,iframe|on*",
                emoji : true,
                taskList : true,
                tocm            : true,         // Using [TOCM]
                tex : true,                   // 开启科学公式TeX语言支持,默认关闭
                flowChart : true,             // 开启流程图支持,默认关闭
                sequenceDiagram : true,       // 开启时序/序列图支持,默认关闭,
                imageUpload : true,
                imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL : "examples/php/upload.php",
                onload : function() {
                    console.log('onload', this);
                }
            });
        });
})

读取markdown显示引入css文件:

<link rel="stylesheet" href="css/editormd.css" />

读取markdown显示html实例:

<div id="wordsView">
     <textarea style="display:none;" name="editormd-markdown-doc">这里写入md格式内容</textarea>
</div>

读取markdown显示前端js调用

<script src="lib/marked.min.js"></script>
<script src="lib/prettify.min.js"></script>
<script src="lib/raphael.min.js"></script>
<script src="lib/underscore.min.js"></script>
<script src="lib/sequence-diagram.min.js"></script>
<script src="lib/flowchart.min.js"></script>
<script src="lib/jquery.flowchart.min.js"></script>
<script src="editormd.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var wordsView;
        wordsView = editormd.markdownToHTML("wordsView", {
            htmlDecode      : "style,script,iframe",  // you can filter tags decode
            emoji           : true,
            taskList        : true,
            tex             : true,  // 默认不解析
            flowChart       : true,  // 默认不解析
            sequenceDiagram : true,  // 默认不解析
        });

    })
</script>
相关插件-丰富的输入

jQuery实现表格数据增、删、改、查

基于jQuery实现表格内数据的添加、删除、修改、查找
  丰富的输入
 26535  350

jQuery在线做试卷并查看答案

jQuery在线试卷,提交后查看答案、解析。题型包括 1单选2多选3判断4填空5问答8论述题6完型填空7阅读理解
  丰富的输入
 10004  164

仿多说留言、评论框,带微博表情。

仿多说留言、评论框,带微博表情。
  丰富的输入
 48932  560

jQuery H5电子签名

H5电子签名demo,支持移动端
  丰富的输入
 36785  368

讨论这个项目(5)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Koala 0
    2018/12/6 17:41:11
    移动端可以用么 回复
    fettttt 0
    2018/11/1 11:14:45
    可以上传图片吗 回复
    bobo250ml 0
    2018/5/30 10:24:15
    . 0
    2017/12/6 10:02:57
    *上邪!!! 0
    2017/11/10 14:57:08

    要的就是他, 先赞了再说!!!

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复