刘龙韬的博客-文章：Django 之文本编辑器

Django 之文本编辑器

日期: 2019/08/14
作者: longtao
分类: Python
阅读: 706

# django的文本编辑样式

接下来主要讲两个编辑器，一个是富文本编辑器，另一个是Markdown文本编辑器

## Markdown文本编辑器

1. 首先安装`django-mdeditor`编辑器

```
pip install django-mdeditor
```
2. 然后在`settings.py`中将mdeidtor进行注册

```
'mdeditor',
```
3. 将下面代码放入到`urls.py`的底部，用于指定图片传送的地方

```
from django.conf.urls.static import static
from django.conf import settings

if settings.DEBUG:
# static files (images, css, javascript, etc.)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
```

4. 在Model中使用mdeditor

```
from mdeditor.fields import MDTextField

context = MDTextField("文章内容")
```
    
5. 在文章详情页中如何将Markdown渲染成正常的文本

```
import markdown

context = markdown.markdown(Article.context, extensions=[
'markdown.extensions.extra',
# 语法高亮扩展
'markdown.extensions.codehilite',
'markdown.extensions.toc',
])
```

6. 设置代码语法高亮
    首先需要安装`Pygments`进行将文档的内容进行渲染

```
pip install Pygments
```

然后生成`css`文件，然后在HTML页面中引用生成的`css`文件          
首先进入`/static/`文件夹下，运行以下的命令生成`css`文件

```
	pygmentize -S monokai -f html -a .codehilite > monokai.css
	```
最后在需要使用`markdown`的页面中引用css文件即可

```

<link rel="stylesheet" href="{% static 'css/monokai.css' %}">
```
    
## 富文本编辑器
1. 我们首先选择`ckeditor`作为我们的富文本编辑器     
安装:
```
pip install django-ckeditor
```
2. 在`settings.py`中进行注册
```
INSTALLED_APPS   = {
......
'ckeditor',
}
```

3. 在`models.py`中引用`RichTextField`类

```
from django.db import models
from ckeditor.fields import RichTextField

# 博客模型
class Blog(models.Model):
	title = models.CharField(max_length=254, unique=True)
	# 博客的内容为 RichTextField 对象
	body = RichTextField()

def __str__(self):
	return self.title
```
4. 然后进行数据迁移
```
python manage.py makemigrations
python manage.py migrate
```

5. 在编辑状态显示多样编辑工具

首先需要在`settings.py`中加入以下的配置

```
# ckeditor
CKEDITOR_CONFIGS = {
	# 将这份配置命名为 my_config
	'my_config': {
	'skin': 'moono-lisa',
	'toolbar_Basic': [
	['Source', '-', 'Bold', 'Italic']
	],
	'toolbar_Full': [
	['Styles', 'Format', 'Bold', 'Italic', 'Underline', 'Strike', 'SpellChecker', 'Undo', 'Redo'],
	['Link', 'Unlink', 'Anchor'],
	['Image', 'Flash', 'Table', 'HorizontalRule'],
	['TextColor', 'BGColor'],
	['Smiley', 'SpecialChar'],
	# 在工具栏中添加该功能的按钮
	['CodeSnippet'], ['Source'],

],
	'toolbar': 'Full',
	'height': 291,
	'width': 835,
	'filebrowserWindowWidth': 940,
	'filebrowserWindowHeight': 725,
	# 添加的插件
	'extraPlugins': 'codesnippet',
	}
}
```

然后我们在`models.py`中的页面引用的时候，我们可以引用自己的配置选项

```
class Blog(models.Model):
	title = models.CharField(max_length=254, unique=True)
	# 添加参数 config_name 指定使用的配置
	body = RichTextField(config_name='my_config')

def __str__(self):
	return self.title
```
6. 上传文件

1） 将`ckeditor_uploader`加入到`settings.py`中
```
INSTALLED_APPS = [
# ...
'ckeditor',
'ckeditor_uploader',
]
```
使用上传功能，需要设置上传位置。该文件是上传到media目录，所以也需要设置media。打开settings.py添加如下设置：

```
MEDIA_URL = '/media/'
# 放在django项目根目录，同时也需要创建media文件夹
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

CKEDITOR_UPLOAD_PATH = 'upload/'
```

2) 配置上传url和media的访问

上传功能需要有地址可以请求，需要需要提供上传的url。打开全局的urls.py，添加设置到urlpatterns中：

```
path('ckeditor/', include('ckeditor_uploader.urls')),
```

另外，上传的图片是到media中，不是在static中。我们还需要设置media可被访问，如下设置可用于开发中使用，若部署到服务器可用服务器软件设置：

```
from django.conf import settings
from django.conf.urls.static import static

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
```

3)修改model

上面的RichTextField不可用于上传文件，需要修改model如下：
```
from django.db import models
from ckeditor_uploader.fields import RichTextUploadingField

class Blog(models.Model):
	title = models.CharField(max_length=50)
	content = RichTextUploadingField()
```

网站名称: 刘龙韬的博客
本文链接: www.liulongtao.com/aritcle/4
版权声明: 未经允许，禁止转载！

相关文章：

上一篇： Echarts学习笔记（一）基础内容
下一篇： MarkDown测试

提交评论

评论列表

共有3评论

目录

最新文章

分类

标签

本站内容

1. 本站运行时间：

2. 本站使用Django搭建

3. 本站使用阿里云服务器

文章介绍

1. Python学习

2. java学习

3. 前端开发

友链

©copyright 刘龙韬的博客 | 备案：鲁ICP备17024355号-1