Positioning CKEditor toolbar on the right side of the content when there is a floated image

I am currently using CKEditor for managing content. I am facing an issue with positioning the toolbar to the right side of my page, where I have a floated image on the left and the content on the right side.

The content needs to wrap around the image, which is why I have floated the image.

I did some research and found this link, but unfortunately, it didn't help me much: CKEditor inline toolbar position

If anyone could offer assistance, that would be greatly appreciated.

For reference, here's the link to my jsfiddle: http://jsfiddle.net/n8WJ2/7/

Here is the HTML code snippet:

<div class="fl">
    <img src="http://www.destination360.com/north-america/us/montana/images/s/great-falls.jpg" height="300" width="300" />
</div>
<div>
    <div class="section-title">Section title</div>
    <div id="editable">
    </div>
</div>

Javascript used:

var j = jQuery.noConflict();

j(document).ready(function () {
    var editArea = j('#editable');
    editArea.attr('contenteditable', 'true');
    CKEDITOR.inline(editArea.get(0), {}, '');
});

CSS styling:

.fl {
    float: left;
}

#editable {
    min-height: 300px;
    border: solid 1px #ccc;
}

Thank you in advance for your help.

Answer №1

Avoid positioning your wrapper to the left and remove any unnecessary </div> tags in your code.

Consider updating your HTML as follows:

<div class="section-title">Section title</div>
<div id="editable">
</div>

If your CKEditor has a margin, make sure to add a margin to your image element:

.fl {
    float: left;
    margin: 40px;
}

#editable {
    min-height: 500px;
    border: solid 1px #ccc;
}

Check out the updated demo here: http://jsfiddle.net/m5PrD/4/

Answer №2

Customize CKEditor does not have a built-in feature to configure the toolbar position, but there are workarounds available such as the one suggested by josh.

One effective solution is to create a div container for your image and editable content, allowing CKEditor to adjust the toolbar position accordingly.

Check out this Fiddle

HTML:

<div class="edit-container">
    <div id="editable" contenteditable="true">

    </div>
</div>

CSS:

.edit-container {
    border: solid 1px #ccc;
    min-height: 340px;
}

#editable {
    margin: 20px;
    margin-left: 340px;
}

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

Is there an optimal method for executing shell commands quickly in Node.js?

How can I efficiently run a large number of shell commands sequentially, for example 50 or 60 commands one after the other? For instance: const arr = ['/hello', '/temp', '/temp2', '/temp3', '/temp5', ...... ...

Is there a way for me to dynamically retrieve the input value produced by the Query?

Is there a way to retrieve the value of a dynamically created input field? $('#inputArea').append(" <input id = "arrivalTime1" type = 'number' placeholder='Arrival Time' style = 'display: none;'> " ...

HTML: Determine the Precise Location of a Div Element That is Centered

Imagine I have this image: Is there a way for me to determine the x/y or left/top properties of my canvas if it is centered using the following CSS: #canvas-container { width: 100px; height:100px; margin: 0px auto; } Note ...

Toggle the visibility of multiple divs depending on a specific attribute value

I previously inquired about this issue, but I believe my wording was unclear and the responses focused on how to display or hide a group of divs when clicking a button. While I understand that concept, my specific challenge is slightly different. Let me pr ...

Using Javascript to make a nested JSON api request that includes several query parameters

I am currently working on creating an API for my upcoming website, but I am facing difficulty in obtaining multiple query results using the same URL in an express app. Sample data: var data = [{ articles : [{ id : '0', url : ...

Processing JSON data of a quotation that is enclosed within double quotation marks

My value is a string: "['Eitaj', 'Jason Json', 'Eitaj M', "Jason Json's"]" Trying to parse it with JSON.parse() results in an error. Encountered SyntaxError: Unexpected token ' in JSON at position 1 I discovere ...

Unable to examine a specific component

As I attempt to inspect an element by right-clicking and selecting "Inspect," I encounter the following details: Screenshot1 Screenshot2 Despite trying the code snippet below, it did not yield the desired results for me: driver.findElement(By.id("tmsMo ...

What is causing the overwhelming reaction when using window.open() to open the same file?

I'm having trouble when trying to print a web page using JavaScript. The window.open() function does not load the style sheets of the same file. Here is my JavaScript code: function Print() { printWindow = window.open("", "mywindow", "location=1 ...

Managing deeply nested state updates in Redux using the spread operator

As I develop a large web application using react+redux, managing my store has become quite complex. I encountered an issue with updating nested properties in the store and came across the Immutable Update Patterns section of the redux documentation. It su ...

What could be the reason behind these links not affecting the height of my div element?

I am having trouble with the links not changing the height of the "holder" element. I can't seem to figure out what is going wrong. HTML: <div id="holder"> <a class="button" href="#"><span>home</span></a> <a class="b ...

`Slide align center in the bxslider``

I am attempting to create a slider that is centered on the view. The slide in the center should be positioned at the center of the red line(div). This is my attempt: https://fiddle.jshell.net/4xgpgng1/1/ <style> div.bxslider { margin:0 50%; text-al ...

Tips for avoiding duplicate elements in ASP.NET during postback

My issue is that I have a div with the ID "mydiv" and runat=server. <div ID="mydiv" runat="server"></div> I move mydiv to a Container using jQuery. $("#mydiv").appendTo('#Container'); After a PostBack, my div gets duplicated and I ...

Positioning Elements at the Bottom with CSS

Here's the CSS code I have: .cmon { background-repeat: repeat-x; background-image: url("line2.png"); position:absolute; bottom:0px; } The goal is to have the image (a line in this case) placed at the bottom of the page and re ...

Fetching external HTML content and subsequently running a script

Apologies if the title is unclear, I'm having trouble formulating my question. Currently, I'm attempting to use JQuery's ajax load function to load an external html file: $("a").click(function(){ $(".contentWrapper").load(pageURL+" .ex ...

Can you identify what's not right with my post request?

I am experiencing an issue with a post request code in jQuery. It appears to be sending the request and receiving results (verified in Fiddler), but it is throwing an error and displaying an empty alert in the web application. Can anyone pinpoint what migh ...

Trying to access the label attribute of a select option in Vue.js?

Looking to retrieve the name attribute of a selected option in Vuejs. After experimenting with the value attribute, I found that it worked successfully. Below is the code I used: Tested code: <select id="countryselect" name="country" @change="onChange ...

Utilizing a filter within the ng-model directive

I have a question about using a filter with an h3 element. Here is the code snippet: {{ event.date | date:'dd-MM-yyyy' }} It's working perfectly fine and Angular is formatting the date as expected. However, when I try to use the same filte ...

What is the best way to transmit multiple files to the server in node.js?

As a newbie to the world of web development (I've only been coding with luau for around a year), I'm encountering an issue when trying to send multiple files when my server is pinged. Specifically, I want to include a separate style.css file and ...

What is the best way to utilize a template within a select dropdown?

Utilizing Knockout.js, I've successfully created a pseudo-select list with the following code: <div style="width:325px;height:500px;overflow:auto;" data-bind="template: { name: 'group-tmpl', foreach: explorer().categoryData }"></di ...

Issue encountered when invoking the callback function in Node.js with console prompt libraries

Whenever I work with libraries that allow me to input data into the console, I always encounter a bug that prevents me from properly using callback functions. The issue is that the callback works fine without the data input part, but when I try to use it w ...