How to make text to wrap image in editor


Tags: jquery,css,editor,textwrapping

Problem :

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.



Solution :

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

    CSS Howto..

    CSS How to create a container with non-linear borders

    How to display picture from center, small frame bigger picture

    How to apply jQuery on css selector :before [duplicate]

    How to make a small icon using css?

    How to implement fade-in and other effects using CSS

    How do I place a small paragraph to the right in between a text article

    How can I Find/Replace part of a wildcard search in Notepad++

    With html tables, using CSS, how do I get the tables next to each other?

    How to use javascript to transition a property from a set attribute to a new attribute

    How can I push to the top an element using slideUp?

    How can I resize svg using CSS?

    How can I instantly stop a CSS animation on hover?

    How to use easily svg as icon?

    How can I horizontally align these divs?

    How to add class CSS after ng-click to parent element?

    How to override all of the CSS for a specific element?

    How to click on and off submenu's using javascript

    How to create gradient background with CSS in Firefox < 3.6?

    How do I make a (mock) bank system? [closed]

    CSS- How to create child menu towards leftern side

    How to write a:hover in inline CSS?

    How can add atribute to css of page on page load event

    How to make footer invisible on making screen size smaller?

    How to add CSS to a specific div class - WordPress

    How to override active admin CSS?

    How to make html table made by list responsive?

    How to add composite css -webkit-mask-image?

    How to get button groups that span the full width of a parent in Bootstrap?

    How to add CSS class to the HTML5 picture element

    CSS: How to make the border of a

    tag to be 100 percent on the div tag?