关于 CKEditor 上传图片的问题

文件上传
flask-ckeditor

#1

看到最新的 bluelog 仓库代码中有 关于上传的部分 , 但是书上没有说明该部分的作用啊!

在 ckeditor 中,我试过无法上传图片!

2个问题:

  1. 能否说明一下 关于上传部分的代码具体是什么作用?

  2. 如果我想在 ckeditor 中实现上传图片(即在博客中的图片)该如何实现?


#2

这个项目一开始并没有添加图片上传支持,书出版后有很多读者问到,我就添加了这部分代码,所以书里没有介绍。Bluelog 最新的 commit 就是支持图片上传所需的所有代码变化(除此之外,还需要在项目根目录创建一个 uploads 文件夹用来保存上传图片)。

对应你的问题:

  1. 这部分代码并不复杂,如果看不懂,可以参考这篇文章
  2. Bluelog 最新的 commit 就是支持图片上传的代码。

#3

非常感谢你的回复!
我正在学习那部分代码,如有问题,真心希望得到您及各位同学的指导!
谢谢!


#4

不客气,后续有问题直接回帖即可。


#5

留个记号,我马上也看到这一部分了,到时候来看看这部分内容。


#6

你也可以点收藏按钮。在论坛主页的“收藏”导航可以看到你收藏的所有帖子。


#7

我的 ckeditor 为什么没有上传按钮啊:

代码部分:

# 配置部分
   CKEDITOR_SERVE_LOCAL = True
    CKEDITOR_PKG_TYPE = 'standard'
    CKEDITOR_LANGUAGE = 'zh-CN'
    CKEDITOR_HEIGHT = 600
    CKEDITOR_WIDTH = 300
    CKEDITOR__FILE_UPLOADER = 'upload_image'
    CKEDITOR__ENABLE_CSRF = True
    UPLOAD_FOLDER = os.path.join(basedir, 'uploads')
    ALLOWED_EXTENSIONS = {'png', 'jpg', 'gif', 'jpeg'}
    MAX_CONETNT_LENGTH = 16 * 1024 * 1024

def allowed_file(filename):
    return '.' in filename and filename.rsplit('.', 1)[1].lower() in \
           current_app.config['ALLOWED_EXTENSIONS']

# ckeditor 上传功能
@app.route('/uploads/<path:filename>')
def get_image(filename):
    path = current_app.config['UPLOAD_FOLDER']
    return send_from_directory(path, filename)


@app.route('/upload', methods=['POST'])
def upload_image():
    path = current_app.config['UPLOAD_FOLDER']
    f = request.files.get('upload')
    if not allowed_file(f.filename):
        return upload_fail('只能上传图片格式的文件')
    f.save(os.path.join(path, f.filename))
    url = url_for('get_image', filename=f.filename)
    return upload_success(url, f.filename)

#表单
class MessageForm(FlaskForm):
    body = CKEditorField('', validators=[DataRequired('留言内容不能为空!'), Length(2, 250, '字符范围2-250')])
    submit = SubmitField('发布留言')

#主页中的 ckeditor 表单
        {% if current_user.is_authenticated: %}
            <form method="post">
                {{ form.csrf_token }}
                {% for message in form.body.errors %}
                    <small class="text-danger">{{ message }}</small>
                {% endfor %}

                {{ form.body(class='form-control', placeholder='你想留下点什么内容呢?') }}

                {{ form.submit(class='btn btn-info btn-block') }}
            </form>
            <hr>
            <br>
        {% endif %}

# base.html 中加载
        {{ ckeditor.load() }}
    {{ ckeditor.config() }}

#8

遇到问题请先自己仔细检查和对比代码:

image


#9

:sweat_smile::sweat_smile::sweat_smile:
粗心了!
不过我改过来还是一样

    SECRET_KEY = os.getenv('SECRET_KEY')
    SQLALCHEMY_TRACK_MODIFICATIONS = False
    CKEDITOR_SERVE_LOCAL = True
    CKEDITOR_PKG_TYPE = 'standard'
    CKEDITOR_LANGUAGE = 'zh-CN'
    CKEDITOR_HEIGHT = 600
    CKEDITOR_WIDTH = 300
    CKEDITOR_FILE_UPLOADER = 'upload_image'
    CKEDITOR_ENABLE_CSRF = True
    UPLOAD_FOLDER = os.path.join(basedir, 'uploads')
    ALLOWED_EXTENSIONS = {'png', 'jpg', 'gif', 'jpeg'}
    MAX_CONETNT_LENGTH = 16 * 1024 * 1024


#10

调用 ckeditor.config() 需要传入编辑器表单字段的属性名称:

{{ ckeditor.config(name='body') }}

#11

能不能麻烦你说明下这一句是什么意思啊!
ckeditor.config() 这个明白,但是后面的参数 name='body’是什么意思呢?
因为我加上去了之后,是有按钮出现了,但是整个样式变成这样了:
Screenshot%202019-03-11%2013%3A34%3A57


#12

那一行让配置生效,具体参考文档。样式是你自己设置的:

image


#13

刚刚我正在看这里,哈哈哈~自己也想到了~
thx~~


#14

这个问题搞明白了,真的开心!
哈哈哈哈
:grin::grin::grin::grin::grin::grin:


#15

我还想到一个问题需要请教你
这里上传的图片应该是无法知道谁上传的吧!
如果我要把上传的人和图片联系起来,是不是可以在 user 那个表里面加一个 图片 filename 的字段?


#16

可以(如果用户只能上传一张图片的话)。