django富文本编辑器的实现示例
最近一段时间都在学django,现在的网站基本都要使用到富文本编辑器,今天就记录下使用django的管理后台的一个富文本编辑器的第三方库 DjangoUeditor
使用方法
1.安装
方法一:将github整个源码包下载回家,在命令行运行:
python setup.py install
方法二:使用pip工具在命令行运行(推荐):
pip install DjangoUeditor
2.在 settings.py的INSTALL_APPS里面增加DjangoUeditor app
INSTALLED_APPS = [ ... 'DjangoUeditor' ]
3.配置urls 在urls.py 里添加路由
# 富文本 path('ueditor/', include('DjangoUeditor.urls')),
4.在 modal 使用
# 引入 UEditorField from DjangoUeditor.models import UEditorField # 使用 class Demo(model.Model): detail = UEditorField(verbose_name=u'详情', width=600, height=300, imagePath="courses/ueditor/", filePath="courses/ueditor/", default='')
5.在template里的HTML 文件里面,把这个字段渲染出来
{% autoescape off %} {{ course.detail }} {% endautoescape %}
6.在 xadmin 中使用
#在该模块的 xadmin.py 中加上 style_fields = {"detail": "ueditor"}
问题
我是在虚拟环境里起的项目,这样安装好之后,报了一个
TypeError: render() got an unexpected keyword argument 'renderer'
解决
需要修改虚拟环境下的:boundfield.py文件: .virtualenvs/虚拟环境文件/lib/python3.X/site-packages/django/forms/boundfield.py
return widget.render( name=self.html_initial_name if only_initial else self.html_name, value=self.value(), attrs=attrs, # renderer=self.form.renderer,(93行处注 释掉,就能正常运行了) )
示例
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
Django添加KindEditor富文本编辑器的使用
KindEditor简介: KindEditor是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框. KindEditor使用JavaScript编写,可以无缝地与 Java..NET.PHP.ASP 等程序集成,比较适合在 CMS.商城.论坛.博客.Wiki.电子邮件等互联网应用上使用. 在Django Admin当中加入KindEditor,这比干巴巴的text
-
django轻松使用富文本编辑器CKEditor的方法
前言 django是一个容易快速上手的web框架,用它来创建内容驱动型的网站(比如独立博客)十分方便.遗憾的是,django并没有提供官方的富文本编辑器,而后者恰好是内容型网站后台管理中不可或缺的控件.ckeditor是一款基于javascript,使用非常广泛的开源网页编辑器.它可以和多种编程语言相结合,python当然也不例外.本文就来介绍一下如何在基于django博客系统如何完美地用上ckeditor. 使用方法 1.安装 pip install django-ckeditor 2.将'c
-
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
-
Django集成百度富文本编辑器uEditor攻略
首先从 ueEditor官网 下载最新版本的包,目前官网上提供了ASP..NET.PHP.JSP版本的,django版本只有一个第三方个人开发的,但看上出配置起来稍微复杂一点. 这里不介绍uEditor的使用方法,也不过多解释uEditor的配置方法,官网上都有详细的文档和API介绍,下载的Demo中也有常用的方法的示例代码,这里主要介绍uEditor和django集成需要修改的地方. 这里下载任意一个版本的都可以,因为我们只需要把关于ueEditor前端部分的抽取出来,至于后端服务器的,我们自
-
django富文本编辑器的实现示例
最近一段时间都在学django,现在的网站基本都要使用到富文本编辑器,今天就记录下使用django的管理后台的一个富文本编辑器的第三方库 DjangoUeditor 使用方法 1.安装 方法一:将github整个源码包下载回家,在命令行运行: python setup.py install 方法二:使用pip工具在命令行运行(推荐): pip install DjangoUeditor 2.在 settings.py的INSTALL_APPS里面增加DjangoUeditor app INSTA
-
Django在admin后台集成TinyMCE富文本编辑器的例子
Django原生的TextField并不友好,集成TinyMCE富文本编辑器 Django版本:1.11.5 TinyMCE版本:4.6.7 第一步:从官网下载TinyMCE https://www.tinymce.com/download/ 注意下载的是下面那个开发包,Dev Package.此包包含TinyMCE社区,开发工具和完整的源代码. 第二步:把压缩包内tinymce目录内的所有文件和文件夹复制到Django项目中static目录内: 第三步:编辑 admin.py 文件: from
-
Django集成富文本编辑器summernote的实现步骤
提到Django的富文本编辑器,大家一定会想到ckeditor和tinyMCE.其实还是有一个富文本编辑器同样优秀,它就是summernote,个人认为功能上不逊于ckeditor,比tinyMCE更强大.Summernote 是一个简单灵活的所见即所得的 HTML 富文本编辑器,基于 jQuery 和 Bootstrap 构建,支持图片上传,提供了大量可定制的选项. 展示效果如下所示: 第一步 安装django-summernote 首先通过pip安装django-summernote,建议安
-
超漂亮的Bootstrap 富文本编辑器summernote
Summernote 是一个简单,灵活,所见即所得(WYSIWYG)的编辑器,基于 jQuery 和 Bootstrap 构建.Summernote 所有主要的操作都支持快捷键,有一个功能强大的 API,它提供了大量的自定义选项的设计(宽,高,有效的项目等等)和功能.对于主要的脚本语言或框架(PHP,Ruby,Django,NodeJS),该项目有提供了集成示例. Bootstrap summernote,用其官网上的介绍就是"Super Simple WYSIWYG editor",
-
vue中使用ueditor富文本编辑器
最近在做后台管理系统的时候遇到要使用富文本编辑器.最后选择了ueditor,我的项目使用 vue+vuex+vue-router+webpack+elementUI的方案完成框架的搭建, 1.下载UEditor官网最新的jsp版本的包,下载完成解压之后得到一个utf8-jsp的文件夹,里面包含的内容如下: 2.将这个文件夹改名为ueditor,并且移入自己项目中的static文件夹下,修改ueditor.config.js文件夹中的内容,如下图: 3.编写子组件 <template> <
-
Vue2.0中集成UEditor富文本编辑器的方法
在vue的'项目中遇到了需要使用富文本编辑器的需求,在github上看了很多vue封装的editor插件,很多对图片上传和视频上传的支持并不是很好,最终还是决定使用UEditor. 这类的文章网上有很多,我进行了摸索.手写代码.汇总.排版,形成了这篇文章. 下载对应的UEditor源码 首先,去官网上下载UEditor的源码,根据你后台语言的不同下载对应的版本(PHP.Asp..Net.Jsp). http://ueditor.baidu.com/website/download.html 下载
-
Python ckeditor富文本编辑器代码实例解析
1.安装第三方模块包 pip install django-ckeditor 2.添加应用 INSTALLED_APPS = [ ... 'ckeditor', # 富文本编辑器 'ckeditor_uploader', # 富文本编辑器上传图片模块 ... ] 3. 添加CKEditor设置 # 富文本编辑器ckeditor配置 CKEDITOR_CONFIGS = { 'default': { 'toolbar': 'full', # 工具条功能 'height': 300, # 编辑器高度
-
ASP.NET网站使用Kindeditor富文本编辑器配置步骤
1. 下载编辑器 下载 KindEditor 最新版本,下载页面: http://www.kindsoft.net/down.php 2. 部署编辑器 解压 kindeditor-x.x.x.zip 文件,将editor文件夹复制到web目录下 3.在网页中加入(ValidateRequest="false") 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" Validat
-
Vue.js结合Ueditor富文本编辑器的实例代码
在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器. 前一段时间公司Vue.js项目需要使用UEditor富文本编辑器,在百度上搜索一圈没有发现详细的说明,决定自己尝试,忙活了一天终于搞定了. 1. 总体思路 1.1 模块化 vue的很大的一个优势在于模块化,我们可以通过模块化实现页面和逻辑的复用.所以可以把Ueditor重新封装成一个.vue的模板文件.其他组件通过引入这个模板实现代码复用. 1.2 数据传输 首先父组件需要设置编辑器的长度.宽度.初始文本,这些数据可以通过prop
-
iOS实现富文本编辑器的方法详解
前言 富文本编辑器不同于文本编辑器,国内做的比较好的比如有百度的UEditor和kindEditor.但是这两个也有它的缺点:界面过于复杂.不够简洁.UI设计也比较落后.不够轻量化,这篇文章我们将给大家介绍利用iOS如何实现富文本编辑器. 实现的效果 解决思路 采用webview加载一个本地html文件,该html内部编写好js方法用于与oc相互调用 最终输出该富文本字符串传输给服务器 为什么选择这样的方式 服务端要求我最终返回的数据格式为: { @"Id":"当时新建模板这
随机推荐
- JAVA基础之继承(inheritance)详解
- iOS实现导航栏透明示例代码
- java中读取配置文件中数据的具体方法
- jQuery Easyui 验证两次密码输入是否相等
- JavaScript实现的浮动层框架用法实例分析
- JS实现完全语义化的网页选项卡效果代码
- 跟我学Laravel之路由
- PHP中对于浮点型的数据需要用不同的方法解决
- sails框架的学习指南
- 密码知识教程二
- 关于Vue Webpack2单元测试示例详解
- AJAX javascript的跨域访问执行
- Java使用设计模式中的工厂方法模式实例解析
- Shell脚本对比两个文本文件找出不同行的2个方法分享
- 类似天猫商品详情随浏览器移动的示例代码
- JavaScript String(字符串)对象的简单实例(推荐)
- Tomcat Cannot assign requested address: JVM_Bind 非端口占用冲突
- Laravel中Trait的用法实例详解
- Android编程实现圆角边框的方法
- Tomcat实现多域名访问详解