如何使文本在编辑器中包装图像

Question

我的页面上有一个编辑器（Cleditor jquery插件）。

默认情况下，它可以插入图像，但文本不会包装它。我尝试过vertical-align：top，但它没有帮助：

我应该指出哪些css图像被文字包裹？您可以尝试在CLEditor demo page

上的firebug中执行此操作

P.S。我试过漂浮：左，它有效。但是我应该考虑它是编辑器，并且用户可以将此图像移动到右边（然后它应该是浮动的：右边，但是如何捕捉何时切换浮动方向） - 所以我认为，应该是另一个决定。

Answer 1

WYSIWYG编辑器不能代替正确的代码。一些较好的有一个CSS下拉列表将使用您自己的样式表，允许您选择图像并选择float:left（加上您可能也想要一些边距），或者一些自定义CSS类。

最重要的是，如果你不太小心，你会得到像<b>this<b></b> is bold<b>这样的东西。总的来说，他们是废话。

如果您使用的是标准版面，则可能需要定义类似的内容，并允许CSS执行工作而不是编辑器。

.article img {
  float:left;
  margin-right:5px;
  margin-bottom:5px

}

如果您将此级别的控制权交给不熟练的用户，则可能会产生意外结果。

如果您习惯使用HTML并进行直接编辑，则可以使用自定义CSS类。

  .article img.left {
      float:left;
      margin-right:5px;
      margin-bottom:5px

    }

   .article img.right {
      float:right;
      margin-left:5px;
      margin-bottom:5px

    }

然后你需要将类名添加到img标签：

<img class="left" src="..." />

或

<img class="right" src="..." />