Tips for creating text that wraps around an image in an editor

On my webpage, I am using an editor called Cleditor jquery plugin.

The default setting allows me to insert images, but the text does not wrap around it. I attempted using vertical-align:top, but it did not resolve the issue:

What CSS property should I apply to the image in order for the text to wrap around it? You can experiment with this on the CLEditor demo page

P.S. I tried float: left and it worked. However, since it is an editor, the user may move the image to the right (in which case it would need to be float: right). How can I detect when to switch the float direction? Therefore, I believe there must be a better solution.

jquerycsseditorword-wrap

Answer №1

WYSIWYG editors can't compare to writing proper code. Some of the better ones offer a CSS drop-down option that allows you to utilize your own stylesheets. You can select an image and apply float:left (and add some margins), or create a custom CSS class.

If you're not careful, you may end up with messy code like 

<b>this<b></b> is bold<b>
. Overall, WYSIWYG editors are subpar.

If you're using a standard layout, it might be beneficial to define specific styles in your CSS rather than relying on the editor.

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

}

Giving unskilled users this level of control often results in unexpected outcomes.

If you're comfortable editing HTML directly, consider using 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

    }

Don't forget to assign these class names to your image tags:

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

or 

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Execute a task prior to invoking a different task

I'm currently working on an image slider that has some interactive features. Here's how it functions: When a user clicks on an image, it slides and comes to the front. On the next click, the image is flipped and enlarged. Then, on another click ...

jqueryhtmlcss

Embed a video clip into an HTML webpage

I attempted to embed a video using HTML. I followed the player script instructions and added the necessary paths and scripts, but unfortunately, the video is not visible on the webpage. Instead, when clicking on the area where the video should be, it opens ...

htmlcssvideo

Hover effects in CSS animations can be hit or miss, with some working smoothly while others may

Below is the HTML content: <div class="wrapper"> <figure align="center"><img src="http://www.felipegrin.com/port/or-site.jpg" alt=""><br><span>RESPONSIVE HTML5 WEBSITE FOR <br> OR LEDS COMPANY</span></fig ...

css

Accessing the next and previous elements using jQuery

Aug: <input type="text" value="100000" name="targetMonth_8" id="targetMonth_8" class="targetMonth" disabled> Sep: <input type="text" value="100000" name="targetMonth_9" id="targetMonth_9" class="targetMonth" disabled> Oct: <input type="text" ...

javascriptjquery

An unusual 1px variance appears in the background-image on Internet Explorer

Having trouble with a sprite of two images showing a 1px difference in ALL versions of Internet Explorer, yet working perfectly in Firefox. Check out the demonstration here: http://jsfiddle.net/bHUs3/6/ I'm feeling frustrated. What could be causing ...

jquerycssinternet-explorer

Arranging HTML elements with jQuery - the existing script flips back and forth

I have created a code snippet on CodePen that showcases a feature of the website I am currently developing: http://codepen.io/barrychapman/pen/BzJGbg?editors=1010 Upon loading the page, you will notice 6 boxes. The first box is active, while the remaining ...

javascriptjqueryhtmlcssdom

Is there a way to attach an event for multiple arithmetic operations to a checkbox?

My form includes 4 checkboxes for different mathematical operations. <form action="" method="POST"> Select number of questions: <input type="number" name="que" value="que"> <br> <br> Select number of series: <select name="sel ...

javascriptphpjqueryhtml

Use a function to handle button click events rather than relying on the id

Hello everyone, I am a beginner and I have a question about using a function on two buttons with #ID. The problem is that I have to write the same function twice for different button IDs. I want to call the function with Onclick so that I only have to writ ...

jquery

how to display ajax response in webpage using jQuery

I need to perform multiple ajax calls in a for loop, with each call returning a text/html response that needs to be printed. Here is the code I have implemented: function printBill(printBills, lastBillNo, type,taxType,outletId,date){ var printableObjects ...

javascriptjqueryajax

Clickable link remains functional after being hidden

Even though I have hidden the Games-div using the .hide() function in jQuery, my links are still clickable. Is there a way to make them unclickable after being hidden? Here is the link to my code on jsFiddle: http://jsfiddle.net/hypertje/Frv8G/ Note: The ...

jqueryhtmlcss

When hovering over the menu list, the background-color of the text area remains the same

I am facing an issue with my list menu. The hover effect changes the background color only in the box area, but not in the text area. I would like to figure out a way to make both areas change color on hover: Here is the code snippet: <div class="se ...

csslistmenubackgroundhover

The JSON data updates with each new page load

My AJAX call retrieves data from a JSON file, where I calculate the length of the object and extract just the length. Initially, everything works smoothly. However, upon refreshing the page, the data is not displayed in the same order. // The URL is obtai ...

jqueryajax

Creating dynamic div elements using jQuery

I used a foreach loop in jQuery to create some divs. Everything seems to be working fine, but for some reason, my divs are missing SOME class properties. Here is the code snippet I am using: $("#item-container").append("<div class=\"panel col-md-2 ...

javascriptjqueryhtmlcss

Double the Trouble: jQuery AJAX Making Two Calls

I've already posted a question about this, but I have now identified the exact issue. Now, I am seeking a solution for it :) Below is my code snippet: $('input[type="text"][name="appLink"]').unbind('keyup').unbind('ajax&apos ...

phpjavascriptjqueryajaxjson

triangle shape filled with a gradient that transitions between two colors

I have two triangles displayed at the bottom of my page - one on the left and one on the right. The right triangle is currently transparent but I want to add a gradient effect to it. For the triangle-bottom-right, I'd like the gradient to go from rgb ...

htmlcsscss-shapeslinear-gradients

What is the best way to make translateX transition function in Firefox?

I am encountering an issue with my code working in Chrome but not Firefox. Can anyone offer suggestions on how I can address this problem? The intended functionality is for the door to open when hovered over and for the landscape image to scroll across. Ho ...

htmlcssfirefoxhover

The Ajax response is coming back with a null value, but upon inspecting the network response

I'm facing a strange issue where one specific value from an ajax json response is showing up as an empty string, while all other values are appearing correctly. An unusual aspect of this problem is that the network panel displays the correct value in ...

javascriptjqueryasp.netajaxangularjs

Displaying a hand cursor on a bar chart when hovered over in c3.js

When using pie charts in c3js, a hand cursor (pointer) is displayed by default when hovering over a pie slice. I am looking to achieve the same behavior for each bar in a bar chart. How can this be done? I attempted the CSS below, but it resulted in the h ...

javascriptcssd3.jsc3.js

Resolving TokenMismatchException when deleting with Laravel and AJAX

I am attempting to send a delete request using ajax. However, I am encountering a persistent issue where I always receive a TokenMismatchException even after including X-CSRF-TOKEN in the request header. Can anyone provide insight into what I might be do ...

phpjqueryajaxlaravel

New approach of using Django to replace Ajax method

My current input elements are: <input id="country_name" type"text" /> <input id="country_id" type"text" /> I am looking to dynamically update the ID based on the country name entered in the country_name input using the onchange event. To achi ...

jquerypythonajaxdjango