SAE折騰記：Django添加tinyMCE編輯器

     我創建在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就配置成功了。