Python项目中用富文本编辑器展示精美网页

论坛 期权论坛 期权     
python爬虫人工智能大数据   2019-6-16 22:25   2914   0
富文本编辑器实现效果图:
左侧编辑区域,右侧渲染到HTML显示效果,除了渲染时候代码样式有所不同,其他标题、文字、图片基本满足所见即所得的效果




下面讲解富文本编辑器在Django项目中如何使用

1、前端页面引入js文件:
所用编辑器为tinymce.js,引入两个js文件
复制代码
2、html代码布局:
左侧编辑区域,右侧渲染后预览区域
下面div左浮动,里面的textarea是富文本编辑区域,注意id要用rich_content,name也要加, {{ content }}是我在提交时候后端返回的数据,方便重新在编辑区域渲染数据
submit通过表单默认的提交方式向后端发post请求传数据
  1.   
  2.    内容:
  3.    {{ content }}
  4.    
  5.   
复制代码
下面是右侧展示的div,右浮动,左右浮动为了更好地对比效果,不用来回滑动滚动条,返回的content其实就是html字符串,我们渲染到浏览器即可
  1. {{ content|safe }}
复制代码
3、Django后端代码

@csrf_exempt是ajax和form表单的post请求csrf解决办法,如果是form表单的post请求,也可以在form中加{%  csrf_token %}
前端是form表单请求,后端只需要根据键从表单中读数据就行,我们的富文本编辑器name属性值为content,则直接get("content")即可
  1. @csrf_exempt
  2. @login_required
  3. def webproduct_manage4(request):
  4.   content = request.POST.get('content')
  5.   return render(request,"webproduct/webproductContent3.html",{"content":content})
复制代码
返回到前端的content,即富文本的html字符串,我们分别在编辑器和右侧都进行了渲染,即可见到最开始的效果

本文富文本编辑器仅测试部分常见效果没有什么问题,另外富文本编辑器也有CKeditor、Ueditor等等,如果大佬们有关于这些的开源demo,也欢迎学习交流

python爬虫人工智能大数据公众号

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:20
帖子:4
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP