一、序言
开源插件markdown编辑器【http://pandao.github.io/editor.md/】。
估计大家使用博客的时候对文章内容编辑头很大,对于代码高亮、格式调整、多平台兼容(csdn,简书,githup)等功能,传统的富文本虽然也很强大,但是完成这些功能似乎不太完美,而且markdown因为它的简约,扁平化,强大的多平台,极简的代码语言越来越受大家的喜爱。这里向大家推荐一个免费开源的插件,能将markdown这款强大的编辑器嵌入到自己的博客。
二、嵌入editormd
我这里是使用了widget小部件,里面有部分php模板代码,而且是采用批量加载css形式,如果你选择的不是这种,只需要正常引入js和css,然后实例化就好了。注意阅读注释!
<link rel="stylesheet" href="__STATIC__/widget/admin/editor/markdown/css/editormd.css" />
<script type="text/javascript">
var arr = [
static_root + 'widget/admin/editor/markdown/editormd.js',
];
ob.loadMultiScripts(arr).done(function() {
var editor_{$widget_data.name};
editor_{$widget_data.name} = editormd("{$widget_data.name}", {
width : "100%",
height : 640,
syncScrolling : "single",
path : static_root + 'widget/admin/editor/markdown/lib/',
saveHTMLToTextarea : true,//这个配置,方便post提交表单,表单字段会自动加上一个字段content-html-code,形式为html格式
/**上传图片相关配置如下*/
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "{:url('widget/editormdPictureUpload')}",//注意你后端的上传图片服务地址
});
}).fail(function(){
alert('editormd加载失败...');
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
如果你需要html格式的数据,那么saveHTMLToTextarea要设置成true,这样会在post提交数据中出现content-html-code,如下所示,content必须要存,编辑时需要用来回显。我这里存的是html到文章内容,因为我网站有三种编辑器可以选择编辑文章,具体设计可根据需求来。
name: 测试
category_id: 9
describe:
cover_id: 0
img_ids:
file_id: 0
tagids:
content: # 一级标题
content-html-code: <h1 id="h1-u4E00u7EA7u6807u9898"><a name="一级标题" class="reference-link"></a><span class="header-link octicon octicon-link"></span>一级标题</h1>
editor_type: 1
sort: 0
is_top: 0
id: 0
1
2
3
4
5
6
7
8
9
10
11
12
13
图片上传,加入实例代码中的三项配置就好imageUpload、imageFormats、imageUploadURL,这里就不贴后台代码,我用的php,$_FILES[‘editormd-image-file’]就会有值了,然后自行用后台语言处理,editormd是希望我们返回这样的代码格式:
//期望返回值
{
success : 0 | 1, //0表示上传失败;1表示上传成功
message : "提示的信息",
url : "图片地址" //上传成功时才返回
}
1
2
3
4
5
6
到此为止我们网站就可以集成markdown编辑器了。效果图如下:
三、博客文章内容页显示
这是官网提供方式进行显示,目前能满足需求,像代码高亮,流程图,表情等都能显示正常。
这里有两种方式显示内容。
我们取出的html内容!使用markdown的css 并在外层容器加入markdown-body editormd-html-preview这两个类,文字效果样式什么的都会显示,代码再用hightlight.js加载成高亮样式。
这样的形式加载快,页面几乎没缓冲,缺点的是markdown部分功能无法使用,流程图和其他功能
我们取出markdown标记语言!直接用editormd渲染,如下代码就是这种方法,也是笔者推荐。
功能强大,但是渲染过程会有样式一直在蹿的过程,持续0.5s内(根据服务器和客户端网速而定)
<article class="article-content" id="article-content">
{if condition="$article_info.editor_type eq 1"}
<link rel="stylesheet" href="__STATIC__/widget/admin/editor/markdown/css/editormd.preview.css" />
<textarea style="display:none;" placeholder="markdown语言">{$article_info.content_md}</textarea>
<script src="__STATIC__/widget/admin/editor/markdown/lib/marked.min.js"></script>
<script src="__STATIC__/widget/admin/editor/markdown/lib/prettify.min.js"></script>
<script src="__STATIC__/widget/admin/editor/markdown/lib/raphael.min.js"></script>
<script src="__STATIC__/widget/admin/editor/markdown/lib/underscore.min.js"></script>
<script src="__STATIC__/widget/admin/editor/markdown/lib/sequence-diagram.min.js"></script>
<script src="__STATIC__/widget/admin/editor/markdown/lib/flowchart.min.js"></script>
<script src="__STATIC__/widget/admin/editor/markdown/lib/jquery.flowchart.min.js"></script>
<script src="__STATIC__/widget/admin/editor/markdown/editormd.js"></script>
<script>
$(function() {
var testEditormdView2;
testEditormdView2 = editormd.markdownToHTML("article-content", {
htmlDecode : "style,script,iframe", // you can filter tags decode
emoji : true,
taskList : true,
tex : true, // 默认不解析
flowChart : true, // 默认不解析
sequenceDiagram : true, // 默认不解析
});
});
</script>
{else /}
<pre><code class="php">echo 111</code></pre>
{:html_entity_decode($article_info['content'])}
<link rel="stylesheet" href="__STATIC__/module/resource/highlight/src/styles/default.css">
<script src="__STATIC__/module/resource/highlight/src/highlight.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
{/if}
<p class="article-copyright hidden-xs">未经允许不得转载:<a href="{:url('index/index')}">张浩博客</a> » <a href="{:url('article/detail',['id'=>$article_info['id']])}">{$article_info.name}</a></p>
</article>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
四、总结
平时简介的代码和样式规范的文章一样重要,有了markdown我就可以丢弃鼠标,不担心样式问题,直接用简洁的标记语言专注书写核心代码。
所以我看到csdn、简书、git上都用上了markdown,我就不需要不断调格式了,一篇文章多平台发布,自己搭建的博客怎么能少了这样的神器呢,快让自己的博客也加上markdown编辑器吧!
欢迎关注我的博客 www.zhanghao520.com,更多技术问题一起研究!
---------------------
作者:张浩520
来源:CSDN
原文:https://blog.csdn.net/qq_37246351/article/details/88122018
版权声明:本文为博主原创文章,转载请附上博文链接!