django 整合富文本编辑器 tiny_mce

2023-11-02 13:30

本文主要是介绍django 整合富文本编辑器 tiny_mce,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在整合富文本编辑器的过程中,遇到过一些问题,但是总算是好了,遇到的问题主要还是心情不太好,所有有点不知所错,开始之前也没好好分析一下问题就开始瞎弄,所以花了很长时间,现在的状态是可以在admin后台中使用富文本编辑,前台的还没写

在整个过程中,不需要做太多,只要到官网 http://www.tinymce.com/download/download.php 下载代码放到服务器上,在注册model的时候配好admin的行为就ok了,具体步骤如下

一;下载代码

刚开始使用的是tinymce_4.1.6.zip,但是过程中报很多文件找不到,就下了tinymce_3.5.11.zip版本

二;服务器目录

[root@localhost timtest2]# tree . -L 3
.
├── db.sqlite3
├── edit
│   ├── admin.py
│   ├── admin.pyc
│   ├── __init__.py
│   ├── __init__.pyc
│   ├── models.py
│   ├── models.pyc
│   ├── tests.py
│   └── views.py
├── manage.py
├── media
│   └── js
│       ├── textareas.js
│       ├── textareas.js.bak
│       ├── tiny_mce                     #这是提取出来的代码
│       └── tinymce_3.5.11.zip
└── timtest2├── __init__.py├── __init__.pyc├── settings.py├── settings.pyc├── urls.py├── urls.pyc├── wsgi.py└── wsgi.pyc

[root@localhost js]# tree tiny_mce/ -L 1
tiny_mce/
├── langs
├── license.txt
├── plugins
├── themes
├── tiny_mce.js
├── tiny_mce_popup.js
├── tiny_mce_src.js
└── utils

三;models.py 文件

[root@localhost edit]# more models.py
from django.db import models
from django.contrib import admin# Create your models here.
class Blog(models.Model):pub_date = models.DateField()headline = models.CharField(max_length=200)content = models.TextField()
class BlogAdmin(admin.ModelAdmin):class Media:js = ('/media/js/tiny_mce/tiny_mce.js','/media/js/textareas.js',)[root@localhost edit]# 

四:admin.py 文件

[root@localhost edit]# more admin.py
from django.contrib import admin# Register your models here.
import modelsadmin.site.register(models.Blog,models.BlogAdmin)
[root@localhost edit]# 


五:textareas.js 文件

[root@localhost js]# more textareas.js
tinyMCE.init({// General optionsmode : "textareas",theme : "advanced",plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fulls
creen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",// Theme optionstheme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselec
t,fullscreen,code",theme_advanced_buttons2 : "cut,copy,paste,pastetext,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,|,insertdate,inserttim
e,preview,|,forecolor,backcolor",theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl",theme_advanced_toolbar_location : "top",theme_advanced_toolbar_align : "left",theme_advanced_statusbar_location : "bottom",theme_advanced_resizing : true,// Example content CSS (should be your site CSS)//content_css : "/css/style.css",template_external_list_url : "lists/template_list.js",external_link_list_url : "lists/link_list.js",external_image_list_url : "lists/image_list.js",media_external_list_url : "lists/media_list.js",// Style formatsstyle_formats : [{title : 'Bold text', inline : 'strong'},{title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},{title : 'Help', inline : 'strong', classes : 'help'},{title : 'Table styles'},{title : 'Table row 1', selector : 'tr', classes : 'tablerow'}],width: '700',height: '400'});
[root@localhost js]# 


六:urls.py 文件
[root@localhost timtest2]# more urls.py
from django.conf.urls import patterns, include, urlfrom django.contrib import admin
admin.autodiscover()urlpatterns = patterns('',# Examples:# url(r'^$', 'timtest2.views.home', name='home'),# url(r'^blog/', include('blog.urls')),(r'^media/(?P<path>.*)$', 'django.views.static.serve',{'document_root': 'media'}),url(r'^admin/', include(admin.site.urls)),
)
[root@localhost timtest2]# 

可以通过1270.0.1/media/js/textareas.js 访问到文件

七:settings.py文件

[root@localhost timtest2]# more settings.py
"""
Django settings for timtest2 project.For more information on this file, see
https://docs.djangoproject.com/en/1.6/topics/settings/For the full list of settings and their values, see
https://docs.djangoproject.com/en/1.6/ref/settings/
"""# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
import os
BASE_DIR = os.path.dirname(os.path.dirname(__file__))# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/1.6/howto/deployment/checklist/# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '4vid)wp*w-6%+am9p*zww&wn2cfetjodjo)6c-*dojn)e1xa+l'# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = TrueTEMPLATE_DEBUG = TrueALLOWED_HOSTS = []# Application definitionINSTALLED_APPS = ('django.contrib.admin','django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.messages','django.contrib.staticfiles','edit',
)MIDDLEWARE_CLASSES = ('django.contrib.sessions.middleware.SessionMiddleware','django.middleware.common.CommonMiddleware','django.middleware.csrf.CsrfViewMiddleware','django.contrib.auth.middleware.AuthenticationMiddleware','django.contrib.messages.middleware.MessageMiddleware','django.middleware.clickjacking.XFrameOptionsMiddleware',
)ROOT_URLCONF = 'timtest2.urls'WSGI_APPLICATION = 'timtest2.wsgi.application'# Database
# https://docs.djangoproject.com/en/1.6/ref/settings/#databasesDATABASES = {'default': {'ENGINE': 'django.db.backends.sqlite3','NAME': os.path.join(BASE_DIR, 'db.sqlite3'),}
}# Internationalization
# https://docs.djangoproject.com/en/1.6/topics/i18n/LANGUAGE_CODE = 'en-us'TIME_ZONE = 'UTC'USE_I18N = TrueUSE_L10N = TrueUSE_TZ = True# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.6/howto/static-files/STATIC_URL = '/static/'
[root@localhost timtest2]#

没有改过

效果演示












参考资源:
http://imtx.me/archives/215.html      让Django支持富文本编辑器:Tiny_mce篇
http://sleepycat.org/blog/25/                Django Admin 使用 TinyMCE 富文本编辑器

http://www.wutianqi.com/?p=3312Django后台整合TinyMCE富文本编辑器 这个厉害


http://my.oschina.net/zhajiang/blog/56814  这个讲解的比较全


这篇关于django 整合富文本编辑器 tiny_mce的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/330911

相关文章

springboot项目中整合高德地图的实践

《springboot项目中整合高德地图的实践》:本文主要介绍springboot项目中整合高德地图的实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一:高德开放平台的使用二:创建数据库(我是用的是mysql)三:Springboot所需的依赖(根据你的需求再

SpringBoot整合Flowable实现工作流的详细流程

《SpringBoot整合Flowable实现工作流的详细流程》Flowable是一个使用Java编写的轻量级业务流程引擎,Flowable流程引擎可用于部署BPMN2.0流程定义,创建这些流程定义的... 目录1、流程引擎介绍2、创建项目3、画流程图4、开发接口4.1 Java 类梳理4.2 查看流程图4

Springboot整合Redis主从实践

《Springboot整合Redis主从实践》:本文主要介绍Springboot整合Redis主从的实例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录前言原配置现配置测试LettuceConnectionFactory.setShareNativeConnect

使用SpringBoot整合Sharding Sphere实现数据脱敏的示例

《使用SpringBoot整合ShardingSphere实现数据脱敏的示例》ApacheShardingSphere数据脱敏模块,通过SQL拦截与改写实现敏感信息加密存储,解决手动处理繁琐及系统改... 目录痛点一:痛点二:脱敏配置Quick Start——Spring 显示配置:1.引入依赖2.创建脱敏

SpringBoot整合Apache Flink的详细指南

《SpringBoot整合ApacheFlink的详细指南》这篇文章主要为大家详细介绍了SpringBoot整合ApacheFlink的详细过程,涵盖环境准备,依赖配置,代码实现及运行步骤,感兴趣的... 目录1. 背景与目标2. 环境准备2.1 开发工具2.2 技术版本3. 创建 Spring Boot

Spring Boot 整合 Apache Flink 的详细过程

《SpringBoot整合ApacheFlink的详细过程》ApacheFlink是一个高性能的分布式流处理框架,而SpringBoot提供了快速构建企业级应用的能力,下面给大家介绍Spri... 目录Spring Boot 整合 Apache Flink 教程一、背景与目标二、环境准备三、创建项目 & 添

SpringBoot整合Sa-Token实现RBAC权限模型的过程解析

《SpringBoot整合Sa-Token实现RBAC权限模型的过程解析》:本文主要介绍SpringBoot整合Sa-Token实现RBAC权限模型的过程解析,本文给大家介绍的非常详细,对大家的学... 目录前言一、基础概念1.1 RBAC模型核心概念1.2 Sa-Token核心功能1.3 环境准备二、表结

MQTT SpringBoot整合实战教程

《MQTTSpringBoot整合实战教程》:本文主要介绍MQTTSpringBoot整合实战教程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考... 目录MQTT-SpringBoot创建简单 SpringBoot 项目导入必须依赖增加MQTT相关配置编写

MybatisPlus3.3.1整合clickhouse的过程

《MybatisPlus3.3.1整合clickhouse的过程》:本文主要介绍MybatisPlus3.3.1整合clickhouse的过程,本文给大家介绍的非常详细,对大家的学习或工作具有一定... 前言ClickHouse是俄罗斯Yandex发布的一款数据分析型数据库支持sql语法,详情可以访问官网,

Spring Boot 整合 Redis 实现数据缓存案例详解

《SpringBoot整合Redis实现数据缓存案例详解》Springboot缓存,默认使用的是ConcurrentMap的方式来实现的,然而我们在项目中并不会这么使用,本文介绍SpringB... 目录1.添加 Maven 依赖2.配置Redis属性3.创建 redisCacheManager4.使用Sp