" name="sm-site-verification"/>
侧边栏壁纸
博主头像
PySuper 博主等级

千里之行,始于足下

  • 累计撰写 231 篇文章
  • 累计创建 15 个标签
  • 累计收到 2 条评论

目 录CONTENT

文章目录
Web

Django 配置富文本 / MarkDown编辑器

PySuper
2020-09-22 / 0 评论 / 0 点赞 / 10 阅读 / 0 字
温馨提示:
本文最后更新于2024-05-28,若内容或图片失效,请留言反馈。 所有牛逼的人都有一段苦逼的岁月。 但是你只要像SB一样去坚持,终将牛逼!!! ✊✊✊

编辑器

  • 富文本编辑器: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)

七牛云

0
  1. 支付宝打赏

    qrcode alipay
  2. 微信打赏

    qrcode weixin

评论区