django安装DjangoUeditor富文本

环境:

pycharm,django1.11,python2.7

第一种:直接 pip install DjangoUeditor,直接从网上安装到pycharm

由于是直接安装,ueditor.html,ueditor_old.html会显示无法加载,请到项目下面查到这两个文件,把它拷到 templates 文件夹下面 ,这边是venv/DjangoUeditor emplates下面,大家根据各自的要求进行查看。其它model、urls、settings配置跟第二种一样,请直接看下面

第二种:

1.首先,在项目下面随便新建文件夹名ex_blog,

2.从https://files.pythonhosted.org/packages/92/78/6a97dabce8ab394c78c8ede4bd65a9d740685d65b942641e5859408af102/DjangoUeditor-1.8.143.zip,

下载安装包,解压包,把最里面的那个文件夹,DjangoUeditor拷到ex_blog下面,

3.通过pycharm 选中ex_blog文件夹,点击鼠标右键选中菜单 mark directory as 选择 sources root ,就可以变成上面的蓝色文件夹目录,(这一部分重要,用于把整个文件夹提升为项目可直接调用文件,关系到后面程序的调用)

4.在settings.py的INSTALLED_APPS中引入 DjangoUeditor,并文件中下面添加代码,如下 :

sys.path.insert(0, os.path.join(BASE_DIR, 'ex_blog')) 

并在最后添加图片上传路径

MEDIA_URL = '/static/uepload/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'static/uepload')

 5.在根的urls.py中添加(注意,并不是app中的urls.py)

url('^ueditor/', include('DjangoUeditor.urls'))

6.在models.py中引入UEditorField(注意:models模版中不可以对宽高进行设置)

from DjangoUeditor.models import UEditorField

例如:

class Blogblog(models.Model):
  content=UEditorField(verbose_name='内容')

7.在admin.py中注册,即可以在admin后台中使用富文本

from .models import Blogblog

class Blogblogadmin(admin.ModelAdmin):
  list_display = ['pk','content']

admin.site.register(Blogblog,Blogblogadmin)

注意:(第1种和第2种)由于django1.11都会报patterns的错误,请到DjangoUeditor目录下面urls.py中的patterns去除掉,换url,如下:

#coding:utf-8
from django import VERSION
if VERSION[0:2]>(1,3):
from django.conf.urls import  url
else:
from django.conf.urls.defaults import url

from views import get_ueditor_controller

urlpatterns = [
url(r'^controller/$',get_ueditor_controller)
]

 

HTML如何加载富文本

1.先在views.py中导入模块

from DjangoUeditor.forms import UEditorField
from django.forms import forms
from .models import Blogblog

2.定义一个forms(设置宽高,以及图片或文件上传的目录,根据上面设置是在uepload目录下面images和files)

class TestUEditorForm(forms.Form):
content = UEditorField('内容', width=600, height=300, toolbars="full", imagePath="images/", filePath="files/",upload_settings={"imageMaxSize":1204000},settings={})

3.把数据库内容渲染到页面

class Index(View):
def get(self,request):
form=TestUEditorForm()
blogIndex=Blogblog.objects.get(pk=1)
context=blogIndex.content
return render(request,'index.html',{'form':form,'context':context})

4.HTML页面的举例设置

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
{{ form.media }}    
</head>
<body>
{{ form }}
</body>
</html>

注意:{{ form.media }}    和 {{ form }}  都必须加载,才可以使用富文本

另外:如果数据库中加载出来的数据是html代码,

可以使用 {{ context|safe }} 直接转义.

或者使用

{% autoescape off %}
{{ context }}
{% endautoescape %}

原文地址:https://www.cnblogs.com/weilaibuxiangshuo/p/10371931.html