在线修图编辑器_md文档编辑器

在线修图编辑器_md文档编辑器md在线编辑器使用一、下载editor.mdhttps://pandao.github.io/editor.md/https://github.com/pandao/editor.md/archive/master.zip解压后放入静态文件夹二、编辑页面引入(一)模板中引入CSS和JS文

大家好,欢迎来到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

(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信