您的位置: 首页  >  文章  >  django富文本使用简明教程(基于百度Ueditor编辑器，windows平台，内涵代码链接)

django富文本使用简明教程(基于百度Ueditor编辑器，windows平台，内涵代码链接)

分类: 文章 • 2024-08-02 17:47:28

环境：

python 3.6.1    

django 1.11.14

windows 7操作系统

开发工具

 VS Code

  1. 创建项目

在终端cmd中输入命令：

django-admin startproject ueditorDemo

创建一个名为ueditorDemo的项目。在该项目中创建1个app：

python manage.py startapp app

打开ueditorDemo子文件夹下的settings.py文件，在INSTALLED_APPS中将刚创建的app添加进来：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app', #添加app
]

在app应用文件夹下创建一个名为templates的文件夹，然后在templates文件夹中创建1个html文件，名为“index.html”，该文件初始内容如下：

{% load staticfiles %}
<!-- 导入django 模板静态资源标识 -->
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>富文本demo</title>
</head>

<body>
   <p>你好，世界</p>
</body>

上述文件即为需要访问的页面文件，其中通过{% load staticfiles %}来导入django的静态资源标签，使得后续可以在该index.html文件中传入模板变量。

打开app应用下的views.py文件，创建一个视图处理函数home用来处理页面请求，具体代码如下：

from django.shortcuts import render

def home(request):
    return render(request, 'index.html')

最后，配置路由将请求与视图处理函数进行绑定。打开ueditorDemo子文件夹中的urls.py文件，在urlpatterns中添加对应的路由，具体代码如下：

from django.conf.urls import url
from django.contrib import admin
from app.views import home  #导入视图函数

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^$', home, name='home'), #添加响应
]

保存所有修改后启动项目：

python manage.py runserver

效果图如下所示：

django富文本使用简明教程(基于百度Ueditor编辑器，windows平台，内涵代码链接)

2. 集成Ueditor

基于Django的Ueditor项目在github上已经开源，可以方便的将该项目应用集成到我们自己的项目中。下载网址：

https://github.com/twz915/DjangoUeditor3/

将压缩包下载后进行解压，然后在cmd中通过cd命令定位到该文件夹根目录下面（与setup.py同级目录），输入命令：

python setup.py install

完成Ueditor的安装。最后将其中的DjangoUeditor文件夹整个拷贝到我们创建的ueditorDemo项目根目录下。DjangoUeditor文件夹本质上是一个应用，我们需要将该应用添加到我们的项目中来。打开settings.py文件，在INSTALLED_APPS字段中添加应用：


INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app', #添加app
    'DjangoUeditor',#添加Ueditor应用
]

为了能够在富文本中使用图片、文件等上传功能，需要在django中定义好这些媒体资源的存储根路径，在settings.py文件末尾添加：

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

接下来需要为Ueditor应用配置URL，打开urls.py文件，添加对应的路由，完整代码如下：

from django.conf.urls import url
from django.contrib import admin
from app.views import home  #导入视图函数
from django.conf.urls import include

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^$', home, name='home'), #添加响应
    url(r'^ueditor/',include('DjangoUeditor.urls' )),  #添加富文本应用路由
]

最后，在urls.py文件末尾添加媒体文件路径申明，将媒体资源文件添加到当前搜索路径下面。

from django.conf import settings
from django.conf.urls.static import static
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

3. 后台管理系统使用Ueditor

为了能够演示富文本编辑的效果，以“文章”为例，用户可以在后台管理系统中使用富文本编辑器编辑文章（包括文字、图片、文件等），然后在前端页面中可以按照编辑时的样式进行显示。

首先创建“文章”模型，打开app应用文件夹下的models.py文件，编辑代码如下：

from django.db import models
from DjangoUeditor.models import UEditorField

# Create your models here.
class Article(models.Model):
    title = models.CharField(max_length=50,verbose_name =' 文章标题')
    content=UEditorField(u'内容',default='',width=1000,height=300,imagePath='app/images/',filePath='app/files/')
    
    class Meta:
        verbose_name = '文章'
        verbose_name_plural = '文章'

上述代码中content字段使用了Ueditor定义的模型类型进行申明，这样在后台管理系统中该字段就以富文本形式显示。另外，该字段分别使用了imagePath和filePath参数定义了富文本图像和文件上传后的保存路径。width和height参数用于控制该富文本的编辑区域大小，以像素为单位。

接下来在admin.py文件中对Article模型进行注册，代码如下：

from django.contrib import admin
from .models import Article

# Register your models here.
class ArticleAdmin(admin.ModelAdmin):
    style_fields={'content':'ueditor'}

admin.site.register(Article,ArticleAdmin)

保存所有修改文件后进行数据库模型迁移。如果是第一次使用则需要创建超级管理员，输入命令：

python manage.py createsuperuser

然后按照提示依次输出用户名、邮箱和密码即可完成管理员创建。

最后进行模型数据迁移，在终端中依次输入命令：

python manage.py makemigrations
python manage.py migrate

完成数据库迁移。

最后，运行项目，浏览器访问http://127.0.0.1:8000/admin/，进入后台管理系统。输入管理员用户名和密码后进行系统，单击文章后面的“Add”按钮，进入“添加文章”页面，可以看到当前已经顺利的集成了富文本Ueditor。效果图如下所示：

django富文本使用简明教程(基于百度Ueditor编辑器，windows平台，内涵代码链接)

可以尝试编辑一条内容，其中包含文字和图片，还可以上传一个文档（word）。如下图所示：

django富文本使用简明教程(基于百度Ueditor编辑器，windows平台，内涵代码链接)

4. 前端页面渲染

为了能够在前端页面显示富文本内容，需要从数据库中取出数据然后按照特定的格式进行渲染。具体操作如下。

首先编辑app应用下的views.py文件，修改home函数，详细代码如下：

from django.shortcuts import render

from .models import Article
# Create your views here.

def home(request):
    article = Article.objects.all()[0]
    return render(request, 'index.html',{'article': article,})

这里为了简单，仅从数据库中取出一篇文章的数据，然后通过django模板进行传入。

接下来修改前端html代码，打开index.html文件，重新进行编辑，最终代码如下：

{% load staticfiles %}
<!-- 导入django 模板静态资源标识 -->
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>富文本demo</title>
</head>

<body>
   <p>你好，世界</p>
   {% if article %}
   {{ article.content | safe }}
   {% endif %}
</body>

可以看到，如果需要渲染富文本内容，只需要使用django的模板语言 {{ article.content | safe }}即可。页面效果如下：

django富文本使用简明教程(基于百度Ueditor编辑器，windows平台，内涵代码链接)

 

5 . 富文本特定内容提取（提取图片和文字）

尽管通过上述步骤，可以方便的让用户自定义页面内容，但是有一种情况需要提取富文本特定内容。例如，在新闻页面中，可以使用富文本进行页面编辑和显示，但是如果在首页需要抽取出每篇新闻对应的图片作为缩略图或者提取少量文字来作为内容简介，那么这种情况下就需要额外的html页面解析操作。从本质上来说，通过富文本存储的内容都是以带格式的HTML字符串存储的，在渲染时django模板会自动的解析字符串中的特定html标签符号。因此，如果要解析特定的内容，只需要在获取到数据后抽取出对应标签的内容即可。

这里主要借助第三方工具包pyquery来进行html解析。首先安装pyquery：

pip install pyquery

然后修改views.py文件：

from django.shortcuts import render

from .models import Article
from pyquery import PyQuery as pq
# Create your views here.

def home(request):
    articles = Article.objects.all()

    for article in articles:
        html=pq(article.content) #pq方法获取编辑器html内容
        article.mytxt=pq(html)('p').text() #截取html段落文字
        article.img=pq(html)('img').attr('src') #截取html图片路径

    return render(request, 'index.html',{'articles': articles,})

上述代码提取出数据以后遍历每一个数据对象，然后用pyquery组件解析html字符串，提取出段落文字信息以及图片路径，得到结果后封装入临时变量，最后将变量传入模板文件即可。

接下来重新修改index.html文件用于页面渲染，代码如下：

{% load staticfiles %}
<!-- 导入django 模板静态资源标识 -->
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>富文本demo</title>
</head>

<body>
    {% for article in articles %}
        <h3>{{article.title}}</h3>
        <p>{{article.mytxt|slice:":50"|linebreaks}}</p>
        <img src="{{article.img}}" />
    {% endfor %}
</body>

最终效果图如下（共两篇文章）：

django富文本使用简明教程(基于百度Ueditor编辑器，windows平台，内涵代码链接)

 

最后，给出本文代码链接：https://download.****.net/download/qianbin3200896/11013636

 

相关推荐