python实现markdown文档编辑器应用

常用的文档编辑器

• 富文本编辑器，ckeditor
• markdown编辑器，mdeditor

项目中想要应用markdown编辑器：

• 添加和编辑的页面中 textarea 输入框 -> 转换为markdown编辑器

  1. textarea框通过div包裹以便以后查找并转化为编辑器
  	<div id='editor'>.... </div>
  2. 应用js和css
  	<link rel="stylesheet" href="{% static 'plugin/editor-md/css/editormd.min.css' %}">
  	<script src="{% static 'plugin/editor-md/editormd.min.js' %}"></script>
  
  3. 进行初始化
  	$(function () {
         initEditorMd();
      });
          /*
          初始化markdown编辑器（textare转换为编辑器）
           */
          function initEditorMd() {
              editormd('editor', {
                  placeholder: "请输入内容",
                  height: 500,
                  path: "{% static 'plugin/editor-md/lib/' %}"
              })
          }
  4.全屏
  	.editormd-fullscreen{
              z-index: 1001;
          }
  

• 预览页面按照markdown格式显示

  1. 内容区域
  	<div id="previewMarkdown">
      	<textarea>{{ wiki_object.content }}</textarea>
      </div>
  2. 引入css 、 js
  	<link rel="stylesheet" href="{% static 'plugin/editor-md/css/editormd.preview.min.css' %}">
  	
  	<script src="{% static 'plugin/editor-md/editormd.min.js' %}"></script>
      <script src="{% static 'plugin/editor-md/lib/marked.min.js' %}"></script>
      <script src="{% static 'plugin/editor-md/lib/prettify.min.js' %}"></script>
      <script src="{% static 'plugin/editor-md/lib/raphael.min.js' %}"></script>
      <script src="{% static 'plugin/editor-md/lib/underscore.min.js' %}"></script>
      <script src="{% static 'plugin/editor-md/lib/sequence-diagram.min.js' %}"></script>
      <script src="{% static 'plugin/editor-md/lib/flowchart.min.js' %}"></script>
      <script src="{% static 'plugin/editor-md/lib/jquery.flowchart.min.js' %}"></script>
      
  3. 初始化
  	 $(function () {
              initPreivewMarkdown();
  
          });
          function initPreivewMarkdown() {
              editormd.markdownToHTML("previewMarkdown", {
                  htmlDecode: "style,script,iframe"
              });
          }
  

总结：编辑器实现markdown编辑和预览。