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

相关文章

Django调用外部Python程序的完整项目实战

《Django调用外部Python程序的完整项目实战》Django是一个强大的PythonWeb框架,它的设计理念简洁优雅,:本文主要介绍Django调用外部Python程序的完整项目实战,文中通... 目录一、为什么 Django 需要调用外部 python 程序二、三种常见的调用方式方式 1:直接 im

SpringBoot整合Zuul全过程

《SpringBoot整合Zuul全过程》Zuul网关是微服务架构中的重要组件,具备统一入口、鉴权校验、动态路由等功能,它通过配置文件进行灵活的路由和过滤器设置,支持Hystrix进行容错处理,还提供... 目录Zuul网关的作用Zuul网关的应用1、网关访问方式2、网关依赖注入3、网关启动器4、网关全局变

SpringBoot整合 Quartz实现定时推送实战指南

《SpringBoot整合Quartz实现定时推送实战指南》文章介绍了SpringBoot中使用Quartz动态定时任务和任务持久化实现多条不确定结束时间并提前N分钟推送的方案,本文结合实例代码给大... 目录前言一、Quartz 是什么?1、核心定位:解决什么问题?2、Quartz 核心组件二、使用步骤1

SpringBoot整合AOP及使用案例实战

《SpringBoot整合AOP及使用案例实战》本文详细介绍了SpringAOP中的切入点表达式,重点讲解了execution表达式的语法和用法,通过案例实战,展示了AOP的基本使用、结合自定义注解以... 目录一、 引入依赖二、切入点表达式详解三、案例实战1. AOP基本使用2. AOP结合自定义注解3.

SpringBoot简单整合ElasticSearch实践

《SpringBoot简单整合ElasticSearch实践》Elasticsearch支持结构化和非结构化数据检索,通过索引创建和倒排索引文档,提高搜索效率,它基于Lucene封装,分为索引库、类型... 目录一:ElasticSearch支持对结构化和非结构化的数据进行检索二:ES的核心概念Index:

SpringBoot项目整合Netty启动失败的常见错误总结

《SpringBoot项目整合Netty启动失败的常见错误总结》本文总结了SpringBoot集成Netty时常见的8类问题及解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参... 目录一、端口冲突问题1. Tomcat与Netty端口冲突二、主线程被阻塞问题1. Netty启动阻

SpringBoot+Vue3整合SSE实现实时消息推送功能

《SpringBoot+Vue3整合SSE实现实时消息推送功能》在日常开发中,我们经常需要实现实时消息推送的功能,这篇文章将基于SpringBoot和Vue3来简单实现一个入门级的例子,下面小编就和大... 目录前言先大概介绍下SSE后端实现(SpringBoot)前端实现(vue3)1. 数据类型定义2.

SpringBoot整合Kafka启动失败的常见错误问题总结(推荐)

《SpringBoot整合Kafka启动失败的常见错误问题总结(推荐)》本文总结了SpringBoot项目整合Kafka启动失败的常见错误,包括Kafka服务器连接问题、序列化配置错误、依赖配置问题、... 目录一、Kafka服务器连接问题1. Kafka服务器无法连接2. 开发环境与生产环境网络不通二、序

SpringBoot整合Apache Spark实现一个简单的数据分析功能

《SpringBoot整合ApacheSpark实现一个简单的数据分析功能》ApacheSpark是一个开源的大数据处理框架,它提供了丰富的功能和API,用于分布式数据处理、数据分析和机器学习等任务... 目录第一步、添加android依赖第二步、编写配置类第三步、编写控制类启动项目并测试总结ApacheS

Spring Boot整合Redis注解实现增删改查功能(Redis注解使用)

《SpringBoot整合Redis注解实现增删改查功能(Redis注解使用)》文章介绍了如何使用SpringBoot整合Redis注解实现增删改查功能,包括配置、实体类、Repository、Se... 目录配置Redis连接定义实体类创建Repository接口增删改查操作示例插入数据查询数据删除数据更