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整合OpenFeign的完整指南

《SpringBoot整合OpenFeign的完整指南》OpenFeign是由Netflix开发的一个声明式Web服务客户端,它使得编写HTTP客户端变得更加简单,本文为大家介绍了SpringBoot... 目录什么是OpenFeign环境准备创建 Spring Boot 项目添加依赖启用 OpenFeig

SpringBoot整合mybatisPlus实现批量插入并获取ID详解

《SpringBoot整合mybatisPlus实现批量插入并获取ID详解》这篇文章主要为大家详细介绍了SpringBoot如何整合mybatisPlus实现批量插入并获取ID,文中的示例代码讲解详细... 目录【1】saveBATch(一万条数据总耗时:2478ms)【2】集合方式foreach(一万条数

Spring Boot 整合 SSE的高级实践(Server-Sent Events)

《SpringBoot整合SSE的高级实践(Server-SentEvents)》SSE(Server-SentEvents)是一种基于HTTP协议的单向通信机制,允许服务器向浏览器持续发送实... 目录1、简述2、Spring Boot 中的SSE实现2.1 添加依赖2.2 实现后端接口2.3 配置超时时

springboot整合阿里云百炼DeepSeek实现sse流式打印的操作方法

《springboot整合阿里云百炼DeepSeek实现sse流式打印的操作方法》:本文主要介绍springboot整合阿里云百炼DeepSeek实现sse流式打印,本文给大家介绍的非常详细,对大... 目录1.开通阿里云百炼,获取到key2.新建SpringBoot项目3.工具类4.启动类5.测试类6.测

一文详解如何从零构建Spring Boot Starter并实现整合

《一文详解如何从零构建SpringBootStarter并实现整合》SpringBoot是一个开源的Java基础框架,用于创建独立、生产级的基于Spring框架的应用程序,:本文主要介绍如何从... 目录一、Spring Boot Starter的核心价值二、Starter项目创建全流程2.1 项目初始化(

Spring Boot 整合 MyBatis 连接数据库及常见问题

《SpringBoot整合MyBatis连接数据库及常见问题》MyBatis是一个优秀的持久层框架,支持定制化SQL、存储过程以及高级映射,下面详细介绍如何在SpringBoot项目中整合My... 目录一、基本配置1. 添加依赖2. 配置数据库连接二、项目结构三、核心组件实现(示例)1. 实体类2. Ma

Django序列化中SerializerMethodField的使用详解

《Django序列化中SerializerMethodField的使用详解》:本文主要介绍Django序列化中SerializerMethodField的使用,具有很好的参考价值,希望对大家有所帮... 目录SerializerMethodField的基本概念使用SerializerMethodField的

SpringBoot整合jasypt实现重要数据加密

《SpringBoot整合jasypt实现重要数据加密》Jasypt是一个专注于简化Java加密操作的开源工具,:本文主要介绍详细介绍了如何使用jasypt实现重要数据加密,感兴趣的小伙伴可... 目录jasypt简介 jasypt的优点SpringBoot使用jasypt创建mapper接口配置文件加密

SpringBoot整合MybatisPlus的基本应用指南

《SpringBoot整合MybatisPlus的基本应用指南》MyBatis-Plus,简称MP,是一个MyBatis的增强工具,在MyBatis的基础上只做增强不做改变,下面小编就来和大家介绍一下... 目录一、MyBATisPlus简介二、SpringBoot整合MybatisPlus1、创建数据库和

Spring Boot整合消息队列RabbitMQ的实现示例

《SpringBoot整合消息队列RabbitMQ的实现示例》本文主要介绍了SpringBoot整合消息队列RabbitMQ的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的... 目录RabbitMQ 简介与安装1. RabbitMQ 简介2. RabbitMQ 安装Spring