helloflask / flask-ckeditor

CKEditor integration for Flask, including image upload, code syntax highlight, and more.
https://flask-ckeditor.readthedocs.io
MIT License
200 stars 67 forks source link

添加图片选择左对齐或者右对齐会影响html布局 #28

Closed 99Kies closed 4 years ago

99Kies commented 4 years ago

添加图片选择左对齐或者右对齐会影响html布局

【影响“显示内容”下方的内容】

greyli commented 4 years ago

麻烦发截图看下。我猜测这是 CKEditor 的 bug,可以考虑去这里反馈。另外也可以试下把 CKEditor 版本更新到最新版本。

99Kies commented 4 years ago

编辑时候的图片 edit 编辑后的显示(图片格式 左右对齐时 都有这个影响) done_1 done2 另外问一下,这个 edit界面里的 “源码”选项怎么关闭,不关闭会造成xss

99Kies commented 4 years ago

应该是我的问题😂,我再看看我的html吧

99Kies commented 4 years ago

用这张图片http://www-x-hnchangya-x-cn.img.abc188.com/data/upload/image/20191121/1574327395583098.jpg 你的demo也这样子😂 `%C5QXAY%C8V 4~W356NM

5 @{7 U6 N7L2`P3M@CKPVD

greyli commented 4 years ago

麻烦再发一下显示文章正文的模板源码和渲染后的页面源码。

99Kies commented 4 years ago
<main class="background-one">
<div class="background-one" >

    <div style="
    margin-left: 50px;
    margin-right: 50px;
">
    <div>
        <h1>text</h1>
        <small>
            Date: <span class="flask-moment" data-timestamp="2019-12-03T07:11:16Z" data-format="format('LL')" data-refresh="0" style="display: none">2019-12-03T07:11:16Z</span>
        </small>
        <hr>
    </div>
            <p>图片上面的事</p>

<p><img alt="" src="http://i0.hdslb.com/bfs/archive/fa357d1c7d1d9fd860d2236d62b90ef465e3e697.jpg" style="float:left; height:667px; width:1068px" /></p>

<p>图片底下的字</p>

            <hr>
        <div>
            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target=".postLinkModal"style="
    margin-bottom: 20px;
">Share</button>
        <a class="btn btn-info btn-sm" href="/new_msg" style="
    margin-bottom: 20px;
">Back</a></div>
            <div class="modal fade postLinkModal" tabindex="-1" role="dialog" aria-hidden="true" aria-labelledby="mySmallModalLabel">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                        <h5 class="modal-title">Permalink</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
</div>
</div>

</main>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask-CKEditor Demo</title>
</head>
<body>
    <div class="warpper" style="width: 700px; margin: auto">
        <h1>text</h1>
        <hr>
        <p><p>werwq</p>

<p><img alt="" src="http://www-x-hnchangya-x-cn.img.abc188.com/data/upload/image/20191121/1574327395583098.jpg" style="float:left" /></p>
</p>
        <hr>
        <a href="/">Back Home</a>
    </div>
</body>
</html>

flask-ckeditor可以通过python语言进行编写工具栏(定制工具栏)嘛

greyli commented 4 years ago

本地测试没发现这个问题,我认为你需要自己通过写对应的 CSS 来让图片正确显示。

这个 edit界面里的 “源码”选项怎么关闭,不关闭会造成xss

自定义按钮你大概要参考一下 CKEditor 的文档。「源码选项会造成 XSS」具体说说?

99Kies commented 4 years ago

i got it,清楚了。另外这种xss危害不大,并没有造成SSTI,我觉得可以保留