CODEWITHSUNDEEP
jquerycsseditorword-wrap
Eugene
Eugene

Reputation: 11270

How to make text to wrap image in editor

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.

Upvotes: 0

Views: 1154

Answers (1)

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

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="..." />

Upvotes: 1

Related Questions