如何在编辑器中使文本环绕图像
我的页面上有一个编辑器(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:
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
所见即所得编辑器不能替代正确的代码。一些更好的有一个 CSS 下拉菜单,将使用您自己的样式表,允许您选择图像并选择
float:left
(另外您可能也需要一些边距),或一些自定义 CSS 类。最重要的是,你最终会得到类似
this如果您不太小心,则为粗体
。总的来说,他们都是垃圾。如果您使用标准布局,您可能需要定义类似的内容并允许 CSS 而不是编辑器来完成这项工作。
当您将此级别的控制权交给不熟练的用户时,您可能会得到意想不到的结果。
如果您习惯于进入 HTML 并进行直接编辑,则可以设置自定义 CSS 类。
然后你需要将类名添加到 img 标签中:
或者
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.
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.
Then you need to add the class names to the img tag:
or