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 //右边距