Django Admin后台使用tinymc 富文本编辑器

Posted 2020-06-17

1、CDN地址

 <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>

2、修改base.html模板

　　编辑python下的 Lib\site-packages\django\contrib\admin\templates\admin 下的base.html

　　在head中引入上面的代码

3、修改base_site.html

　　编辑python下的 Lib\site-packages\django\contrib\admin\templates\admin 下的base_site.html

　　在{% block branding %} 中加入

　　

<script type="text/javascript">
  tinymce.init({
  selector: ‘textarea‘,
  height: 500,
  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 colorpicker textpattern imagetools‘
  ],
  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‘ }
  ],
  content_css: [
    ‘//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css‘,
    ‘//www.tinymce.com/css/codepen.min.css‘
  ]
 });
  </script>

参考了此博客：http://sleepycat.org/blog/25/