django 添加富文本编辑器

添加富文本编辑器可以方便用户写入文字,对文字进行修改,添加图片 视频等等,可以让你编辑的内容更加丰富

在进行网页中添加富文本编辑器,先下载一个编辑器软件,我用的是UEditor百度富文本编辑器,

点击打开链接   http://ueditor.baidu.com/website/

先创建一个HTML文件,tempalstes/blog/upload.html

django 添加富文本编辑器_第1张图片

在以上创建的文件里编辑代码,以前我们的编码方式是字符,提交方式也是字符,现在添加富文本编辑器后可以填写大量的文字图片,要改变提交方式,enctype="multipart/form-data" 编码方式为复合形式的数据

django 添加富文本编辑器_第2张图片

在static文件中添加一个文件来放下载好的富文本编辑器文件,static/ue

django 添加富文本编辑器_第3张图片

点进进入static/ue/_examples/index.html文件用浏览器打开会看到很多演示

django 添加富文本编辑器_第4张图片

进入网页内容,选择一个演示点击查看源代码,要下图里的代码添加到下面要编辑的代码中


现在进入templates/blog/add.html文件里编辑,把上面的两句代码添加进去,要修改路径

django 添加富文本编辑器_第5张图片

在body里添加,修改

django 添加富文本编辑器_第6张图片

最后还要修改editor_api.js文件里的路径,static/ue/editor_api.js

改成:     baseURL='/static/ue/_src/';

django 添加富文本编辑器_第7张图片

运行程序,输入自己的路径http://127.0.0.1:8000/blog/publish

django 添加富文本编辑器_第8张图片














你可能感兴趣的:(django 添加富文本编辑器)