Currently, I am facing an issue where inserting a string of text from a dropdown list into the Summernote text editor results in the closing of formatting tags such as <'strong'>, <'p'>, and more.
After inserting the string "AND", the HTML looks like this:
Bob AND I Loves Ice Cream and Cake. How about You?
<p><span style="font-size: 12px;"><b>Bob </b></span>AND <span style="font-size: 12px;">
<b>I </b></span><span style="font-size: 12px;">
<b>Loves Ice Cream and Cake. How about You?</b></span>
The challenge is to prevent the automatic closing and opening of tags around the cursor position. I have explored using insertNode() and insertText() functions but faced the same issue with both.
Do you have any suggestions or ideas on how to tackle this problem? Thank you!
EDIT: Below is a snippet of code showcasing the insertion at the cursor. I am enhancing Summernote's button functionality with the UppercaseButton feature.
var UppercaseButton = function (context) {
var ui = $.summernote.ui;
// create button
var button = ui.button({
contents: '<i class="fa fa-child"/> Uppercase',
tooltip: 'Highlight a data attribute that you would like to make uppercase',
click: function () {
var range = $('#taBody').summernote('createRange');
var newText = range.toString();
console.log("newText: " + newText);
console.log(range);
context.invoke("editor.insertText", newText.toUpperCase());
}
});
return button.render(); // return button as jquery object
}