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

Navigate through a series of div elements using Jquery

I need help figuring out how to make the window scroll between different divs in a sequence. The issue is that my current code only works for one specific div at a time. $('.down_arrow').click(function(e){ $('html, body') ...

javascriptjqueryscroll

Utilizing Unicode characters within the content of a pseudo element in data-content

Is there a way to include unicode in the data-content attribute using JQuery for pseudo element content? I'm having trouble with the correct formatting. How can I properly display unicode characters? Currently, all I see is &#x25BC;. a::after { ...

jquerycssunicodepseudo-element

Updating choices within a div in real-time by changing the select box dynamically

I need to swap out the select box that is nested inside this div <div class="models"> <select disabled="disable"> <option>Model Name</option> </select> </div> I am attempting to target the div and manipul ...

javascriptjqueryhtml

Creating a dynamic checkbox list in PHP populated from a SQL database, depending on the selection made in

I offered my services as a volunteer to develop a database for my school in order to effectively monitor student misconduct. While I am not an expert, I resorted to self-learning through online tutorials and Google searches to piece together the solution. ...

phpjquerymysql

Issues are occurring with the @font-face css for the Futura Bk BT Bok.ttf font file

Is there a way to incorporate the 'Futura Bk BT Bok.ttf' font into my website using the CSS @font-face rule? Here is a snippet of my current CSS: @font-face { font-family: abcd; src:url('Futura Bk BT Bok.ttf') format('true ...

cssfontsfont-face

Refreshing a specific area on a webpage through the use of Ajax technology

I need to update a specific part of my webpage when a user clicks on the 'clear' button. I currently have some code that I borrowed from another answer I found on this site: $('.clear').click(function () { $.ajax({ url: "", ...

jqueryhtmlajaxrefresh

The success function in AJax does not properly execute on Safari browsers

Here is an example of my AJAX function: $.ajax({ url: "thankyou", type: "POST", data: arr, tryCount : 0, retryLimit : 3, success: function(response) { if(response == "Success"){ location.href = "/thankyou.html"; }else{console.l ...

jquerynode.jsajaxexpresssafari

Make the width of a table column match the width of the header

I am currently using Primeng2 datatable and I am looking to adjust the column width to match the header size. This is my HTML code: <p-dataTable #dtselfcollectmonthly [exportFilename]="exportname" [rows]="10" [value]="rawdatatrucks"> <ng-con ...

htmlcssangularprimeng

How can I retrieve my cropped image using Symfony2 Cropit?

My experience with this plugin has been disappointing. As someone new to JS/Jquery, I really needed this plugin for my website. That's why I came across cropit here: I struggled to figure out how to retrieve my cropped image in my controller and save ...

phpjquerysymfonypluginscrop

Reloading a webpage does not clear HTML tables containing jQuery interactions in Firefox

Apologies if this question has already been asked. I incorporated hide/unhide features using jQuery into a simple HTML table. The table functioned correctly in Chrome 24.0.1312.52 m and IE8+. Yet, upon refreshing the page in Firefox 15.0.1, the pr ...

jqueryhtmlfirefox

Prevent users from selecting an option depending on a specific criteria

I need help with disabling select options based on specific time instances. For example, I want the user to provide specifications by 6:00 am in order to use the system at 10:00 am, ensuring there is a 4-hour gap between the two times. So, after 6:00 am, t ...

jqueryhtml

Ajax doesn't display the database table when a radio button is selected

As a beginner in web programming, I encountered an issue while using ajax and jQuery to retrieve MySQL data based on the value selected from a radio button upon submission. In this case, I am utilizing PDO for the query process. Below is my code snippet: 1 ...

phpjqueryajax

Switching the source of the video with a click

I am currently working on a project where I need to swap out youtube videos based on the thumbnail that the user clicks. The setup is such that there is a video displayed along with 2 thumbnails below it. When a user clicks on one of the thumbnails, the vi ...

jquery

photos arranged in rows rather than a single row

Looking for help with arranging the remaining photos in the second row? Check out this example image link. I'm struggling to organize a row of overflow images within the "small-img-row" division. This row is located under the main image in col-2. H ...

htmlcssflexbox

Ways to extract innerHTML content from a loaded element generated by using the .load() method

Check out the code snippet below: template.html : <div id="nav"> Welcome to Space </div> layout.html : <div id="content"> </div> $('#content').load("template.html #nav"); ale ...

javascriptjqueryhtmldom

Adjust the parent element to match the width of the child by utilizing the "display: grid" property

edit: I'm uncertain if this is a duplicate issue. My concern is not about the background color extending beyond the container width, but rather about expanding the container to match the size of its child with display: grid. I have updated the example ...

htmlcsscss-grid

Utilize a jQuery selector to target the initial element of every alphabet character

I'm seeking some assistance with jQuery selectors and have a specific scenario that I need help with. Here is the HTML structure I am working with: <ul> <li class="ln-a"></li> <li class="ln-b"></li> <li cl ...

javascriptjqueryhtmlcssregex

Switch navigation - always display the menu on the existing page

I have a toggle menu implemented. Please check out the code and functionality on JsFiddle When clicking on a h3 tag like Category 1 (which is an a tag), the menu opens and remains open on the current page. However, if you click on the h3 tag (Category1) ...

javascriptjqueryhtmlcss

What is the best way to incorporate variables into strings using JavaScript?

Can someone help me achieve the following task: var positionX = 400px; $(".element").css("transform", "translate(0, positionX)"); Your assistance is greatly appreciated! ...

javascriptjqueryvar

Slider text in Master not adjusting properly for mobile devices

I am at my wits' end trying different solutions to make this work properly. The text on the slider of my homepage appears jumbled up when viewed on a mobile device. I suspect it might be related to responsive design? Could someone please take a look ...

htmlcsswordpressmobilemasterslider