jquery - 如何使文本在编辑器中环绕图像

Question

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

默认情况下它可以插入图片，但文本不会换行。我试过 vertical-align:top，但没有用:

我应该将什么 CSS 指向图像才能被文本包裹？您可以尝试在 CLEditor 上的 Firebug 中执行此操作 demo page

附言我试过 float: left，它起作用了。但我应该考虑到它是编辑器，用户可以将此图像向右移动(然后它应该是 float: right，但如何捕捉何时切换 float 方向) - 所以我认为，应该是另一个决定。

Answer 1

所见即所得编辑器不能替代正确的代码。一些更好的有一个 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="..." />