网络编程
位置:首页>> 网络编程>> Python编程>> Django在admin后台集成TinyMCE富文本编辑器的例子

Django在admin后台集成TinyMCE富文本编辑器的例子

作者:KurolZ  发布时间:2021-10-03 15:43:12 

标签:Django,admin,TinyMCE,富文本,编辑器

Django原生的TextField并不友好,集成TinyMCE富文本编辑器

Django版本:1.11.5

TinyMCE版本:4.6.7

第一步:从官网下载TinyMCE

https://www.tinymce.com/download/

注意下载的是下面那个开发包,Dev Package。此包包含TinyMCE社区,开发工具和完整的源代码。

第二步:把压缩包内tinymce目录内的所有文件和文件夹复制到Django项目中static目录内:

Django在admin后台集成TinyMCE富文本编辑器的例子

第三步:编辑 admin.py 文件:


from .models import Category, Tag, Blog, Comment  

class AdminFormTinyMCE(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([Blog,Comment,Category,Tag], AdminFormTinyMCE)

注:Category, Tag, Blog, Comment是在model.py定义的模型,如果想要在admin后台显示并编辑,就导入。

Django在admin后台集成TinyMCE富文本编辑器的例子

第三步:在 static/js/tinymce 文件夹中新建 textareas.js 文件:

加入如下代码:

注:这里只是简单的样式,具体的需要的插件或其他功能都从这里配置


tinymce.init({
selector: "textarea",
theme : "modern",
});

重新运行Django,已经可以在后台看到TinyMCE富文本编辑器了:

Django在admin后台集成TinyMCE富文本编辑器的例子

来源:https://blog.csdn.net/hjxzt1/article/details/78068972

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com