Django框架使用富文本编辑器Uedit的方法分析

2024-12-02 07:26:19

本文实例讲述了Django框架使用富文本编辑器Uedit的方法。分享给大家供大家参考，具体如下：

Uedit是百度一款非常好用的富文本编辑器

一、安装及基本配置

官方GitHub（有详细的安装使用教程）：https://github.com/zhangfisher/DjangoUeditor

1. settings.py

INSTALLED_APPS = [
  ...
  'DjangoUeditor',
  ...
]

2. 配置urls

from django.conf.urls import url, include
urlpatterns = [
# 富文本相关url
  url(r'^ueditor/', include('DjangoUeditor.urls')),
]

3. 字段信息

在需要使用富文本的字段所在的models.py中

from DjangoUeditor.models import UEditorField
class Articles(models.Model):
  ...
  content = UEditorField(width=1200, height=600, imagePath="article/ueditor/",
              filePath="article/ueditor/",verbose_name=u"文章内容")
  ...

注意，在要使用ueditor的字段所在adminx.py的类中，添加

# 这样就指定了course的detail字段使用ueditor富文本编辑器
class ArticlesAdmin(object):
  ...
  style_fields = {"content":"ueditor"}

二、Ueditor插件制作

1. 插件代码

在extra_apps.xadmin.plugins中新建ueditor.py

import xadmin
from xadmin.views import BaseAdminPlugin, CreateAdminView, ModelFormAdminView, UpdateAdminView
from DjangoUeditor.models import UEditorField
from DjangoUeditor.widgets import UEditorWidget
from django.conf import settings
class XadminUEditorWidget(UEditorWidget):
  def __init__(self, **kwargs):
    self.ueditor_options=kwargs
    self.Media.js = None
    super(XadminUEditorWidget, self).__init__(kwargs)
class UeditorPlugin(BaseAdminPlugin):
  def get_field_style(self, attrs, db_field, style, **kwargs):
    if style == 'ueditor':
      if isinstance(db_field, UEditorField):
        widget = db_field.formfield().widget
        param = {}
        param.update(widget.ueditor_settings)
        param.update(widget.attrs)
        return {'widget': XadminUEditorWidget(**param)}
    return attrs
  def block_extrahead(self, context, nodes):
    js = '<script type="text/javascript" src="%s"></script>' % (settings.STATIC_URL + "ueditor/ueditor.config.js")
    js += '<script type="text/javascript" src="%s"></script>' % (settings.STATIC_URL + "ueditor/ueditor.all.min.js")
    nodes.append(js)
xadmin.site.register_plugin(UeditorPlugin, UpdateAdminView)
xadmin.site.register_plugin(UeditorPlugin, CreateAdminView)

2. xadmin中注册插件

在extra_apps.xadmin.plugins.__init__.py中添加

PLUGINS = (
  ...
  'ueditor',
)

友情提醒

在Django中使用富文本编辑器

在HTML页面中，Django处于安全考虑，将文本内容默认转义，我们需要关闭

来正常输出我们的文章

{% autoescape off %}
{{ article.abstract }}
{% endautoescape %}

记录一下，空格的转义字符分为如下几种：

1. &160#;不断行的空白（1个字符宽度）

2. &8194#;半个空白（1个字符宽度）

3. &8195#;一个空白（2个字符宽度）

4. &8201#;窄空白（小于1个字符宽度）

平时一般用的是但是在中文中也许有时候更适合用

希望本文所述对大家基于Django框架的Python程序设计有所帮助。

django轻松使用富文本编辑器CKEditor的方法

前言 django是一个容易快速上手的web框架,用它来创建内容驱动型的网站(比如独立博客)十分方便.遗憾的是,django并没有提供官方的富文本编辑器,而后者恰好是内容型网站后台管理中不可或缺的控件.ckeditor是一款基于javascript,使用非常广泛的开源网页编辑器.它可以和多种编程语言相结合,python当然也不例外.本文就来介绍一下如何在基于django博客系统如何完美地用上ckeditor. 使用方法 1.安装 pip install django-ckeditor 2.将'c
将Django框架和遗留的Web应用集成的方法

同由其他技术驱动的应用一样,在相同的Web服务器上运行Django应用也是可行的. 最简单直接的办法就是利用Apaches配置文件httpd.conf,将不同的URL类型分发至不同的技术. 关键在于只有在您的httpd.conf文件中进行了相关定义,Django对某个特定的URL类型的驱动才会被激活. <Location "/"> SetHandler python-program PythonHandler django.core.handlers.modpython S
django框架如何集成celery进行开发

上一篇已经介绍了celery的基本知识,本篇以一个小项目为例,详细说明django框架如何集成celery进行开发. 本系列文章的开发环境: window 7 + python2.7 + pycharm5 + celery3.1.25 + django1.9.4 一.项目功能在web应用中,用户触发一个操作,执行后台处理程序,这个程序需要执行很长时间才能返回结果.怎样才能不阻塞http请求,不让用户等待从而提高用户体验呢?这是本例需要解决的问题.具体设计是:用两个网页进行展示,一个网页是提交加
Django自定义插件实现网站登录验证码功能

前言网站登录的时候我们常常会看到随机的验证码需要输入后台验证,如图: 现在我们来实现在Django中通过自定制插件来实现随机验证 check_code.py 基于PIL生成一个带验证码的图片和验证码,生成验证码图片需要Monaco.ttf字体(重要),可按自己要求更改check_code中的字体和字体文件位置 #!/usr/bin/env python # -*- coding:utf-8 -*- import random from PIL import Image, ImageDraw,
python django集成cas验证系统

加入cas的好处 cas是什么东西就不多说了,简而言之就是单点登陆系统,一处登陆,全网有权限的系统均可以访问. 一次登陆,多个系统互通 cas一般均放置在内网,加入cas验证则必须要求用户走vpn访问,提高安全性; cas可和域控等系统结合,密码定时过期; 基本认证统一走cas控制,减去开帐号等麻烦事; django 如何使用cas验证 django 的好处就是支持的包多,网上已经有大神做好的相关的app,直接下载.安装就可以了. 我们要做的就是下载.解压拷贝,略微配置下就可以跑了. 至于安装也
Django admin美化插件suit使用示例

本文主要对Django美化插件做一个简单介绍,具体如下. Django Suit 效果使用前django页面使用后django页面安装官方文档 http://django-suit.readthedocs.io/en/develop/index.html pip install django-suit 环境:python2.7.10,django1.9.8 配置使用 settings设置 INSTALLED_APPS = [ 'suit', # 添加suit支持 'django.cont
对比分析Django的Q查询及AngularJS的Datatables分页插件

使用Q查询,首先要导入Q模块: from django.db.models import Q 可以组合使用&,|操作符用于多个Q的对象,产生一个新的Q对象,Q对象也可以用~操作符放在前面表示否定,如下例所示: if search: keywords_list = search.split(' ') query_list = [Q(status__icontains=get_success_fail_status(keyword)) if get_success_fail_keyword_stat
Django集成百度富文本编辑器uEditor攻略

首先从 ueEditor官网下载最新版本的包,目前官网上提供了ASP..NET.PHP.JSP版本的,django版本只有一个第三方个人开发的,但看上出配置起来稍微复杂一点. 这里不介绍uEditor的使用方法,也不过多解释uEditor的配置方法,官网上都有详细的文档和API介绍,下载的Demo中也有常用的方法的示例代码,这里主要介绍uEditor和django集成需要修改的地方. 这里下载任意一个版本的都可以,因为我们只需要把关于ueEditor前端部分的抽取出来,至于后端服务器的,我们自
python3.4下django集成使用xadmin后台的方法

环境:window7 x64.python3.4.django1.10 一.pip install xadmin安装报错 1.使用pip install xadmin命令安装可能报如下错误: 2.解决方案亲测使用 pip install git+git://github.com/sshwsfc/xadmin.git 命令可以正常使用. 二.django项目中配置xadmin settings.py配置 INSTALLED_APPS = [ 'django.contrib.admin', 'dj
Django框架使用富文本编辑器Uedit的方法分析

本文实例讲述了Django框架使用富文本编辑器Uedit的方法.分享给大家供大家参考,具体如下: Uedit是百度一款非常好用的富文本编辑器一.安装及基本配置官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor 1. settings.py INSTALLED_APPS = [ ... 'DjangoUeditor', ... ] 2. 配置urls from django.conf.urls import url
微信小程序整合使用富文本编辑器的方法详解

本文实例讲述了微信小程序整合使用富文本编辑器的方法.分享给大家供大家参考,具体如下: 使用WxParse插件实现小程序的富文本显示 ,下载地址:富文本插件WxParse 具体使用步骤: 1. 复制插件文件夹到项目根目录,emojis是表情包,可选择性删除 2. 在.js文件中引入WxParse模块 var WxParse= require('../../../wxParse/wxParse.js'); 3. 在.wxss文件中引入WxParse.wxss样式,也可以在app.wxss中引入 @i
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)

使用教程(注意细看总结部分,写了几点,希望有所帮助): 1.安装插件:npm install vue-quill-editor 2.安装插件依赖:npm install quill 3.main.js文件中引入: import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' impor
使用富文本编辑器上传图片实例详解

富文本编辑器上传图片一.导入kindeditor的js <script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script> <script type="text/javascript" charset="utf-8" src=&qu
Vue+Element使用富文本编辑器的示例代码

富文本编辑器在任何项目中都会用到,在Element中我们推荐vue-quill-editor组件,现在我就把它提供给大家,希望对大家有用.具体截图如下: 安装编辑器组件具体方法:npm install vue-quill-editor --save 编写组件首先我们在components文件夹里创建ue.vue组件,效果图如下: 组件  <template> <div> <script id="editor"
Vue 中使用富文本编译器wangEditor3的方法

富文本编译器在vue中的使用在开发的过程中由于某些特殊需求,被我们使用,今天我就简单讲一讲如何在vue中使用wangEditor3 首先讲一下简单的使用. 1.使用npm安装 npm install wangeditor --save 2.vue页面代码如下 <template> <section> <div id="div5"></div> <div id="div6"></div> <
Python中Django框架利用url来控制登录的方法

本文实例讲述了Python中Django框架利用url来控制登录的方法.分享给大家供大家参考.具体如下: from django.conf.urls.defaults import patterns,url #or use login_required from django.contrib.admin.views.decorators import staff_member_required def login_url(regex, view, *p,**args): """
Django框架基础模板标签与filter使用方法详解

本文实例讲述了Django框架基础模板标签与filter使用方法.分享给大家供大家参考,具体如下: 一.基本的模板语言 1.变量 {{ }} 1.1.进入Django shell 环境 python manage.py shell 1.2.Context.Template 模块的基本使用 from django.template import Context,Template t = Template('My name id {{ name }}') c = Context({'name':'S
django框架模型层功能、组成与用法分析

本文实例讲述了django框架模型层功能.组成与用法.分享给大家供大家参考,具体如下: Django models是Django框架自定义的一套独特的ORM技术. 使用该层开发的首要任务就是定义模型类以及属性.每个模型都可以被映射为数据库中的一个数据表,而类属性被映射为为数据字段. from django.db import models class ModelName(models.Model): field1 = models.xxfield(..) field2 = models.xxfi

Django框架使用富文本编辑器Uedit的方法分析

相关推荐

随机推荐