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

相关文章

Spring Boot 整合 SSE(Server-Sent Events)实战案例(全网最全)

《SpringBoot整合SSE(Server-SentEvents)实战案例(全网最全)》本文通过实战案例讲解SpringBoot整合SSE技术,涵盖实现原理、代码配置、异常处理及前端交互,... 目录Spring Boot 整合 SSE(Server-Sent Events)1、简述SSE与其他技术的对

Java整合Protocol Buffers实现高效数据序列化实践

《Java整合ProtocolBuffers实现高效数据序列化实践》ProtocolBuffers是Google开发的一种语言中立、平台中立、可扩展的结构化数据序列化机制,类似于XML但更小、更快... 目录一、Protocol Buffers简介1.1 什么是Protocol Buffers1.2 Pro

springboot整合mqtt的步骤示例详解

《springboot整合mqtt的步骤示例详解》MQTT(MessageQueuingTelemetryTransport)是一种轻量级的消息传输协议,适用于物联网设备之间的通信,本文介绍Sprin... 目录1、引入依赖包2、yml配置3、创建配置4、自定义注解6、使用示例使用场景:mqtt可用于消息发

Python库 Django 的简介、安装、用法入门教程

《Python库Django的简介、安装、用法入门教程》Django是Python最流行的Web框架之一,它帮助开发者快速、高效地构建功能强大的Web应用程序,接下来我们将从简介、安装到用法详解,... 目录一、Django 简介 二、Django 的安装教程 1. 创建虚拟环境2. 安装Django三、创

Django中的函数视图和类视图以及路由的定义方式

《Django中的函数视图和类视图以及路由的定义方式》Django视图分函数视图和类视图,前者用函数处理请求,后者继承View类定义方法,路由使用path()、re_path()或url(),通过in... 目录函数视图类视图路由总路由函数视图的路由类视图定义路由总结Django允许接收的请求方法http

Django HTTPResponse响应体中返回openpyxl生成的文件过程

《DjangoHTTPResponse响应体中返回openpyxl生成的文件过程》Django返回文件流时需通过Content-Disposition头指定编码后的文件名,使用openpyxl的sa... 目录Django返回文件流时使用指定文件名Django HTTPResponse响应体中返回openp

Django开发时如何避免频繁发送短信验证码(python图文代码)

《Django开发时如何避免频繁发送短信验证码(python图文代码)》Django开发时,为防止频繁发送验证码,后端需用Redis限制请求频率,结合管道技术提升效率,通过生产者消费者模式解耦业务逻辑... 目录避免频繁发送 验证码1. www.chinasem.cn避免频繁发送 验证码逻辑分析2. 避免频繁

SpringBoot整合Dubbo+ZK注册失败的坑及解决

《SpringBoot整合Dubbo+ZK注册失败的坑及解决》使用Dubbo框架时,需在公共pom添加依赖,启动类加@EnableDubbo,实现类用@DubboService替代@Service,配... 目录1.先看下公共的pom(maven创建的pom工程)2.启动类上加@EnableDubbo3.实

SpringBoot整合(ES)ElasticSearch7.8实践

《SpringBoot整合(ES)ElasticSearch7.8实践》本文详细介绍了SpringBoot整合ElasticSearch7.8的教程,涵盖依赖添加、客户端初始化、索引创建与获取、批量插... 目录SpringBoot整合ElasticSearch7.8添加依赖初始化创建SpringBoot项

SpringSecurity整合redission序列化问题小结(最新整理)

《SpringSecurity整合redission序列化问题小结(最新整理)》文章详解SpringSecurity整合Redisson时的序列化问题,指出需排除官方Jackson依赖,通过自定义反序... 目录1. 前言2. Redission配置2.1 RedissonProperties2.2 Red