SAE折腾记：Django添加tinyMCE编辑器

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

我建立在SAE上使用Django建立的博客已经完成最基本的功能了，可是Admin里还缺一个好用的HTML编辑器，我就在百度+Google上折腾来去，折腾了几天，只弄好了tinyMCE。毕竟这个最简单嘛，至于神马kindeditor，xheditor之类，暂时还不会弄，而代码高亮用的是syntaxhighlighter。

tinyMCE的使用方法真的特别的简单和傻瓜。从http://www.tinymce.com/下载最新版本解压，只要在使用编辑器的页面正确加载tiny_mce_src.js，并配置初始化参数后，tinyMCE就会自动将页面类的<textarea>标签转换为编辑器。一个简单的例子是这样的：

<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
	tinyMCE.init({
		mode : "textareas",
		theme : "simple"
	});
</script>

要在Django中的Admin里集成tinyMCE，其实思路和上面介绍的一样，一是需要将下载tinyMCE解压后文件夹里的tiny_mce这个文件夹拷贝到Django项目的静态文件目录里，使得Django能够正确的调用所需的tinyMCE文件，并在具体某个APP的admin.py里添加一个Media，使得admin页面能够加载tinyMCE的js，比如这样:

class ArticleAdmin(admin.ModelAdmin):
    list_display = ('title','time','is_published')
    ...

    class Media:
        js = [
             '/media/editor/tiny_mce/tiny_mce_src.js',
             '/media/editor/tiny_mce/tiny_mce_config.js',
        ]

在这个例子中，'/media/editor/tiny_mce/tiny_mce_config.js'里是tinyMCE的配置信息。具体的配置方法可以参考官方的demo或者这个博客：http://blog.csdn.net/lonestone/article/details/1667647

好了，基本上这样就算配置成功了，只要打开编辑文章，就可以看到添加的编辑器了。不过如果需要Admin里所有<textarea>标签都自动加载tinyMCE，那么最好就使用Django-tinymce这个包。我们可以从https://github.com/aljosa/django-tinymce得到这个包的最新版本。不过要在SAE中使用这个外部包稍显麻烦，需要参考http://appstack.sinaapp.com/static/doc/release/testing/tools.html#virtualenv生成一个WSGI环境下可用的包,不过个人觉得直接tinymce文件夹拷贝到virtualenv.bundle应该也是可行的吧！然后修改项目的setting里的INSTALLED_APPS，使得这个包得以加载：

INSTALLED_APPS = (
    ...
    'tinymce',
    ...
)

同时需要配置tinyMCE文件所在的目录：

TINYMCE_JS_URL='/media/editor/tiny_mce/tiny_mce_src.js'
TINYMCE_JS_ROOT='/media/editor/tiny_mce/'

如果不配置的话，默认参数为：

TINYMCE_JS_URL=MEDIA_URL + 'js/tiny_mce/tiny_mce.js'

TINYMCE_JS_ROOT=MEDIA_ROOT + 'js/tiny_mce'

需要注意的是，Django-tinymce里自带了一个老版本的tinymce，你依然可以使用第一种方法里下载的最新版本的tinymce文件。

配置tinyMCE的配置方案，如（默认值)：

TINYMCE_DEFAULT_CONFIG = {'theme': "simple", 'relative_urls': False}

在URL.py里添加url路由：

urlpatterns = patterns('',
    ...
    (r'^tinymce/', include('tinymce.urls')),
    ...
)

修改原来models里的TextField为HTMLField，如：

...
from tinymce.models import HTMLField
...

class Article(models.Model):
    ...
    content = HTMLField(verbose_name='正文',max_length=20000)
    ...

通过以上方法，Django-tinymce就配置成功了。

来源：oschina

链接：https://my.oschina.net/u/140833/blog/56814

标签

sae

django

tinymce