django admin中使用 tinymce 富文本编译器

在django的admin后台使用tinymce富文本编译器，自定义添加截图及上传图片功能。

第一步：
官网下载 tinymce
地址：https://www.tinymce.com/download/
版本：4.4.3

下载文件目录结构结构如下
把tinymce文件夹拷贝至 static文件夹目录下



第二步：

admin.py

from app_dir.sanatorium.models import SanatoriumInfo
class SanatoriumInfoAdmin(admin.ModelAdmin):
class Media:
js=(
"//cdn.bootcss.com/jquery/2.2.4/jquery.min.js",
"/static/js/tinymce/jquery.tinymce.min.js",
"/static/js/tinymce/tinymce.min.js",
"/static/js/tinymce/textareas.js",
)
admin.site.register(SanatoriumInfo, SanatoriumInfoAdmin)

在 tinymce 文件夹中新建textareas.js
加入如下代码：
注：selector 初始化使用富文本编译器的标签
  theme 选择 主题，插件等
  textareas.js 中需用到jquery admin中使用在线jquery

   因为官方的版本不支持图片上传及截图， 下面自定义了截图及上传图片插件
   在项目中建立上传admin图片的接口 保存上传的图片（action="/temporary/uploadIMG/"）

tinymce.init({
selector: "textarea",
theme: "modern",
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor"
],
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
toolbar2: "print preview media | forecolor backcolor emoticons",
image_advtab: true,
templates: [
{title: 'Test template 1', content: 'Test 1'},
{title: 'Test template 2', content: 'Test 2'}
],
paste_data_images:true,
file_browser_callback: function(field_name, url, type, win) {
if(type=='image') $('#my_form input').click();
}
});
$( document ).ready(function() {
h ='<iframe id="form_target" name="form_target" style="display:none"></iframe><form id="my_form" action="/temporary/uploadIMG/" target="form_target" method="post" enctype="multipart/form-data" style="width:0px;height:0;overflow:hidden"><input name="img" type="file" onchange="$(\'#my_form\').submit();this.value=\'\';"></form>';
$('body').append(h);
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
console.log(csrftoken);
$('#my_form').append('<input type="hidden" name="csrfmiddlewaretoken" value='+csrftoken+' />');
});

此时，admin中已经可以显示富文本编译器了，但是上传图片功能不可用.

第三步：
views.py

def uploadIMG(request):
'''
admin 上传图片
返回图片，使得图片可以直接显示在输入框中

'''
img = request.FILES.get('img')
adminIMG = AdminIMG()
adminIMG.filename = img.name
adminIMG.img = img
adminIMG.save()
return HttpResponse("<script>top.$('.mce-btn.mce-open').parent().find('.mce-textbox').val('/media/%s').closest('.mce-window').find('.mce-primary').click();</script>"%adminIMG.img)

models.py

class AdminIMG(models.Model):
filename = models.CharField(max_length=200, blank=True, null=True)
img  = models.ImageField(upload_to = './admin')

urls.py

......

url(r'uploadIMG/', uploadIMG, name='uploadIMG'),                                       # admin 上传图片
#在最先面添加media 上传的静态文件的路径，不然会找不到静态文件
......

urlpatterns += [
url(r'^media/(?P<path>.*)$', 'django.views.static.serve', {
'document_root': settings.MEDIA_ROOT,
}),
]

注：在django 1.1之后不能用字符串作为接口

.....
from django.views.static import serve
url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT,}),                           # media

【完】