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

发布于 2024-10-29 06:12:20 字数 417 浏览 0 评论 0原文

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

默认情况下它可以插入图像,但文本不会将其换行。我尝试过vertical-align:top,但没有帮助:

在此处输入图像描述

我应该指向什么css图像被文本包裹?您可以尝试在 CLEditor 演示页面 上的 firebug 中执行此操作

PS 我尝试过 float: left,它工作了。但我应该考虑到它是编辑器,用户可以将该图像移动到右侧(然后它应该是浮动:正确的,但如何捕获何时切换浮动方向) - 所以我认为,应该是另一个决定。

I have an editor on my page (Cleditor jquery plugin).

By default it can insert image, but text doesn't wrap it. I've tried vertical-align:top, but it didn't help:

enter image description here

What css I should point to image to get wrapped by text? You can try to do this in firebug on CLEditor demo page

P.S. I've tried float: left, and it worked. But I should consider that it is editor, and user can move this image to right (and then it should be float: right, but how to catch when to switch float direction) - So I think, should be another decision.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

绮烟 2024-11-05 06:12:20

所见即所得编辑器不能替代正确的代码。一些更好的有一个 CSS 下拉菜单,将使用您自己的样式表,允许您选择图像并选择 float:left (另外您可能也需要一些边距),或一些自定义 CSS 类。

最重要的是,你最终会得到类似 this如果您不太小心,则为粗体。总的来说,他们都是垃圾。

如果您使用标准布局,您可能需要定义类似的内容并允许 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="..." />

WYSIWYG editors are no replacement for proper code. Some of the better ones have a CSS drop-down that will use your own stylesheets, allowing you select the image and select float:left (plus you probably want some margins too), or some custom CSS class.

In top of that you end up with things like <b>this<b></b> is bold<b> if you're not too careful. Overall, they're crap.

If you're using a standard layout, you may want to define something like this and allow the CSS to do the work instead of the editor.

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

}

When you give this level on control to an unskilled user you're likely to end up with unexpected results.

If you are comfortable with going into the HTML and making direct edits, you can ise custom CSS classes.

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

    }

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

    }

Then you need to add the class names to the img tag:

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

or

<img class="right" src="..." />
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文