Django3.2 ckeditor根据ID修改博客文章

电玩女神 2022-09-14 14:29 84阅读 0赞

本项目使用的Models请参考上篇

[ckeditor富文本编辑器(Django 3.2)\_云淡风轻58的博客-CSDN博客][ckeditor_Django 3.2_58_-CSDN]

博客首页

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR5reh6aOO6L27NTg_size_20_color_FFFFFF_t_70_g_se_x_16][]

后台博客列表

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR5reh6aOO6L27NTg_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

models.py

from ckeditor_uploader.fields import RichTextUploadingField
    from django.db import models
    from user.models import Admin
    class Category(models.Model):
        categoryName=models.CharField('分类',max_length=10)
        class Meta:
            verbose_name = '分类'
            verbose_name_plural = '分类'
    
        def __str__(self):
            return self.categoryName
    
    class Blog(models.Model):
        title = models.CharField(max_length=50)
        category = models.ForeignKey(Category, on_delete=models.CASCADE, verbose_name='分类')
        author = models.ForeignKey(Admin, on_delete=models.CASCADE, verbose_name='作者')
        createdTime = models.DateTimeField('发布时间', auto_now_add=True)
        readCount = models.CharField('阅读数量', max_length=10)
        replyCount = models.CharField('回复数量', max_length=10)
        content=RichTextUploadingField(verbose_name='正文')
    
        class Meta:
            verbose_name = '文章'
            verbose_name_plural = '文章'
    
        def __str__(self):
            return self.title
    
    class Info(models.Model):
        nickname = models.CharField(max_length=30)
        homePage = models.CharField(max_length=50)
        address = models.CharField(max_length=50)
        job = models.CharField(max_length=30)
    
        class Meta:
            verbose_name = '个人档案'
            verbose_name_plural = '档案'
    
        def __str__(self):
            return self.nickname

editBlog.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        {% load static %}
        <meta charset="UTF-8">
        <title>Ckeditor编辑器</title>
        <link rel="stylesheet" href="{% static 'layui/css/layui.css' %}" media="all">
        <script src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>
        <script src="/static/admin/js/admin/RelatedObjectLookups.js"></script>
    </head>
    <body>
    <div class="layui-fluid" style="margin-top: 10px;">
        <form class="layui-form" method="post" action="/update/" enctype="multipart/form-data">
            {% csrf_token %}
                <input type="hidden" name="id" value="{
       { blog.id }}">
                <div class="layui-form-item layui-col-xs6">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-block">
                      <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input" width="300px" value="{
       { blog.title }}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">分类</label>
                    <div class="layui-input-inline">
                      <select name="category" >
                        <option value="{
       { blog.category }}">{
       { blog.category }}</option>
                       {% for c in categorys %}
                        <option value="{
       { c.categoryName }}">{
       { c.categoryName }}</option>
                       {% endfor %}
                      </select>
                    </div>
                </div>
                <div class="layui-form-item layui-form-text layui-col-xs6">
                    <label class="layui-form-label">内容</label>
                    <div class="layui-input-block">
                        <textarea type="text" name="content">
                            {
       { blog.content | safe }}
                        </textarea>
    
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                      <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">发布</button>
                      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
        </form>
    </div>
    <script src="{% static 'layui/layui.js' %}"></script>
    <script type="text/javascript">
        layui.use('form', function(){
          var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
          var res = '{
       { res }}';
    		if (res == 'ok') {
    			layui.use('layer', function() {
    				var layer = layui.layer;
    				layer.msg('操作成功');
    			});
    
    		}
    		if (res == 'fail') {
    			layui.use('layer', function() {
    				var layer = layui.layer;
    				layer.msg("操作成功");
    			});
    		}
          form.render();
        });
    </script>
    <script type="text/javascript">
        CKEDITOR.replace( 'content',{width: 700 , height: 400 });
    </script>
    </body>
    </html>

views.py

def editBlog(request,id):
        blog = Blog.objects.get(id=id)
        categorys = Category.objects.all()
        return render(request, 'editBlog.html',locals())

urls.py

urlpatterns = [
        path('editBlog/<str:id>', views.editBlog),
    ]

settings.py中配置ckeditor

CKEDITOR_CONFIGS = {
    'default': {
            'toolbar': (
                ['div','Source','-','Save','NewPage','Preview','-','Templates'],
                ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker','Scayt'],
                ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
                ['Form','Checkbox','Radio','TextField','Textarea','Select','Button', 'ImageButton','HiddenField'],
                ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
                ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
                ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
                ['Link','Unlink','Anchor'],
                ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
                ['Styles','Format','Font','FontSize'],
                ['TextColor','BGColor'],
                ['Maximize','ShowBlocks','-','About', 'pbckcode'],
                ['Blockquote', 'CodeSnippet'],
            ),
            'width': '800',
            'height':'400',
            # 添加按钮在这里
            'toolbar_Custom': [
                ['NumberedList', 'BulletedList'],
                ['Blockquote', 'CodeSnippet'],
            ],
           # 插件
            'extraPlugins': ','.join(['codesnippet','widget','lineutils',]),
        },
    }

根据ID编辑博客内容

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR5reh6aOO6L27NTg_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

这样虽然功能是实现了，但是有个问题不能上传图片，暂时没有找到解决方法，如果有知情者请不吝赐教，多谢。

[ckeditor_Django 3.2_58_-CSDN]: https://blog.csdn.net/dwenxue/article/details/120658485
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR5reh6aOO6L27NTg_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/d8d2435df1a04f9fb3790bb8d0376f34.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR5reh6aOO6L27NTg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/83fb6986c2964c81a8fc0decfee2ff42.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR5reh6aOO6L27NTg_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/b45255452db54299b5f81a8d9b6668a5.png