实现Editor.md编辑器写文章,并在前台显示

简介:
开源在线 Markdown 编辑器,推荐使用。
官网:https://pandao.github.io/editor.md/

下载安装

https://github.com/pandao/editor.md/archive/master.zip
下载解压下来的文件夹是:editor.md-master

截取的一部分

1.examples文件中是使用PHP做的所有示例(可以在文档编辑器里打开,并查看源代码);
2.lib文件夹中是editor.md所依赖的第三方js资源;
3.plugins文件夹中是如emoji表情支持、代码格式化等插件;

在html页面嵌入编辑器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!--需要引入的css文件-->
        <link rel="stylesheet" href="editor.md-master/css/editormd.min.css" />
    </head>
    <body>
        <!--模拟表单传输数据到后台-->
        <form action="./add.php" method="post" enctype="multipart/form-data" accept-charset="UTF-8">        
        <div id="my-editormd">
            <!--Editor.md可以自动附加<textarea>标签-->
            <textarea id="my-editormd-markdown-doc" name="my-editormd-markdown-doc" style="display:none;"></textarea>
                                        <!-- 注意:name属性的值-->
<!--textarea中name属性值,应该跟着div的ID"my-editormd"值来定,即(div的id值+)-markdown-doc-->
/***********editormd还会创建一个name=(div的id值+html-code)的textarea见下**********/
        </div>
        <input type="submit" value="  Send the artcile !" />
        </from>
        <!--需要引入的js文件和js配置-->
        <script src="editor.md-master/examples/js/jquery.min.js"></script>
        <script src="editor.md-master/editormd.min.js"></script>
        <script type="text/javascript">
            $(function() {
                var editor = editormd("my-editormd", {//上面div的id值
                    width: "90%",
                    height: 540,
                    theme : "dark", //主题
                    path: "editor.md-master/lib/" // 这里我的html文件和editor.md-master文件位置如下图
                    saveHTMLToTextarea : true//这个配置,方便post提交html源码表单,保存 HTML 到 Textarea它关乎后端是否可以获取到值
                });
            });
            //更多的editormd配置请参考下面或官网
        </script>
    </body>
</html>

另外一个textarea

需要html格式的文本可以从这获取,name都告诉你了,该知道怎么办吧

另外一个textarea

html文件和editor.md-master文件位置
位置
更多editormd配置
width: "90%",
height: 740,
path : '../lib/',
theme : "dark", //主题
previewTheme : "dark",
editorTheme : "pastel-on-dark",
markdown : md,
codeFold : true,
//syncScrolling : false,
saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
searchReplace : true,
//watch : false,                // 关闭实时预览
htmlDecode : "style,script,iframe|on*",            // 开启 HTML 标签解析,为了安全性,默认不开启    
//toolbar  : false,             //关闭工具栏
//previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮,默认开启
emoji : true,
taskList : true,
tocm            : true,         // Using [TOCM]
tex : true,                   // 开启科学公式TeX语言支持,默认关闭
flowChart : true,             // 开启流程图支持,默认关闭
sequenceDiagram : true,       // 开启时序/序列图支持,默认关闭,
//dialogLockScreen : false,   // 设置弹出层对话框不锁屏,全局通用,默认为true
//dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层,全局通用,默认为true
//dialogDraggable : false,    // 设置弹出层对话框不可拖动,全局通用,默认为true
//dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度,全局通用,默认值为0.1
//dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色,全局通用,默认为#fff
 /**上传图片相关配置如下*/
imageUpload : true,//开启上传图片吗?
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],//图片支持的格式
imageUploadURL : "editor.md-master/examples/php/upload.php", //处理图片上传的url
                    //上面这个地址是官网给定了一个处理上传图片的php的demo 当然后端的代码得自己写
onload : function() {
    console.log('onload', this);
    //this.fullscreen();
    //this.unwatch();
    //this.watch().fullscreen();

    //this.setMarkdown("#PHP");
    //this.width("100%");
    //this.height(480);
    //this.resize("100%", 640);
}

关于图片上传

首先后端自己写,还有官网给的php-demo我没成功啊。。难道我。漏了点什么。。有没有大佬实现成功的

//editor.md期望得到一个json格式的上传后的返回值,格式是这样的:
/*
{
    success : 0 | 1,           // 0 表示上传失败,1 表示上传成功
    message : "提示的信息,上传成功或上传失败及错误信息等。",
    url     : "图片地址"        // 上传成功时才返回
}
//返回的参数success的值不是字符串“0”和“1”,而是数字0和1,后台返回的时候一定要注意
*/

前台显示

展示内容有两种方式

  • 一种方式是直接展示html格式的内容
  • 第二种方式是页面加载markdown格式内容,然后通过editor.md再次渲染成html格式。

1.直接展示html

<link rel="stylesheet" href="editor.md-master/css/editormd.min.css" />
<div id="my-content">
    ${content}      <!--${content/}为获取后台的html格式内容。-->
</div>
<script src="editor.md-master/examples/js/jquery.min.js"></script>
<script src="editor.md-master/editormd.min.js"></script>
<script src="editor.md-master/lib/marked.min.js"></script>
<script src="editor.md-master/lib/prettify.min.js"></script>
<script type="text/javascript">
    $(function () {
        editormd.markdownToHTML("my-content");
    })
</script>

2.如果第二种:
首先引入必要JS(下面不是所有必要,官网说依赖这么多):

<script src="editor.md-master/examples/js/jquery-min.js"></script>
<script src="editor.md-master/lib/flowchart.min.js"></script>
<script src="editor.md-master/lib/jquery.flowchart.min.js"></script>
<script src="editor.md-master/lib/marked.min.js"></script>
<script src="editor.md-master/lib/prettify.min.js"></script>
<script src="editor.md-master/lib/raphael.min.js"></script>
<script src="editor.md-master/lib/sequence-diagram.min.js"></script>
<script src="editor.md-master/lib/underscore.min.js"></script>
<script src="editor.md-master/editormd.min.js"></script>

然后,本页面中,加入如下DIV以及css

<link rel="stylesheet" href="editor.md-master/css/editormd.min.css"/>
<div id="doc-content">
<textarea style="display:none;">
  ${content}        <!--${content/}为获取后台的md格式内容。-->
</textarea>
</div>

再加上如下js

<script type="text/javascript">
    var testEditor;
    $(function () {
        testEditor = editormd.markdownToHTML("doc-content", {//注意:这里是上面DIV的id
            htmlDecode: "style,script,iframe",
            emoji: true,
            taskList: true,
            tex: true, // 默认不解析
            flowChart: true, // 默认不解析
            sequenceDiagram: true, // 默认不解析
            codeFold: true,
    });});
 </script>

效果预览


模拟拿数据

模拟显示md格式的文本

最后重点:你嫌上面俩种方法都麻烦?

肯定有第三方帮助我门做啊。。
上代码你就懂了:

1.老外的工具:strapdown.js 官网http://strapdownjs.com/

<!DOCTYPE html>
<html>
<head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .navbar-fixed-top{
                display: none;
            }
        </style>
</head>
<body>
<xmp theme="readable" style="display:none;">
##hello world 

**写点东西做测试**

| 表格  |支持   |
| ------------ | ------------ |
|   吗|呀   |
</xmp>
</body>
<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>
</html>

国外的请下载下来然后改样式路径

它的gitHub:https://github.com/arturadib/strapdown

2.showdown.min.js
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body onload="convert()">
<div>
    <textarea id="content" style="display:none;" >
##hello world 

**写点东西做测试**

- 123

*斜体*
    </textarea>
    <div id="result">
</div>
<script src="https://cdn.bootcss.com/showdown/1.3.0/showdown.min.js"></script> 
<script>  
    function convert(){
        //获取要转换的文字
        var text = document.getElementById("content").value;
        //创建实例
        var converter = new showdown.Converter();
        //进行转换
        var html = converter.makeHtml(text);
        //展示到对应的地方  result便是id名称
     document.getElementById("result").innerHTML = html;
    }
</script>
    </body>
</html>

怎么不支持表格啊!!!!

推荐阅读更多精彩内容

  • # Python 资源大全中文版 我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列...
    小迈克阅读 1,907评论 1 3
  • 1-------- 走进前端 2-------- jQuery 3-------- CSS 4-------- A...
    依依玖玥阅读 1,688评论 0 34
  • 大年初一。 家里人都出去旅游赏景了,我在家。收拾干净家里,决定上街看看热闹。 街上的确很热闹,各种玩的,各种吃的,...
    二胖爱穿小裙子阅读 35评论 0 1
  • 已是来到韩国的第三个白天,依旧未能见到首尔的朝阳,出门已是午饭时间。 我们的早午餐来到了中央大附近最多人排队等候的...
    嶙浔阅读 73评论 0 1
  • 三八妇女节,这是个特殊的日子,现在已经有人开始叫它“女人节”或者“女王节”。 但其实在这特殊的日子里,很多妇女依然...
    生命密码君阅读 132评论 0 1