kindediter

# textarea，用于富文本输入
<textarea id="editor_id" name="content" style="width:700px;height:300px;"></textarea>
{% csrf_token %} #加入csrf_token，提交时，手动拿到token去提交
<button onclick="submit();">回复</button>

# 使用kindediter，引入相关js
    <script>window.jQuery || document.write('<script src="/static/js/jquery3.7.1.js"><\/script>')</script>
    <script charset="utf-8" src="/static/plugins/kindeditor/kindeditor-all.js"></script>
    <script charset="utf-8" src="/static/plugins/kindeditor/lang/zh-CN.js"></script>

# kindeditor的相关代码
        KindEditor.ready(function(K) {
            window.editor = K.create('#editor_id', {
                allowFileManager : true,
                uploadJson : '/uploadimg_kindeditor/', #设置图片上传的目录
                afterUpload : function(url) {
                    this.sync()   #上传完成后同步文本内容
                },
                items : [
                    'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
                    'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
                    'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                    'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
                    'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                    'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
                    'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
                    'anchor', 'link', 'unlink', '|', 'about'
                ]
            });
        });
        function submit() {
            editor.sync(); #同步编辑器的内容
            dic = {};
            key1 = 'csrfmiddlewaretoken';
            cs = document.getElementsByName(key1)[0];
            dic[key1] = cs.value;  # 拿到csrf_token
            dic["content"] = document.getElementById('editor_id').value; // 原生API;
            $.post({
                url: '/{{ article.blog.site }}/article/{{  article.id }}/new_comment/',
                data: dic,
                dataType: 'JSON',
                success: function (arg) {
                    if (arg.error==0){
                        ul = document.getElementById('ulComments');
                        appendCommentElement(arg.message,ul); #js代码生成一条评论html
                    }
                }
            });
        }

图片上传对应的接口

@csrf_exempt  #让post的时候免除csrf
@xframe_options_sameorigin #也是让post的时候
def uploadimg_kindeditor(request):
    unique_id = uuid.uuid4()
    surfix = os.path.splitext(request.FILES['imgFile'].name)[-1] #拿到文件后缀的方法splitext
    filename = str(unique_id) + surfix
    dir = "%s/upload/comments/imgs/"+filename
    result = {"error": 0,"url": dir%'/static','message':'123'} #页面上 用static别名访问
    try:
        with open(dir%'./statics', 'wb') as file: #保存时，用真实的statics路径，前面加‘.’才是相对于项目的根目录
            for chunk in request.FILES['imgFile'].chunks(): # 保存在内存的文件，需要chunks（）一块一块地写入
                file.write(chunk)
    except Exception as e:
        print(e)
        result = {"error": 1, "url": dir, 'message': '图片上传失败'}
    return HttpResponse(json.dumps(result))

腾讯地图js

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<script>
window.onload = function(){
		//直接加载地图
    //初始化地图函数  自定义函数名init
    function init() {
        var center = new qq.maps.LatLng(22.914751,114.083267);      // 地图的中心地理坐标。
        //定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
         var map = new qq.maps.Map(document.getElementById("container"), {
            center: center,
            zoom:11                                                 // 地图的中心地理坐标。
        });
        var marker = new qq.maps.Marker({  // 标记
            position: center,
            map: map
        })
    }

    //调用初始化函数地图
    init();
}
</script>

<!--   定义地图显示容器   -->
<div id="container">
    <div>
      #其它是复制指南的代码。这里自己添加一个a标签，点击跳转到腾讯地图页，并指定了初识位置
        <a target="_blank" href="http://apis.map.qq.com/uri/v1/marker?marker=coord:28.914751,106.083267;title:**市***镇；addr:**大厦" style="position: fixed; z-index: 100"><i class="itag"></i>查看完整地图</a>  {# z-index:100使不被遮盖，前提position不是static。 i标签 加个样式 显示图标 #}
    </div>
</div>