javascript - CKEditor 工具栏定位到带有 float 图像的内容的右侧

Question

我正在使用 CKEditor 进行内容管理。我想将工具栏放置在我页面的右侧，我在左侧 float 图像，在右侧 float 内容。

内容必须环绕图像，因此我要 float 图像。

这是我研究时唯一能找到的链接，但这对我没有帮助。

CKEditor inline toolbar position

有人可以帮忙吗？

这是我的 jsfiddle 链接:http://jsfiddle.net/n8WJ2/7/

HTML:

 <div class="fl">
    <img src="http://www.destination360.com/north-america/us/montana/images/s/great-falls.jpg" height="300" width="300" />
    </div>
<div>
    <div class="section-title">Section title</div>
<div id="editable">
</div>
</div>

Javascript:

var j = jQuery.noConflict();

j(document).ready(function () {
    var editArea = j('#editable');
    editArea.attr('contenteditable', 'true');
    CKEDITOR.inline(editArea.get(0), {}, '');


});

CSS:

.fl {
    float: left;
}

#editable {
    min-height: 300px;
    border: solid 1px #ccc;
}

提前致谢

Answer 1

嗯，您不应该将 wrapper 放在左侧。你还有额外的</div>标签。

将您的 HTML 更改为:

<div class="section-title">Section title</div>
<div id="editable">
</div>

并且由于您的 CKEditor 有边距(从页边距开始)，您应该为图像添加边距。

.fl {
    float: left;
    margin: 40px;
}

#editable {
    min-height: 500px;
    border: solid 1px #ccc;
}

更新 fiddle :http://jsfiddle.net/n8WJ2/8/