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

富文本编辑器实现效果图：

左侧编辑区域，右侧渲染到HTML显示效果，除了渲染时候代码样式有所不同，其他标题、文字、图片基本满足所见即所得的效果

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

1、前端页面引入js文件：

所用编辑器为tinymce.js,引入两个js文件

<script src="/static/tinymce/tinymce.min.js"></script><script src="/static/tinymce/tinymce_setup.js"></script></script>
<script src="/static/tinymce/tinymce_setup.js"></script>

2、html代码布局：

左侧编辑区域，右侧渲染后预览区域

下面div左浮动，里面的textarea是富文本编辑区域，注意id要用rich_content，name也要加, {{ content }}是我在提交时候后端返回的数据，方便重新在编辑区域渲染数据

submit通过表单默认的提交方式向后端发post请求传数据

<div class="form-group" style="float:left">  <form action="/webproduct/4/" method="post">   <label>内容：</label>   <textarea class="input_area" id="rich_content" name="content" >{{ content }}</textarea>   <input type="submit" value="提交">  </form></div>"form-group" style="float:left">
  <form action="/webproduct/4/" method="post">
   <label>内容：</label>
   <textarea class="input_area" id="rich_content" name="content" >{{ content }}</textarea>
   <input type="submit" value="提交">
  </form>
</div>

下面是右侧展示的div，右浮动，左右浮动为了更好地对比效果，不用来回滑动滚动条，返回的content其实就是html字符串，我们渲染到浏览器即可

<div class="box" style="margin-bottom: 200px;float:right;"> {{ content|safe }}</div>"box" style="margin-bottom: 200px;float:right;">
 {{ content|safe }}
</div>

3、Django后端代码

@csrf_exempt是ajax和form表单的post请求csrf解决办法，如果是form表单的post请求，也可以在form中加{%  csrf_token %}

前端是form表单请求，后端只需要根据键从表单中读数据就行，我们的富文本编辑器name属性值为content，则直接get("content")即可

@csrf_exempt@login_requireddef webproduct_manage4(request):  content = request.POST.get('content')  return render(request,"webproduct/webproductContent3.html",{"content":content})
@login_required
def webproduct_manage4(request):
  content = request.POST.get('content')
  return render(request,"webproduct/webproductContent3.html",{"content":content})

返回到前端的content，即富文本的html字符串，我们分别在编辑器和右侧都进行了渲染，即可见到最开始的效果

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

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