Django内容增加富文本功能的实例

2024-10-22 05:28:20

缺少富文本，形式过于单一，不便于浏览与阅读。

一种可行的方法记录如下：

1-下载第三方富文本KindEditor,连接http://kindeditor.net/down.php或者baidu。

2-解压到Django项目下的static/js下，如图所示：

默认没有config.js,需要自行建立config.js,其中内容可参照KindEditor官网或以下代码：

KindEditor.ready(function(K) {
    K.create('textarea',{
     width:700,
     height:200,
    });
  });

#注意textarea的参照，width,height分别对文本框宽度、高度设置

3-在你的admin.py中，需要增加富文本的类别代码形式如下：

class ArticleAdmin(admin.ModelAdmin):
  class Media:
   js={
    '/static/js/kindeditor/lang/zh-CN.js',
    '/static/js/kindeditor/kindeditor-all-min.js',
    '/static/js/kindeditor/config.js',
   }

admin.site.register(Article, ArticleAdmin)

4-至此，刷新后就可以看到内容区增加了富文本编辑功能了，如果没有需要对照上述步骤仔细检查下，不熟练的情况下copy代码不要修改

5-最后我这边遇到了一个小坑，增加了格式的页面在浏览时显示了html语法，需要关闭html转义，

方法是在模板中修改：

将{{ article.content }}修改为

{{ article.content|safe }}，另一种方法是：

{% autoescape off %}

{{ article.content }}
{% endautoescape %}

修改后：

6-文件上传还需要设置路径及相关配置，这个下一个记录当中说明。

以上这篇Django内容增加富文本功能的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

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

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

缺少富文本,形式过于单一,不便于浏览与阅读. 一种可行的方法记录如下: 1-下载第三方富文本KindEditor,连接http://kindeditor.net/down.php或者baidu. 2-解压到Django项目下的static/js下,如图所示: 默认没有config.js,需要自行建立config.js,其中内容可参照KindEditor官网或以下代码: KindEditor.ready(function(K) { K.create('textarea',{ width:700,
Kindeditor单独调用单图上传增加预览功能的实例

html代码: <p><input type="hidden" id="url1" name="IDCardPicture1" value="" /> <input type="button" id="image1" value="选择图片" style="width: 150px;height: 30px;" /&g
浅析Yii2集成富文本编辑器redactor实例教程

在上篇文章给大家介绍了如何在yii2中集成百度编辑器umeditor以及如何解决umeditor上传图片问题. 今天我们来谈谈yii2集成另外一个强大好用的富文本编辑器Redactor,个人觉得Redactor比百度编辑器好用哦 Redactor有官方的Yii2插件package,实用性也是很强的. 首先我们不急不躁,先进行安装Redactor. 可以参考https://github.com/yiidoc/yii2-redactor进行安装.有很多新手看不惯英文哈,如果你点击了链接参考了gith
Python ckeditor富文本编辑器代码实例解析

1.安装第三方模块包 pip install django-ckeditor 2.添加应用 INSTALLED_APPS = [ ... 'ckeditor', # 富文本编辑器 'ckeditor_uploader', # 富文本编辑器上传图片模块 ... ] 3. 添加CKEditor设置 # 富文本编辑器ckeditor配置 CKEDITOR_CONFIGS = { 'default': { 'toolbar': 'full', # 工具条功能 'height': 300, # 编辑器高度
Vue.js结合Ueditor富文本编辑器的实例代码

在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器. 前一段时间公司Vue.js项目需要使用UEditor富文本编辑器,在百度上搜索一圈没有发现详细的说明,决定自己尝试,忙活了一天终于搞定了. 1. 总体思路 1.1 模块化 vue的很大的一个优势在于模块化,我们可以通过模块化实现页面和逻辑的复用.所以可以把Ueditor重新封装成一个.vue的模板文件.其他组件通过引入这个模板实现代码复用. 1.2 数据传输首先父组件需要设置编辑器的长度.宽度.初始文本,这些数据可以通过prop
Django添加KindEditor富文本编辑器的使用

KindEditor简介: KindEditor是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框. KindEditor使用JavaScript编写,可以无缝地与 Java..NET.PHP.ASP 等程序集成,比较适合在 CMS.商城.论坛.博客.Wiki.电子邮件等互联网应用上使用. 在Django Admin当中加入KindEditor,这比干巴巴的text
nodejs后台集成ueditor富文本编辑器的实例

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.. 1 下载ueditor nodejs版本 2 复制public目录下面的文件到项目静态资源public文件夹下 3 在项目根目录创建ueditor文件夹要复制进来的内容为 4 在根目录的 ueditor文件夹下执行 npm install 安装此目录下面package.json依赖的模块 5 项目根目录下创建 ue.js 代码部分来自于
Django集成百度富文本编辑器uEditor攻略

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

第一步:以下是核心代码,在页面引用或进行封装都可. 复制代码代码如下: <script language="javascript" type="text/javascript"> function textLimitCheck(thisArea, maxLength, SpanId) { if (thisArea.value.length > maxLength) { thisArea.value = thisArea.value.substri
Django之富文本(获取内容,设置内容方式)

富文本 1.Rich Text Format(RTF) 微软开发的跨平台文档格式,大多数的文字处理软件都能读取和保存RTF文档,其实就是可以添加样式的文档,和HTML有很多相似的地方图示 2.tinymce插件安装插件 pip install django-tinymce 配置插件使用后台管理中 HTMLField 页面中使用 textarea 3.在后台管理中使用配置settings.py文件 INSTALLED_APPS 添加 tinymce 应用 INSTALLED_APPS =

Django内容增加富文本功能的实例

相关推荐

随机推荐