django添加富文本编辑器

1 , 在应用同级目录,放入ueditor文件夹,ueditor是一个封装好的富文本编辑器
2, 在settings的INSTALLED_APPS里加入ueditor应用
3, 在html中引入以下代码
4, 打开django项目的urls.py文件,添加ueditor的url路由配置

urlpatterns = [
    url(r'^ueditor/', include('ueditor.urls')),
    url(r'^admin/',include('myadmin.urls')),
    url(r'^',include('myweb.urls')),
]

5, 在html中添加以下代码便可

 <link rel="stylesheet" type="text/css" href="/ueditor/UE/third-party/SyntaxHighlighter/shCoreDefault.css">
 <script type="text/javascript" src="/ueditor/UE/third-party/SyntaxHighlighter/shCore.js"></script>
 <script type="text/javascript" src="/ueditor/UE/ueditor.config.js"></script>
 <script type="text/javascript" src="/ueditor/UE/ueditor.all.min.js"></script>
 <script type="text/javascript" src="/ueditor/UE/lang/zh-cn/zh-cn.js"></script>


 <div class="am-form-group">
     <label for="user-intro" class="am-u-sm-3 am-form-label">商品简介</label>
     <div class="am-u-sm-9">
         <!-- <textarea name="descr" class="" rows="10" id="user-intro" placeholder="请输入商品简介"></textarea> -->
         <!-- <script id="editor" type="text/plain" style="width:100%;height:500px;"></script> -->      
         <script id="editor" name="goodsinfo" type="text/plain" style="height:500px;color:red;">
        <!-- 如果编辑时获取,只需要在此处 {{ data.content |safe }} 直接接收就可以了,不过接受过来的是源代码 需要加|safe防止转义-->     
         </script>
     </div>
 </div>


 <script type="text/javascript">
     var ue = UE.getEditor('editor');
     SyntaxHighlighter.all();
 </script>

6.,水印功能
上传图片自动加水印 该功能默认没开启。
上传图片加水印功能需要安装PIL

pip3 install pillow

水印相关设置在ueconfig.json末尾:

"openWaterMark": false,  //是否开启
"waterMarkText": "我的水印\nhttp://xxxxx.com", //水印内容,建议一行文本
"waterMarkFont": "msyhbd.ttf",  //字体,中文需要字体支持才不会出错
"waterMarkSize": 15,    //字体大小
"waterMarkBottom": 45,  //下边距
"waterMarkRight": 155   //右边距

你可能感兴趣的:(web后端,python,django)