1 使用markdown编辑文档
1)下载Markdown编辑器文件
http://editor.md.ipandao.com/#download
2)引用css和js文件
<link rel="stylesheet" href="{% static "app01/plugins/editor-md/css/editormd.min.css" %}">
<div id="editor">
{{ field }}
</div>
<script src="{% static "app01/plugins/editor-md/editormd.amd.min.js" %}"></script>
<script>
$(function () {
initEditMd();
});
/*
初始化markdown(textarea转换成编辑器)
*/
function initEditMd() {
editormd('editor', {
placeholder: "请输入内容",
height: 500,
path: "{% static "app01/plugins/editor-md/lib/" %}",
imageUpload: true, // 本地上传
imageFormats: ['jpg', 'jpeg', 'png', 'gif'], // 上传图片支持的格式
imageUploadURL: '/app01/project_manage/
{{ request.sass.project.id}}/wiki_upload/' // 图片的上传路径
})
}
</script>
2.文档以markdown格式显示
<link rel="stylesheet" href="{% static "/app01/plugins/editor-md/css/editormd.preview.min.css" %}">
<div id="previewMarkdown">
<textarea>{{ wiki_obj.content }}</textarea>
</div>
<script src="{% static "app01/plugins/editor-md/editormd.amd.min.js" %}"></script>
<script src="{% static "app01/plugins/editor-md/lib/marked.min.js" %}"></script>
<script src="{% static "app01/plugins/editor-md/lib/prettify.min.js" %}"></script>
<script src="{% static "app01/plugins/editor-md/lib/raphael.min.js" %}"></script>
<script src="{% static "app01/plugins/editor-md/lib/underscore.min.js" %}"></script>
<script src="{% static "app01/plugins/editor-md/lib/sequence-diagram.min.js" %}"></script>
<script src="{% static "app01/plugins/editor-md/lib/flowchart.min.js" %}"></script>
<script src="{% static "app01/plugins/editor-md/lib/jquery.flowchart.min.js" %}"></script>
function initPreviewMarkdown() {
editormd.markdownToHTML("previewMarkdown", {
htmlDebode: "style, script, iframe"
});
}