CKEditor工具栏定位到具有浮动图像的内容的右侧

Question

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

内容必须环绕图像，因此我浮动图像。

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

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

好吧，你不应该把你的包装器放在左边。您还有额外的</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;
}

更新了小提琴：http://jsfiddle.net/n8WJ2/8/

Answer 2

CKEditor 不允许您配置工具栏的位置，有一些类似josh提供的解决方法。

但我认为最好的选择是为您的图片和可编辑内容创建一个容器div，以便CKeditor可以将条形调整到最佳位置。

以下是 Fiddle

HTML：

<div class="edit-container">
    <div id="editable" contenteditable="true">

    </div>
</div>

CSS：

.edit-container {
    border: solid 1px #ccc;
    min-height: 340px;
}

#editable {
    margin: 20px;
    margin-left: 340px;
}