大家好,欢迎来到IT知识分享网。
md在线编辑器使用
目录
- md在线编辑器使用
- 一、下载editor.md
- 二、编辑页面引入
- (一)模板中引入CSS和JS文件
- (二)初始化editor
- (三)全屏优化
- 三、展示页面引入
- (一)模板中引入CSS和JS文件
- (二)初始化展示
一、下载editor.md
https://pandao.github.io/editor.md/
https://github.com/pandao/editor.md/archive/master.zip
解压后放入静态文件夹
二、编辑页面引入
(一)模板中引入CSS和JS文件
{% load static %}
{% block css %}
<link rel="stylesheet" href="{% static 'web/plugin/mdeditor/css/editormd.min.css' %}">
{% endblock %}
{% block js %}
<script src="{% static 'web/plugin/mdeditor/editormd.min.js' %}"></script>
{% endblock %}
(二)初始化editor
<script>
$(function () {
initEditor();
});
function initEditor() {
var editor = editormd("editor", {
placeholder: "请输入内容",
// width : "100%",
height : 500,
path : "{% static 'web/plugin/mdeditor/lib/' %}"
});
}
</script>
(三)全屏优化
<style>
.editormd-fullscreen {
z-index: 1001;
}
</style>
三、展示页面引入
(一)模板中引入CSS和JS文件
{% load static %}
{% block css %}
<link rel="stylesheet" href="{% static 'web/plugin/mdeditor/css/editormd.preview.min.css' %}">
{% endblock %}
{% block js %}
<script src="{% static 'web/plugin/mdeditor/editormd.min.js' %}"></script>
<script src="{% static 'web/plugin/mdeditor/lib/flowchart.min.js' %}"></script>
<script src="{% static 'web/plugin/mdeditor/lib/jquery.flowchart.min.js' %}"></script>
<script src="{% static 'web/plugin/mdeditor/lib/marked.min.js' %}"></script>
<script src="{% static 'web/plugin/mdeditor/lib/prettify.min.js' %}"></script>
<script src="{% static 'web/plugin/mdeditor/lib/raphael.min.js' %}"></script>
<script src="{% static 'web/plugin/mdeditor/lib/sequence-diagram.min.js' %}"></script>
<script src="{% static 'web/plugin/mdeditor/lib/underscore.min.js' %}"></script>
{% endblock %}
(二)初始化展示
<script>
$(function () {
initViewMd();
});
function initViewMd() {
editormd.markdownToHTML("viewMd", {
htmlDebode: "style,script,iframe"
})
}
</script>
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/29707.html