django中嵌入百度editor插件

Posted 2020-08-04 逍遥无名

一、安装和配置步骤：

1、先下载百度ueditor插件，并安装pip install DjangoUeditor

2、把下载好的ueditor插件放到自己的项目中

3、配置setting

  INSTALLED_APPS = (

    ‘django.contrib.admin‘,

    ‘django.contrib.auth‘,

    ‘django.contrib.contenttypes‘,

    ‘django.contrib.sessions‘,

    ‘django.contrib.messages‘,

    ‘django.contrib.staticfiles‘,

    ‘Web‘,

    ‘DjangoUeditor‘,

 

)

4、配置url

urlpatterns = [

    url(r‘^admin/‘, include(admin.site.urls)),

    # url(r‘^ueditor/‘,include(‘DjangoUeditor.urls‘ )),

    url(r‘^ueditor/‘,include(DjangoUeditor_urls)),

 

5、启动你的项目，进入django后台，即可看到百度插件编辑器

 

二、在项目的form中嵌入百度插件

1、确保你下载的百度插件已经放到你的项目中，如statics目录下的pugins目录中

2、在前端中加入渲染插件脚本（form）

<div  id=id_content name="content" class="edui-default" style="display: inline-block;" >

                     <div id="edui1" class="edui-editor  edui-default"style="width: 1000px; z-index: 999;">

                            {{ form|safe }}

                     </div>

 

                 </div>

3、在前端中加入以下（js）

<script type="text/javascript">

 

    var id_content = UE.getEditor(‘id_content‘,{‘toolbars‘: [[‘source‘, ‘undo‘, ‘redo‘, ‘bold‘, ‘italic‘, ‘underline‘, ‘forecolor‘, ‘backcolor‘, ‘superscript‘, ‘subscript‘, ‘justifyleft‘, ‘justifycenter‘, ‘justifyright‘, ‘insertorderedlist‘, ‘insertunorderedlist‘, ‘blockquote‘, ‘formatmatch‘, ‘removeformat‘, ‘autotypeset‘, ‘inserttable‘, ‘pasteplain‘, ‘wordimage‘, ‘searchreplace‘, ‘map‘, ‘preview‘, ‘fullscreen‘], [‘insertcode‘, ‘paragraph‘, ‘fontfamily‘, ‘fontsize‘, ‘link‘, ‘unlink‘, ‘insertimage‘, ‘insertvideo‘, ‘attachment‘, ‘emotion‘, ‘date‘, ‘time‘]], ‘initialFrameWidth‘: 1000, ‘initialFrameHeight‘: 300, ‘serverUrl‘: ‘/ueditor/controller/?imagePathFormat=uploads%2Fimages%2F&filePathFormat=uploads%2Ffiles%2F‘});

     id_content.ready(function(){

 

     });

</script>

注意：一般js放到页面底部，这样可以减轻前端的加载速度，页面响应速度较快