Adding HTML code directly at the cursor location within a contenteditable element

Question

Adding HTML code directly at the cursor location within a contenteditable element

On button click, I need to insert an element at a specific position within a contenteditable div.
Currently, the content is added at the end of the document instead of where the cursor was placed before clicking the button.

function append_content() {
  $("#myBtn").click(function(e) {
    var getOffset = $("#div_edit").offset();
    var relX = getOffset.left.toString() + "px";
    var relY = getOffset.top.toString() + "px";

    var ii = $('<span class="span-add">Add a link</span>')
      .css({
        top: relX,
        left: relY
      });

    $("#div_edit").append(ii);
  });
}

<button class="myBtn" id="myBtn">append content</button>
<div contenteditable="true" class="div_edit" id="div_edit">Lorem ipsum dolor sit amet</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Is there a way to add the content where the cursor was positioned within the specified div ($("#div_edit")) when clicking outside of it?

javascript html jquery css

Answer 1

Answer №1

Using execCommand

To insert a desired HTML portion at the caret position, you can utilize the `insertHTML` command with `execCommand`, eliminating the need to track pointer coordinates:

const elInsert = document.querySelector("#myBtn");

elInsert.addEventListener("click", () => {
  document.execCommand("insertHTML", false, `<span class="span-add">Add a link</span>`);
});

.span-add { color: red; }

<button type="button" class="myBtn" id="myBtn">append content</button>
<div contenteditable="true" class="div_edit" id="div_edit">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, quasi accusantium vitae ut error distinctio in sit minus, esse cum eos quidem corporis maiores dolores voluptate autem numquam vel illum.
</div>

It's worth noting that execCommand is deprecated, but continues to function well in most browsers.

Using Selection and Range

If you prefer not to rely on the deprecated execCommand, an alternative method involves utilizing Selection and Range:

const el = (sel, par = document) => par.querySelector(sel);
const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop);


const elInsert = el("#myBtn");

elInsert.addEventListener("click", () => {
  const range = getSelection().getRangeAt(0);
  range.collapse();
  
  const elNewSpan = elNew("span", { className: "span-add", textContent: "Add a link"});
  range.insertNode(elNewSpan);
});

.span-add { color: red; }

<button type="button" class="myBtn" id="myBtn">append content</button>
<div contenteditable="true" class="div_edit" id="div_edit">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, quasi accusantium vitae ut error distinctio in sit minus, esse cum eos quidem corporis maiores dolores voluptate autem numquam vel illum.
</div>

Answer 2

Using execCommand

To insert a desired HTML portion at the caret position, you can utilize the `insertHTML` command with `execCommand`, eliminating the need to track pointer coordinates:

const elInsert = document.querySelector("#myBtn");

elInsert.addEventListener("click", () => {
  document.execCommand("insertHTML", false, `<span class="span-add">Add a link</span>`);
});

.span-add { color: red; }

<button type="button" class="myBtn" id="myBtn">append content</button>
<div contenteditable="true" class="div_edit" id="div_edit">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, quasi accusantium vitae ut error distinctio in sit minus, esse cum eos quidem corporis maiores dolores voluptate autem numquam vel illum.
</div>

It's worth noting that execCommand is deprecated, but continues to function well in most browsers.

Using Selection and Range

If you prefer not to rely on the deprecated execCommand, an alternative method involves utilizing Selection and Range:

const el = (sel, par = document) => par.querySelector(sel);
const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop);


const elInsert = el("#myBtn");

elInsert.addEventListener("click", () => {
  const range = getSelection().getRangeAt(0);
  range.collapse();
  
  const elNewSpan = elNew("span", { className: "span-add", textContent: "Add a link"});
  range.insertNode(elNewSpan);
});

.span-add { color: red; }

<button type="button" class="myBtn" id="myBtn">append content</button>
<div contenteditable="true" class="div_edit" id="div_edit">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, quasi accusantium vitae ut error distinctio in sit minus, esse cum eos quidem corporis maiores dolores voluptate autem numquam vel illum.
</div>

Adding HTML code directly at the cursor location within a contenteditable element

Answer №1

Using execCommand

Using Selection and Range

Similar questions

Discover the power of uploading images using HTML5 with PHP

Guide to configuring Ionic Auto Height Sheet modal in Vue 3

Node.js Express.js Module for Asynchronous SqLite Operations

Troubleshooting Problem with the JQuery Cycle Plugin

hyperlink to choose a specific option from a drop-down menu

Unable to get jQuery click and hide functions to function properly

When I navigate to the About page in Vue, the data is automatically cleared

Reducing the size of CSS classes and IDs

What can you do with jQuery and an array or JSON data

Prevent the propagation of the ng-click event within a jQuery click event

Utilize a WCF Service with HTML and JavaScript

Regularly updating a book's interactive pages with turn.js technology

Reduce the zoom level in Chrome to 33% or lower and watch as the text "ascends" through a fixed height div with static positioning

Easy steps for aligning text with shiny html

Console is displaying a Next.js error related to the file path _next/data/QPTTgJmZl2jVsyHQ_IfQH/blog/post/21/.json

spacing for margins of table elements generated dynamically

Do you require the inclusion of hover functionality?

The outcome of the Javascript Calculator is showing as "Undefined"

Is there a problem with addEventListener returning false?

Tips for showcasing content on a jQuery calendar