集成editormd支持markdown语法(一)之基本使用

集成editormd支持markdown语法(一)之基本使用集成后的效果如图其中对黑色主题的样式进行了修改一、下载源码下载地址https://github.com/pandao/editor.md官方地址http://pandao.github.io/editor.md/二、导入到webapp目录下将其中的css、js、lib等文件进行整理放到editormd文件下,然后将editormd文件夹放在webapp目…

集成后的效果如图

enter image description here

其中对黑色主题的样式进行了修改

一、下载源码

下载地址

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

官方地址

http://pandao.github.io/editor.md/

二、导入到webapp目录下

将其中的css、js、lib等文件进行整理放到editormd文件下,然后将editormd文件夹放在webapp目录下,如图

enter image description here

其中我将editormd.js移到了lib目录下

三、editormd的使用 – 显示编辑器

在需要显示编辑器的jsp或html页面内引入css和js文件

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

<script src="/editormd/examples/js/jquery.min.js"></script>
<script src="/editormd/editormd.js"></script>

然后添加div标签,显示编辑器,其中第一个textarea是md格式的,第二个是html格式的

    <div class=" editormd"  id="test-editormd">
        <textarea class="editormd-markdown-textarea" name="test-editormd-markdown-doc">      
         </textarea>
        <!-- 第二个隐藏文本域,用来构造生成的HTML代码,方便表单POST提交,这里的name可以任意取,后    
            台接受时以这个name键为准 -->
        <textarea class="editormd-html-textarea" name="editorhtml" id="editorhtml">
        </textarea>
    </div>

最后调用js语法打开编辑器:

 var testEditor;

$(function() {
    testEditor = editormd("test-editormd", {
        placeholder : "请输入要发布的内容...",//这里不设置则为默认的
        width   : "90%",
        height  : 640,
        syncScrolling : "single",
        path    : "/editormd/lib/",//lib路径
        imageUpload : true,
        imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
        imageUploadURL : "/fileUpload",//图片上传请求Url
        saveHTMLToTextarea : true,//保存html到textarea
        emoji: true,
        taskList: true,
        tocm: true,         // Using [TOCM]
        tex: true,                   // 开启科学公式TeX语言支持,默认关闭
        flowChart: true,             // 开启流程图支持,默认关闭
        sequenceDiagram: true,// 开启时序/序列图支持,默认关闭  
        //下面这一行将使用dark主题
        previewTheme : "dark"

        //editor.md期望得到一个json格式的上传后的返回值,格式是这样的:
        /*
         {
         success : 0 | 1,           // 0 表示上传失败,1 表示上传成功
         message : "提示的信息,上传成功或上传失败及错误信息等。",
         url     : "图片地址"        // 上传成功时才返回
         }
         */
    });
});

其中

 previewTheme : "dark"

是设置黑色主题,但是editormd默认的黑色主题会把整个背景都设置为黑色,这里我对源代码进行了修改,如果有需要的同学可以进行下载

还有一点,图片上传后台返回的字段必须包含success字段,并且值为1时才可获取到图片的url

四、editormd的使用 – emoji表情

首先设置

 emoji: true

上面已经设置了,下载emoji表情包

https://github.com/SemiWarm/SemiWarmAdminPhotos/blob/master/emoji.zip

下载完成之后放到/editormd/plugins/emoji-dialog/目录下

然后修改editormd.js,找到以下位置将path修改为刚才放置的目录

editormd.emoji = {  
    //path  : "http://www.emoji-cheat-sheet.com/graphics/emojis/",  
    path  : "../editormd/plugins/emoji-dialog/emoji/",  
    ext   : ".png"  
}; 

这样就可以使用emoji表情了,如图:

enter image description here

访问我的达人课

访问我的博客 Wang’s Blog

关注我的微信公众号获取更多资源

集成editormd支持markdown语法(一)之基本使用

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/10476.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注