zoukankan      html  css  js  c++  java
  • Django-CKeditor使用笔记

    1. 安装django-ckeditor

    $ pip install django-ckeditor

    2. 在setting中,添加ckeditor , ckeditor_uploader 到INSTALLED_APPS

    install_apps = {
        'ckeditor',
        'ckeditor_uploader',
    }

    3. 在setting中,添加

    # CKeditor 相关
    MEDIA_ROOT = os.path.join(BASE_DIR, 'static/media/')
    MEDIA_URL = '/media/'
    CKEDITOR_JQUERY_URL = 'https://cdn.bootcss.com/jquery/2.1.4/jquery.js'
    CKEDITOR_UPLOAD_PATH = "static/upload"
    CKEDITOR_IMAGE_BACKEND = "pillow"

    4. 执行 python manage.py collectstatic ,收集静态文件

    后端显示编辑器

    5. model中添加ckeditor的字段

    from ckeditor_uploader.fields import RichTextUploadingField
    class Entry(models.Model):
        body = RichTextUploadingField() #RichTextField()
    
    from ckeditor.fields import RichTextField
    class Post(models.Model):
        content = RichTextField()
    --------------------- 
    # 貌似是给Django-admin使用的

    前端添加编辑器

    7.添加js文件

    <head>
    <script src="//cdn.ckeditor.com/4.5.9/standard/ckeditor.js"></script>
    </head>

    8. 添加代码如下

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>CKEditor</title>
            <script src="//cdn.ckeditor.com/4.5.9/standard/ckeditor.js"></script>
        </head>
        <body>
            <textarea name="editor1"></textarea>
            <script>
                CKEDITOR.replace( 'editor1' , {uiColor: '#9AB8F3'});
            </script>
        </body>
    </html>

    博客搬运地址:

    1. Django笔记 使用编辑器django-ckeditor
  • 相关阅读:
    mysql触发器:插入数据前更新创建时间为服务器的时间
    import Vue form 'vue’的意思
    【LOJ#10172】涂抹果酱
    【LOJ#10171】牧场的安排
    【LOJ#10170】国王
    【POJ2411】Mondriaan's Dream
    【POJ2228】Naptime
    【CTSC1997】选课
    【CH5302】金字塔
    【洛谷P1168】中位数
  • 原文地址:https://www.cnblogs.com/clement-jiao/p/9781338.html
Copyright © 2011-2022 走看看