大家好,这里是python技术宅的个人博客。
刚搭建起来的django后台,因为默认的文本输入只能是原始文字,不能很好地进行文本编辑排版,所以急需一个富文本编辑器器,在这里我使用的是simditor。
使用simditor的原因很简单,因为刚好看到了这一个编辑器,而且挺实用,可拓展性强,附上官网地址:simditor官网
下面我就来讲讲如何在django后台集成simditor:
一、下载simditor
从官网上可以直接下载使用,直达连接 https://github.com/mycolorway/simditor/releases,下载好后,解压找到module.js、uploader.js、hotkeys.js、simditor.js和simditor.css等文件,导入到你的django项目文件夹中。
在我的项目中,文件保存在这里:
static/
bootstrap/
css/
simditor.css
js/
simditor/
module.js
uploader.js
hotkeys.js
simditor.js
textarea.js
其中的 textarea.js是第二步中要引用的文件。
二、引用simditor
以我的项目为例,我需要给article model 的content 字段在后台添加编辑器,article model内容如下:
class Article(models.Model):
title = models.CharField(max_length=100,verbose_name='标题')
content = models.TextField(verbose_name='内容')
第一步我们需要做的是将js与css文件导入至admin的模板中,打开article app 中的admin.py文件,创建一个ArticleAdmin类(如果有就忽略),在其内部创建一个Media类,按照格式写好路径,另外,因为simditor是基于jQuery的,所以还要引入jquery.js,必须放在所有其他的simditor文件以前,否则无法工作。最后,不要忘记新建的ArticleAdmin类不要忘记注册。
具体代码如下:
@admin.register(Article)
class ArticleAdmin(admin.ModelAdmin):
class Media:
css = {'all':(
'bootstrap/css/simditor.css',
)}
js = (
'https://cdn.bootcss.com/jquery/3.2.1/jquery.js',
'bootstrap/js/simditor/module.js',
'bootstrap/js/simditor/uploader.js',
'bootstrap/js/simditor/hotkeys.js',
'bootstrap/js/simditor/simditor.js',
'bootstrap/js/simditor/rich_text.js',
'bootstrap/js/simditor/textarea.js',
)
三、配置编辑器
如果上述操作没有问题的话,重启本地服务器(我是在本地做的此次操作),打开django后天,选择新建文章,在此页面查看源代码会发现多了一行。
具体如下:
<textarea name="content" id="id_content" required class="vLargeTextField" cols="40" rows="10">
</textarea>
创建一个 textarea.js 用于初始化编辑器,这个文件名是我自己命名的,读者可自行定义,但要与第一步、第二部中的名称相对应。
写入如下代码:
$(function() {
var editor = new Simditor({
textarea: $("#id_content"),
//optional options });
});
注意,textarea:$("#id_content")就是上述<textarea>中的id="id_content"。
完成这些后,你就可以在后台中看到一个初始的富文本编辑器。
具体的个性化设计,如果各位读者还感兴趣的话没欢迎留言。
1
8
Rsawyi Direct Generic Hydrochlorothiazide Medicine Cash Delivery Price https://oscialipop.com - Cialis puedo comprar cialis sin receta Cialis Preis <a href=https://oscialipop.com>buy cialis cheap</a> Ltdvjk Paulson DF White RD. Rmqfbw https://oscialipop.com - Cialis Ryofqt Dosage Amounts For Children Medication Amoxicillin