📅  最后修改于: 2023-12-03 15:09:32.997000             🧑  作者: Mango
WYSIWYG 编辑器是一种可视化编辑器,可以允许用户像使用常规文字处理软件一样进行内容编辑。Django 是一个流行的 Web 框架,它可以轻松地将 WYSIWYG 编辑器添加到项目中。
有很多不同的 WYSIWYG 编辑器可供选择。以下是几个流行的 WYSIWYG 编辑器:
在本篇文章中,我们将使用 TinyMCE 作为演示。
第一步是安装和配置 TinyMCE。可以通过以下步骤完成:
static
的文件夹。$ mkdir static
$ curl https://cloud.tinymce.com/stable/tinymce.min.js -o static/tinymce.min.js
settings.py
文件中,以配置 TinyMCE 用于表单字段。TINYMCE_DEFAULT_CONFIG = {
'theme': 'advanced',
'relative_urls': False,
'convert_urls': False,
'remove_script_host': False,
'plugins': 'advimage,advlink,searchreplace,visualblocks,visualchars,fullscreen,table,media,nonbreaking,contextmenu,paste,directionality,emoticons',
'theme_advanced_buttons1': 'bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,formatselect,fontselect,fontsizeselect',
'theme_advanced_buttons2': 'cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote',
'theme_advanced_buttons3': 'link,unlink,image,code,insertdate,inserttime,|,forecolor,backcolor',
'theme_advanced_toolbar_location': 'top',
'theme_advanced_toolbar_align': 'left',
'theme_advanced_statusbar_location': 'bottom',
'theme_advanced_resizing': True,
'width': '700',
'height': '450',
}
static
文件夹中创建一个名为 tinymce_init.js
的JavaScript文件。$ touch static/tinymce_init.js
tinymce_init.js
文件中添加以下代码,以初始化 TinyMCE 配置。$(document).ready(function(){
var textareas = $('textarea[data-type="tinymce"]');
if(textareas.length > 0) {
tinymce.init({
selector: 'textarea[data-type="tinymce"]',
setup: function(editor) {
editor.on('change', function(e) {
editor.save();
});
},
plugins: 'advlist autolink lists link image charmap print preview hr anchor pagebreak',
toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image'
});
}
});
要在 Django 表单字段中使用 TinyMCE,请将以下步骤添加到表单定义中:
TextArea
字段。from django import forms
class MyForm(forms.Form):
content = forms.CharField(widget=forms.Textarea(attrs={'data-type': 'tinymce'}))
tiny_mce.js
文件和 tinymce_init.js
文件。{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Page</title>
<script src="{% static 'tinymce.min.js' %}"></script>
<script src="{% static 'tinymce_init.js' %}"></script>
</head>
<body>
<form action="." method="POST">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Submit</button>
</form>
</body>
</html>
现在,我们已经成功将一个 WYSIWYG 编辑器(TinyMCE)添加到 Django 项目中。Django 中的表单字段可以使用 TinyMCE 编辑器进行可视化编辑。其他 WYSIWYG 编辑器也可以通过类似的步骤添加到 Django 项目中。