django添加富文本编辑器

27 篇文章 0 订阅
27 篇文章 0 订阅

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   //右边距
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值