集成后的效果如图
其中对黑色主题的样式进行了修改
一、下载源码
下载地址
https://github.com/pandao/editor.md
官方地址
http://pandao.github.io/editor.md/
二、导入到webapp目录下
将其中的css、js、lib等文件进行整理放到editormd文件下,然后将editormd文件夹放在webapp目录下,如图
其中我将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表情了,如图:
关注我的微信公众号获取更多资源
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/10476.html