Django 配置富文本 / MarkDown编辑器

编辑器

• 富文本编辑器：ckeditor
• MarkDown编辑器：mdeditor

MarkDown

编辑

添加和编辑的页面中textarea输入框–>转换为MarkDown编辑器

• div包裹

<!-- textarea框通过div包裹，以便后续查找并转化为编辑器 -->
<div id="editor">... ...</div>

• 应用css和js

<link rel="stylesheet" href="{% static 'plugin/editor-md/css/editormd.min.css' %}">
<script src="{% static 'plugin/editor-md/editormd.min.js' %}"></script>

• 初始化编辑器

$(function () {
    initEditorMd(); // 初始化MD编辑器
});

function initEditorMd() {
    editormd('editor', {
        placeholder: "请输入内容",
        height: 500,
        path: "{% static 'plugin/editor-md/lib/' %}",
    })
}

• 全屏

.editormd-fullscreen{
    z-index: 1001;
}

预览

• 内容区域

<div id="previewMarkdown">
	<textarea>
		{{ wiki_obj.content }}
	</textarea>
</div>

• 引入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/raphael.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/prettify.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/flowchart.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/jquery.flowchart.min.js' %}"></script>

• 初始化

$(function () {
    initPreviewMd(); // 初始化MD编辑器
});

function initPreviewMd() {
    editormd.markdownToHTML('previewMarkdown', {
        htmlDecode: "style, script, iframe",
    })
}

文件上传

• 这里使用对象存储，这两者都有他们的SDK，使用还是很方便的：
  • 腾讯云
  • 七牛云

腾讯云

# pip install -U cos-python-sdk-v5
from qcloud_cos import CosConfig
from qcloud_cos import CosS3Client
from setting.variable import TENCENT_COS_ID, TENCENT_COS_KEY


def create_bucket(region, bucket):
    """
    创建腾讯的数据存储桶
    :param region: 区域名
    :param bucket: 桶名称
    :return:
    """
    region = region  # 替换为用户的 Region
    config = CosConfig(Region=region, SecretId=TENCENT_COS_ID, SecretKey=TENCENT_COS_KEY)
    client = CosS3Client(config)

    """创建桶"""
    client.create_bucket(
        Bucket=bucket,
        ACL="public-read"
    )


def upload_image(region, bucket, image_obj, image_name):
    region = region  # 替换为用户的 Region
    config = CosConfig(Region=region, SecretId=TENCENT_COS_ID, SecretKey=TENCENT_COS_KEY)
    client = CosS3Client(config)

    """高级上传接口（推荐）"""
    # 根据文件大小自动选择简单上传或分块上传，分块上传具备断点续传功能。
    # client.upload_file(
    #     Bucket=bucket,
    #     LocalFilePath='cos_test.ico',  # 本地文件的路径
    #     Key='test.ico',  # 上传到桶之后的文件名
    # )

    client.upload_file_from_buffer(
        Bucket=bucket,
        Body=image_obj,
        Key=image_name
    )

    return "https://{}.cos.{}.myqcloud.com/{}".format(bucket, region, image_name)

七牛云