Django 之文本编辑器

# 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
```python
from mdeditor.fields import MDTextField

context = MDTextField("文章内容")
```

5. 在文章详情页中如何将Markdown渲染成正常的文本
```
import markdown

context = markdown.markdown(Article, 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文件即可
```html

<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()
```

更多的内容可以到我的[我的博客](https://www.liulongtao.com)中查看

来源：https://blog.csdn.net/secowo/article/details/99547168

标签

django

ckeditor

static

Django 之 文本编辑器

Django 之文本编辑器