django + TinyMCE 实现富文本编辑器

最新推荐文章于 2024-07-16 17:59:12 发布

Mchange

最新推荐文章于 2024-07-16 17:59:12 发布

阅读量2.6k

点赞数

分类专栏： django python

本文链接：https://blog.csdn.net/Mchange/article/details/8111374

版权

python 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

django

3 篇文章 0 订阅

订阅专栏

本文介绍了如何在Django 1.4项目中集成TinyMCE富文本编辑器。步骤包括下载TinyMCE，创建static目录存放静态文件，修改models.py添加TextField字段，配置settings，并检查页面源代码确保JS文件正确引入。

摘要由CSDN通过智能技术生成

（django 1.4）

首先下载TinyMCE，加压后提出文件，目录为

在项目跟目录，新建static目录，存放静态文件，项目目录为：

然后在app --> models.py 新加类

class Text(models.Model):
	title = models.TextField()

（注：实体里的TextField字段才会被替换）

在app--> admin.py 中添加该模型的管理类（老版本的django配置方式不同，请参考官网说明--标题是3）

class TextAdmin(admin.ModelAdmin):
	class Media:
		js=('tiny_mce/tiny_mce.js',
			'textareas.js')

admin.site.register(Text, TextAdmin)

‘’‘class Media:
js=('tiny_mce/tiny_mce.js',
'textareas.js')’‘’

这是重点，可能现在还是看不懂，木关系，咱们来配置setting，如下

STATIC_URL = '/static/'

# Additional locations of static files
STATICFILES_DIRS = (
     os.path.join(os.path.dirname(__file__), '../static/').replace('\\','/'),
)

访问localhost:8000/admin/ ，查看Text对象，可以发现，TextField已被替换为TinyMCE 的编辑框。搞定，收工。

如果有盆友和我一样菜鸟一只，做如上操作可能出现不报错但是没出现编辑框的情况，最简单的办法就是查看页面的源文件，看看js文件是不是引入了，路径对不对。

最后，附上textareas.js，实为配置文件

tinyMCE.init({  
    // General options  
    mode : "textareas",  
    theme : "advanced",  
    plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",  
   
    // Theme options  
    theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect,fullscreen,code",  
    theme_advanced_buttons2 : "cut,copy,paste,pastetext,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,|,insertdate,inserttime,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 formats  
    style_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'  
   
});