django 中引入markdown编辑器

1. textarea 输入框转化 --> markdown编辑器

pip3 install -U cos-python-sdk-v5	# 下载插件

• 我的是使用Form生成的
• models.py如下:

3. content = models.TextField(verbose_name='内容')
4. 前端页面中，使用 for循环生成，因为是对textarea进行替换所以进行判断一下,如果name='content’就给它加个div,给div添加一个属性id = ‘editor’

{% for foo in form %}
  	{% if foo.name == 'content' %}
          <div id="editor">
           	{{ foo }}
          </div>
     {% else %}
     	.......
     {% endif %}
{% endfor %}

• markdown编辑器，我这里使用的是 mdeditor
  github地址:直接下载解压到项目静态文件夹下

https://github.com/pandao/editor.md	

• 在需要使用的页面到导入样式和js

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

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

• 在js脚本中对编辑器进行初始化

$(function () {
	initEditorMd();
});

/*
markdown初始化(textarea转化为编辑器)
 */
function initEditorMd() {
    // 第一个参数传textarea 父级的div id属性
    // 第二个参数传markdowm配置 
    editormd('editor', {
        placeholder: "请输入内容",
        height: 500,        // 初始化大高度
        path: "{% static 'plugin/editor.md-master/lib/' %}", // 依赖的js文件路径
    })
}

• 个人记录:

// 因为markdown全屏是会和导航有点冲突,解决方法
.editormd-fullscreen {
   z-index: 1001;
}

• 看到这个页面表示引入成功

预览

• 实现markdown在页面进行展示了，然后实现一下markdown预览
• 前端页面:给显示的content放在textarea里面,然后再用一个div包起来给一个id属性

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

• 引入文件:

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

<script src="{% static 'plugin/editor.md-master/editormd.min.js' %}"></script>
<script src="{% static 'plugin/editor.md-master/lib/marked.min.js' %}"></script>
<script src="{% static 'plugin/editor.md-master/lib/prettify.min.js' %}"></script>
<script src="{% static 'plugin/editor.md-master/lib/raphael.min.js' %}"></script>
<script src="{% static 'plugin/editor.md-master/lib/underscore.min.js' %}"></script>
<script src="{% static 'plugin/editor.md-master/lib/sequence-diagram.min.js' %}"></script>
<script src="{% static 'plugin/editor.md-master/lib/flowchart.min.js' %}"></script>
<script src="{% static 'plugin/editor.md-master/lib/jquery.flowchart.min.js' %}"></script>

• 初始化:

$(function () {
   initPreivewMarkdown();
})

function initPreivewMarkdown() {
   editormd.markdownToHTML('previewMarkdown', {
       htmlDecode: "style,script,iframe"   // 去掉这些内容过滤，防止xss攻击等
   });
}

• 完成

django实现markdown本地图片上传腾讯COS

https://cloud.tencent.com/search/cos/1_1

点击立即使用

• 前端页面需要添加的参数:

$(function () {
	initEditorMd();
});

/*
markdown初始化(textarea转化为编辑器)
 */
function initEditorMd() {
    // 第一个参数传textarea 父级的div id属性
    // 第二个参数传markdowm配置 
    editormd('editor', {
        placeholder: "请输入内容",
        height: 500,        // 初始化大高度
        path: "{% static 'plugin/editor.md-master/lib/' %}", // 依赖的js文件路径
        imageUpload: true,  // 加上本地上传按钮
        imageFormats: ['jpg', 'jpeg', 'png', 'gif'],    // 支持的上传格式
        imageUploadURL: WIKI_UPLOAD_URL   // 点击上传之后的上传地址在路由里面配一个地址接收
    })
}

• 创建桶(用来存储图片对象)

def create_bucket(bucket, region='ap-nanjing'):
    """
    创建桶
    bucket:桶名称
    region:区域
    """
    logging.basicConfig(level=logging.INFO, stream=sys.stdout)

# https://console.cloud.tencent.com/cos5/key 
# 这个地址创建一个secretId,secretKey
    secret_id = settings.TENCENT_COS_ID  # 替换为用户的 secretId
    secret_key = settings.TENCENT_COS_KEY  # 替换为用户的 secretKey
    region = 'ap-nanjing'  # 替换为用户的 Region

    token = None  # 使用临时密钥需要传入 Token，默认为空，可不填
    scheme = 'https'  # 指定使用 http/https 协议来访问 COS，默认为 https，可不填
    config = CosConfig(Region=region, SecretId=secret_id, SecretKey=secret_key)

    # 2. 获取客户端对象
    client = CosS3Client(config)

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

• 上传图片到桶(此函数也就是视图函数中调用的函数)

def upload_file(bucket, region, file_object, key):
    logging.basicConfig(level=logging.INFO, stream=sys.stdout)

    secret_id = settings.TENCENT_COS_ID  # 替换为用户的 secretId
    secret_key = settings.TENCENT_COS_KEY  # 替换为用户的 secretKey
    region = 'ap-nanjing'  # 替换为用户的 Region

    token = None  # 使用临时密钥需要传入 Token，默认为空，可不填
    scheme = 'https'  # 指定使用 http/https 协议来访问 COS，默认为 https，可不填
    config = CosConfig(Region=region, SecretId=secret_id, SecretKey=secret_key)

    # 2. 获取客户端对象
    client = CosS3Client(config)

    response = client.upload_file_from_buffer(
        Bucket=bucket,  # 桶名
        Body=file_object,  # 本地文件路径
        Key=key,  # 上传到桶之后的文件名
    )
    # print(response['ETag'])
    # 上传成功之后对地址进行拼接返回
    # https://test-1302618049.cos.ap-nanjing.myqcloud.com/1.png

    return "https://%s.cos.%s.myqcloud.com/%s" % (bucket, region, key)

• 视图函数代码,刚才配置的路由对应的视图函数:

from django.views.decorators.csrf import csrf_exempt
from django.http import JsonResponse
from django.views.decorators.clickjacking import xframe_options_exempt
from utils.encrypt import uid
from utils.tencent.cos import upload_file

@xframe_options_exempt	# django3.0上的一个小问题,要是前端页面没有报错可以不加
@csrf_exempt	# 解除csrf认证
def UploadView(request):
    # 接收到的图片 上传的文件对象
    image_object = request.FILES.get('editormd-image-file')

    ext = image_object.name.rsplit('.')[-1]  # 提取本地上传图片的后缀名
    key = "%s.%s" % (uid(request.tracer.user.phone), ext)  # uid是自定义随机值函数

    # 文件对象上传到当前对象的桶中 接收返回的url
    image_url = upload_file(	# upload_file自定义的上传函数
        request.tracer.project.bucket,  # 桶名称   我的是自己存储在数据户中
        request.tracer.project.region,  # 地区
        image_object,  # 图片对象
        key  # 进行随机的存储名字
    )



    result = {  # markdown 上传成功返回的默认格式
        'success': 1,
        'message': None,
        'url': image_url
    }
    return JsonResponse(result)