在做wiki文档的时候需要引入markdown编辑器,在此记录一下
name='content'
,我们给它再套一个div
, 并给其添加一个属性id="editor"
。修改后代码如下: ```html
{% for field in form %}
{% if field.name == 'content' %}
<div class="form-group">
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
<div id="editor">
{{ field }}
</div>
<span class="error-msg">{{ field.errors.0 }}</span>
</div>
{% else %}
<div class="form-group">
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
{{ field }}
<span class="error-msg">{{ field.errors.0 }}</span>
</div>
{% endif %}
{% endfor %}
```id="editor"
<script src="{% static 'plugin/editor-md/editormd.min.js' %}"></script>
```
function initEditorMd() {
// 第一个参数是页面中位置(如上,我这里是id="editor")
// 第二个参数是生成md编辑器后的配置
editormd('editor', {
placeholder: "请输入内容",
height: 500,
})
}
```
z-index
,让其全屏时大于所有的z-index
即可。(z-index
默认为1000)
div
中 ```html
<div id="previewMarkdown">
<textarea>{{ wiki_object.content }}</textarea>
</div>
```<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/prettify.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/raphael.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/flowchart.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/jquery.flowchart.min.js' %}"></script>
```
function initPreviewMarkdown() {
editormd.markdownToHTML("previewMarkdown", {
// 内容过滤,防止xss攻击等
htmlDecode: "style, script, iframe"
});
}
```
<font color="red">editor-md</font>
提取码:oxd1
如果本文对你有帮助,点个赞支持一下吧:smile:
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。