广告位

django后台添加添加富文本编辑器simditor

大家好,这里是python技术宅的个人博客。

刚搭建起来的django后台,因为默认的文本输入只能是原始文字,不能很好地进行文本编辑排版,所以急需一个富文本编辑器器,在这里我使用的是simditor。

使用simditor的原因很简单,因为刚好看到了这一个编辑器,而且挺实用,可拓展性强,附上官网地址:simditor官网

下面我就来讲讲如何在django后台集成simditor:

  1. 下载simditor
  2. 应用simditor
  3. 配置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"。

完成这些后,你就可以在后台中看到一个初始的富文本编辑器

具体的个性化设计,如果各位读者还感兴趣的话没欢迎留言。

打赏
随机文章
广告位

添加评论


评论列表,共 6 条评论

  • 1

  • 8

  • Unsethy

    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