185.基于Django的富文本编辑器安装与使用

news2024/10/7 3:14:45

1.DjangoUeditor

在这里插入图片描述

1.1 概述

富文本编辑器，在web开发中必不可少，但是django没有自带富文本编辑器，因此我们需要使用第三方库，这里使用DjangoUeditor
DjangoUditor是百度开源的在线HTML编辑器，功能非常强大，像表格可以直接拖动调整单元格大小

1.2 安装DjangoUeditor

该库存在bug，需要修改源码文件，因此使用源码文件安装。

  1. 新建项目

  2. 下载
    从GitHub下载源码进行安装：https://github.com/twz915/DjangoUeditor3/下载完解压，在解压后的文件夹中有一个DjangoUeditor文件夹，后续需要使用
    在这里插入图片描述
    在这里插入图片描述

  3. 复制DjangoUeditor文件夹到项目根路径
    在这里插入图片描述

  4. 在项目settings中添加子应用
    在这里插入图片描述

  5. 根路由下添加包含子路由
    在这里插入图片描述

2. UEditorField

UEditorField继承自models.TextField，因此可以直接将model里面定义的models.TextField直接改成UEditorField即可。
定义UEditorField时除了可以直接传入models.TextField提供的参数外，还可以传入UEditorField提供的额外的参数来控制UEditorField的外观、上传路径等。
UEditorField的参数如下

  • width，height :编辑器的宽度和高度，以像素为单位
  • toolbars :配置你想显示的工具栏，取值为mini,normal,full，代表小，一般，全部。如果默认的工具栏的按钮数量不符合您的要求，您可以在settings里面配置自己的显示按钮。参见后面介绍。
  • imagePath :图片上传后保存的路径,如"images/“,实现上传到”{{MEDIA_ROOT}}/images"文件夹。 注意：如果imagePath值只设置文件夹，则未尾要有"/" imagePath可以按python字符串格式化：如"images/(basename)s_%(datetime)s_%(rnd)s.%(extname)s"。这样如果上传test.png，则文件会 被保存为"
    {{MEDIA_ROOT}}/images/test_20440625122399_259.png"。imagePath中可以使用的变量有：
    -time :上传时的时间，datetime.datetime.now().strftime(“%H%M%S”)
    • date ：上传时的日期，datetime.datetime.now().strftime(“%Y%m%d”)
    • datetime ：上传时的时间和日期，
    • datetime.datetime.now().strftime(“%Y%m%d%H%M%S”)
    • year : 年
    • month : 月
    • day : 日
    • rnd : 三位随机数，random.randrange(100,999)
    • basename ： 上传的文件名称，不包括扩展名
    • extname : 上传的文件扩展名
    • filename : 上传的文件名全称
  • filePath : 附件上传后保存的路径，设置规则与imagePath一样。
  • upload_settings : 字典例:upload_settings={imagePathFormat:“images/%(basename)s_%(datetime)s.%
    (extname)s”, imageMaxSize:323232,fileManagerListPath:“files” }
    • upload_settings的内容就是static/ueditor/php/config.json里面的配置内容，因此，你可以去看config.json或者官方文档内容来决定 该如何配置upload_settings,基本上就是用来配置上传的路径、允许上传的文件扩展名、最大上传的文件大小之类的。
    • 上面的imagePath和filePath被单独提取出来配置，原因是因为这两个参数是最常使用到的，imagePath就相当于upload_settings里面的 imagePathFormat，filePath就相当于upload_settings里面的filePathFormat。
    • upload_settings里面设置了imagePathFormat,也可以在UeditorField里面设置imagePath，效果是一样的。但是如果两者均设置， 则imagePath优先级更高。
    • 涂鸦文件、截图、远程抓图、图片库的xxxxPathFormat如果没有配置，默认等于imagePath.
    • 远程文件库的xxxxPathFormat如果没有配置，默认等于filePath
  • settings : 字典值,配置项与static/ueditor/ueditor.config.js里面的配置项一致。
  • command : 可以为Ueditor新增一个按钮、下拉框、对话框,例
Description = UEditorField(u'描述'
,
blank=True, toolbars="full",
imagePath="cool/", settings={"a": 1},command=
[myBtn(uiName="mybtn1", icon="d.png",
title="aaa",
ajax_url="/ajaxcmd/"),myCombo(uiName="myCombo
3",title="ccc",initValue="111")])
  • command 列表中的按钮是 commands 模块下 UEditorCommand 的实例列表：
  • UEditorButtonCommand：可以在Ueditor上增加一个按钮
  • UEditorComboCommand：可以在Ueditor上增加一个下拉框
  • UEditorDialogCommand：可以在Ueditor上增加一个对话框，暂时未实现
  • 也可以自定义:
from DjangoUeditor.commands import
UEditorButtonCommand,UEditorComboCommand
    #定义自己的按钮命令类
    class myBtn(UEditorButtonCommand):
        def onClick(self):
            return u"""
               alert("爽!");       //这里可以
写自己的js代码
               editor.execCommand(uiName);
           ""
           def
onExecuteAjaxCommand(self,state):
        """ 默认在command代码里面加入一段ajax代
码，如果指定了ajax_url和重载本方法，则在单点按钮后
         会调用ajax_url.本方法重载是可选的。
         """
            if state=="success":
                return u"""
                   alert("后面比较
爽!"+xhr.responseText);//这里可以写ajax成功调用
的js代码
               """
            if state=="error":
                return u"""
                   alert("讨厌，摸哪里去
了！"+xhr.responseText);//这里可以写ajax错误调用
的js代码
               """

父类UEditorCommand有4个初始化参数：

  • uiName：按钮名称
  • title：按钮提示信息
  • index：按钮显示的位置索引
  • ajax_url：单击时调用的ajax url
  • event_handler : 用来为Ueditor实例绑定事件侦听，比如以下示例的功能是：当选择区改变时将按
    钮状态设置为禁
from DjangoUeditor.commands import
UEditorEventHandler
    class
myEventHander(UEditorEventHandler)
  def on_selectionchange(self):
            return """
             function getButton(btnName){
                 var items=%
(editor)s.ui.toolbars[0].items;
                 for(item in items){
                     
if(items[item].name==btnName){
                         return
items[item];
                     }
                 }
             }
             var btn=getButton("mybtn1");
             var
selRanage=id_Description.selection.getRange(
)
             
btn.setDisabled(selRanage.startOffset ==
selRanage.endOffset);
         """

说明：
我们可以继承UEditorEventHandler创建自己的事件侦听类，例如上面myEventHander，然后在
myEventHander中 增加on_eventname的方法，在里面返回侦听该event的js代码。例如上例
on_selectionchange,就会在前端js中 生成id_Description.addListener(‘selectionchange’,
function () {…});
如果要侦听contentchange事件，就在myEventHander中增加一个on_contentchange方法，然后
在该方法中返回js代码

3. 项目中应用富文本编辑器

富文本库的使用，都是为了提交带格式的内容，因此一般都是应用在模型上，我们新建一个模型：

from DjangoUeditor.models import UEditorField
class Article(models.Model):
    title = models.CharField(max_length=100, verbose_name='标题')
    # 富文本字段
    content = UEditorField(
        width=600, 
        height=300,
        toolbars="full", # 全部的工具
        imagePath="images/", #指定图片保存路径
        filePath="files/", # 附件文件上传路径
        upload_settings={"imageMaxSize":1204000}, # 最大图片大小
        settings={},
        verbose_name="内容",
        blank = True, # 空白
        null=True
        )
    class Meta:
        verbose_name_plural = verbose_name = '文章'

迁移数据库后，使用Navicat连接
在这里插入图片描述
在这里插入图片描述

admin.py——使用admin管理模型

from django.contrib import admin
from ueditor_app.models import *
# Register your models here.
admin.site.register(Article)

settings:文件上传配置

import os
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR,'templates')],
# 文件上传配置
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

根urls中配置——需要显示文件

from django.conf import settings
from django.conf.urls.static import static
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

创建superuser管理后台
在这里插入图片描述
在这里插入图片描述

4. 富文本编辑器列表显示

这里，我们将使用模板去显示富文本编辑器中的内容，以模板的形式
urls

from django.shortcuts import render
from ueditor_app.models import Article
# Create your views here.
def article_list(request):
    # 查询所有的文章
    article_list = Article.objects.all()
    # 渲染页面
    return render(request, "ueditor_app/article_list.html", {'article_list':article_list})

templates

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章列表</title>
</head>
<body>
    <ul>
        {% for article in article_list %}
        <li>
            标题:{{article.title}}
        </li>
        {% endfor %}
    </ul>
</body>
</html>

在这里插入图片描述

5. 富文本编辑器模板中使用新增文章——自定义富文本编辑器

使用ModelForm使用富文本
views

from django.shortcuts import render,redirect
from ueditor_app.models import Article
from ueditor_app.app_form import ArticleModelForm
# Create your views here.
def article_list(request):
    # 查询所有的文章
    article_list = Article.objects.all()
    # 渲染页面
    return render(request, "ueditor_app/article_list.html", {'article_list':article_list})

# 渲染到新增文章页面
def article(request):
    form = ArticleModelForm
    return render(request, "ueditor_app/article.html", {'form':form})

# 新增操作
def article_add(request):
    form = ArticleModelForm(request.POST) # 获取表单提交的数据
    # 判断是否有效
    if form.is_valid():
        form.save()
    return redirect('ueditor_app:article_list')

template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新增文章</title>
    {{ form.media }}
</head>
<body>
    <form action="{% url 'ueditor_app:article_add' %}" method="post">
        {% csrf_token %}
        <table>
            {{ form }}
            <tr><td><input type="submit" value="新增"></td></tr>
        </table>
    </form>
</body>
</html>

app_form.py

from django import forms
from ueditor_app.models import Article

class ArticleModelForm(forms.ModelForm):
    class Meta:
        # 可以理解成继承了Article的两个字段
        model = Article
        fields = ['title', 'content']

urls

from django.contrib import admin
from django.urls import path, include
from ueditor_app import views
app_name = 'ueditor_app'
urlpatterns = [
    path('article_list/',views.article_list,name='article_list'),
    path('article/',views.article, name='article'),
    path('article_add/',views.article_add, name="article_add"),
]

在这里插入图片描述

6. 富文本编辑器模板中使用修改文章

views

# 获取要修改的文章，在修改页面渲染
def article_update(request):
    # 获取id
    id = request.GET.get('id')
    # 根据id查询对象
    article = Article.objects.get(pk=id)
    form = ArticleModelForm(instance=article) # 指定对象
    return render(request, 'ueditor_app/article_update.html',{'form':form})

# 点击表单进行修改文章修改文章
def article_update_submit(request):
    # 获取修改文章的id
    id = request.POST.get('id')
    article = Article.objects.get(pk=id)
    # request.POST表单中的文章， article要修改的文章
    form = ArticleModelForm(request.POST,instance=article)
    if form.is_valid():
        form.save()
    return redirect('ueditor_app:article_list')

templates

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    {{ form.media }}
</head>
<body>
    <form action="{% url 'ueditor_app:article_update_submit' %}" method="post">
        {% csrf_token %}
        <input type="hidden" name="id" value="{{form.instance.id}}">
        <table>
            {{form}}
            <tr><td><input type="submit" value="修改"></input></td></tr>
        </table>
    </form>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/80768.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

VUEElement简单介绍。

VUEElement简单介绍。

目录 一、VUE 1、基本介绍 2、Vue 指令 3、生命周期 二、Element 1、基本介绍 2、Element 布局 一、VUE 1、基本介绍 ▶ 概述 Vue 是一套前端框架&#xff0c;免除原生JavaScript中的DOM操作&#xff0c;简化书写。 我们之前也学习过后端的框架 Mybatis &#xff0c;My…
阅读更多...
Linux下C/C++实现类似netstat命令(列出TCP和UDP连接)

Linux下C/C++实现类似netstat命令(列出TCP和UDP连接)

网络连接一般包括最基本的五元组信息(源地址、目标地址、源端口、目标端口、协议号)再加上所属进程信息pid, exe, cmdline等。其中这两项数据大多可直接读取linux /proc目录下的网络状态连接文件/proc/net/tcp、/proc/net/udp), 进程状态目录(/proc/pid/xx)。 Linux 下的/proc…
阅读更多...
Java基于JSP的报刊订阅管理系统

Java基于JSP的报刊订阅管理系统

随着人类的发展&#xff0c;人们对信息的获取方式也越来越多&#xff0c;虽然很多时候人们习惯了通过手机来获取各类信息&#xff0c;但是手机也逐渐的成为了危害人类健康的杀手之一&#xff0c;为了能够让大家回归到健康的生活中来&#xff0c;我开发了本系统&#xff0c;旨在…
阅读更多...
基于jsp+mysql+ssm医药进销存管理系统-计算机毕业设计

基于jsp+mysql+ssm医药进销存管理系统-计算机毕业设计

项目介绍 为了减少传统医药进销存管理的繁杂的工作量&#xff0c;提高医药进销存管理的效率而设计开发了此系统。本系统综合各方面的需求决定采用B/S架构&#xff0c;并利用clipse搭建java开发平台。从而共同完成整个医药的设计开发。系统实现的功能主要包括&#xff1a;用户在…
阅读更多...
java 通过InetAddress获取ip 计算机名称操作

java 通过InetAddress获取ip 计算机名称操作

本文属于java网络编程部分 需要你的网络编程三要素 有所了解 如果您尚未了解 可以先查看我的文章 java网络编程三要素 而 为了更好的获取和使用IP地址 java提供了InetAddress类 来到文档 首先 他在 java的net包下 所以 想用它 是需要导包的 根据文档叙述 InetAddress就是一个…
阅读更多...
python数据分析及可视化（十七）聚宽（双均线分析、因子选股策略、多因子选股策略、均值回归理论、布林带策略、PEG策略、权重收益策略）

python数据分析及可视化（十七）聚宽（双均线分析、因子选股策略、多因子选股策略、均值回归理论、布林带策略、PEG策略、权重收益策略）

聚宽 聚宽是一个做金融量化的网站&#xff0c;https://www.joinquant.com&#xff0c;登录注册&#xff0c;如果你写的文章、策略被别人采纳&#xff0c;增加积分&#xff0c;积分用于免费的回测时长。在我的策略&#xff0c;进入策略列表&#xff0c;里面有做好的策略模板可以…
阅读更多...
Web前端105天-day40-GIT

Web前端105天-day40-GIT

git--版本控制系统(VCS) 目录 前言 一、版本控制系统(VCS) 二、Git中的常用概念 三、Git中的常用命令 四、分支 五、远程仓库(代码托管平台) 总结 前言 day40学习开始 一、版本控制系统(VCS) 用于项目中文件的存储、共享、历史回退、合并、代码追踪文件历史常用版本控制…
阅读更多...
acwing基础课——spfa

acwing基础课——spfa

由数据范围反推算法复杂度以及算法内容 - AcWing 常用代码模板3——搜索与图论 - AcWing 基本思想&#xff1a; 一般单源最短路我们都可以用spfa算法来做&#xff0c;如果过不了再尝试其他算法。 spfa算法就是在bellman-ford算法的基础上就行优化&#xff0c;bellman-算法是每…
阅读更多...
微信小程序|小程序事件

微信小程序|小程序事件

首先，我们在index.wxml中与index.js中添加如下代码： <button bindtap="alert">bindtap</button>Page({data: {},alert: function (event) {wx.showToast({title: 触发成功, // 标题icon: success, // 图标类型，默认successduration: 1500 // 提示窗停…
阅读更多...
贪吃蛇复现-CoCube

贪吃蛇复现-CoCube

需要完成下面所提及博文中里面所有前序案例&#xff1a; 从开环到闭环的旅程-CoCube 在完成如上代码之后&#xff0c;添加一个彩蛋&#xff0c;贪吃蛇的案例。 蓝桥ROS之半自动贪吃龟turtlesim版 基本上就是上述代码复现一下&#xff0c;完全没有难度的。 贪吃蛇复现-CoCubep…
阅读更多...
程序员最关心的问题，我都帮你们问AI了

程序员最关心的问题，我都帮你们问AI了

前言 最近几天互联网刮起了一阵ChatGPT风&#xff0c;起因是OpenAI发布了一个全新的聊天机器人模型—— ChatGPT&#xff0c;可以像人类交谈般回答大部分问题甚至还能直接帮你写代码。 我们先来试试让它帮我们写个代码&#xff1a; 有一丝丝的恐惧&#xff0c;害怕过两年就会失…
阅读更多...
redis—主从，哨兵，集群

redis—主从，哨兵，集群

redis常见的使用方式 Redis的几种常见使用方式包括: Redis单副本;Redis多副本(主从) ;Redis Sentinel (哨兵) ;Redis Cluster;Redis自研。 使用场景: 如果数据量很少&#xff0c;主要是承载高并发高性能的场景&#xff0c;比如缓存一般就几个G的话&#xff0c; 单机足够了。…
阅读更多...
Qt扫盲-QPushButton 理论总结

Qt扫盲-QPushButton 理论总结

QPushButton 理论总结一、简述二、常用要点1. 快捷键相关2. 信号相关3. 默认按钮3. 推荐使用4. 重复功能5. 菜单功能一、简述 PushButton 按钮或CommandButton 按钮应该是图形用户界面中最常用的小部件。按下&#xff08;单击&#xff09;一个按钮就可以命令计算机执行某些操作…
阅读更多...
【1691. 堆叠长方体的最大高度】

【1691. 堆叠长方体的最大高度】

来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 描述&#xff1a; 给你 n 个长方体 cuboids &#xff0c;其中第 i 个长方体的长宽高表示为 cuboids[i] [widthi, lengthi, heighti]&#xff08;下标从 0 开始&#xff09;。请你从 cuboids 选出一个 子集 &#xff0c…
阅读更多...
快速傅里叶变换及Python代码实现

快速傅里叶变换及Python代码实现

一、前言 我想认真写好快速傅里叶变换&#xff08;Fast Fourier Transform&#xff0c;FFT&#xff09;&#xff0c;所以这篇文章会由浅到细&#xff0c;由窄到宽的讲解&#xff0c;但是傅里叶变换对于寻常人并不是很容易理解的&#xff0c;所以对于基础不牢的人我会通过前言普…
阅读更多...
阿里巴巴2022年最新最全500道Java后端面试大全（值得收藏）

阿里巴巴2022年最新最全500道Java后端面试大全（值得收藏）

进大厂是大部分程序员的梦想&#xff0c;而进大厂的门槛也是比较高的&#xff0c;所以这里整理了一份阿里、美团、滴滴、头条等大厂面试大全其中概括的知识点有&#xff1a;Java基础、spring、springmvc、springboot、springcloud、JVM、Tomcat、dubbo、netty、zookeeper共有50…
阅读更多...
Java中四大线程池应用及详解

Java中四大线程池应用及详解

线程池的思想 我们使用线程的时候就去创建一个线程&#xff0c;这样实现起来非常简便&#xff0c;但是就会有一个问题&#xff1a; 如果并发的线程数量很多&#xff0c;并且每个线程都是执行一个时间很短的任务就结束了&#xff0c;这样频繁创建线程就会大大降低系统的效率&a…
阅读更多...
移动网络技术--名词介绍

移动网络技术--名词介绍

GPRS网络制式&#xff08;General Packet Radio Service&#xff09;为“通用分组无线服务”&#xff0c;它是利用“包交换”&#xff08;Packet-Switched&#xff09;的概念所发展出的一套基于GSM系统的无线传输方式。 GGSN&#xff08;Gateway GPRS Supporting Node,网关GPR…
阅读更多...
Nginx入门到弃坑---安装与使用篇（2）

Nginx入门到弃坑---安装与使用篇（2）

1 下载 官网传送门下载传送门点击下载最新Windows-1.23版下载传送门点击下载最新Linux-1.23版下载传送门 2 Windows安装 2.1 环境介绍 下载完成后解压缩 目录如下 配置文件地址&#xff1a;.\nginx-1.23.2\conf\nginx.conf&#xff0c;默认配置的nginx监听的端口为80&…
阅读更多...
监控系列（一）DM8+Prometheus+Grafana搭建

监控系列（一）DM8+Prometheus+Grafana搭建

一、背景 近期进行适配&#xff0c;因用户统一监控平台使用的是promethesugrafanaaltermannger这一套&#xff0c;因此对达梦数据库进行适配对接。 目前主要有两种方式&#xff1a; 1. 部署Dem管理系统对外提供接口推送到prometheus进行采集数据&#xff0c;采集项可查看《De…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023