Need Solution on NicEdit Insert HTML text into Instance - javascript

i am using this function to insert text into NicEdit,
function insertAtCursor(editor, value){
var editor = nicEditors.findEditor(editor);
var range = editor.getRng();
var editorField = editor.selElm();
editorField.nodeValue = editorField.nodeValue.substring(0, range.startOffset) +
value +
editorField.nodeValue.substring(range.endOffset, editorField.nodeValue.length);}
This code works fine for simple text but when i pass HTML content into it, it does not render the HTML output in div instead it dumps the HTML code as it is into the Instance Div.
Example:
<div class="one">Some text here</div>
This must show in the Instance as "Some text here"
and remaining code hidden in source code.
Can any one give me a solution to fix this problem?

After working whole night and trying different solutions I had finally got it working! :)
In case any one wants to know solution for this, I had to add a Replace function
replace()
for the content and made it support HTML.

See my answer HERE. It's a plugin I created to insert html at the cursor position.

Related

How do you insert HTML into a QuillJS?

Is it possible to insert raw HTML into a Quill? I've been searching the documentation but couldn't find anything.
If it's not possible, can I at least convert HTML into a Quill Delta?
The reason I need this is because I am grabbing the raw HTML of the text taken from Quill, so I can view it later in HTML style. Have I been doing everything wrong, and need to keep a Delta version of it as well?
On version 1.3.6,
You can use Quill.setContents(value) method.
And insert your new HTML like this:
const value = `<h1>New content here</h1>`
const delta = quill.clipboard.convert(value)
quill.setContents(delta, 'silent')
Quill documentation: https://quilljs.com/docs/api/#setcontents
I have found a way, looking extremely closely at the documentation. Method quill.clipboard.dangerouslyPasteHTML('raw html'); does the trick. https://quilljs.com/docs/modules/clipboard/#dangerouslypastehtml
Another way to insert HTML into Quill is by using vanilla JavaScript.
You can set your html to a variable, such as htmlToInsert.
Then target the contenteditable div created by Quill, by getting it by its class, ql-editor.
Finally, set the innerHTML of that div to the HTML you want to insert.
For example:
var htmlToInsert = "<p>here is some <strong>awesome</strong> text</p>"
var editor = document.getElementsByClassName('ql-editor')
editor[0].innerHTML = htmlToInsert
There is better way to do this:
const htmlMurkup = '<p>Good</p>'
let quill = new Quill()
quill.container.firstChild.innerHTML = htmlMurkup
I believe the most straight forward way is this:
quill.root.innerHTML = '<p>HTML Goes Here</p>'
You can also obtain the HTML from this property as well.
If you aren't getting the desired output. It could be because your html content is encoded.
Use this to convert it.
let realHTML = $('<textarea />').html("<p><strong>Hello</strong></p><p><br></p>").text();
console.log(realHTML);
This code will output
<p><strong>Hello</strong></p>
After this you can use this command to set the html content in quill editor
quill.root.innerHTML = realHTML;
or even this:
let initialContent = quill.clipboard.convert(realHTML);
quill.setContents(initialContent, 'silent');
Its proper your html is in the real html format before setting the value on quill. Else the html tags would be displayed verbally.
Just to add to #user1993629's answer, using quill.clipboard.dangerouslyPasteHtml(0, "raw html") will place the cursor at the end of the pasted content

How to find a particular element a replace it with another dynamically in jquery

I have been trying to add some custom features in tinymce editor. A button to highlight a text and the highlighted text should further be replaced with a underscore. This means that the mark element with it content should be replace with something like this:
<p> This yet another moment of trial. We <mark>keep</mark>doing it until it becomes <mark>perfect</mark>.</p>
To this:
<p> This yet another moment of trial. We <b>_____</b>doing it untill it becomes <b>____</b>.</p>
I have been trying it with this function
function getContentFromEditor() {
var content = tinymce.activeEditor.getContent();
content = content.replace("<mark>", "<b>______</b>");
document.getElementById("content_display").innerHTML = content;
}
But it only change the start tag.
This is the regex you need:
/<mark>\[^<>\]*<\/mark>/g
So your code should be updated like this:
content = content.replace(/<mark>[^<>]*<\/mark>/g, "<b>______</b>");
Demo:
This is a sample Demo:
var text = '<p> This yet another moment of trial. We <mark>keep</mark>doing it until it becomes <mark>perfect</mark>.</p>';
text = text.replace(/<mark>[^<>]*<\/mark>/g,"<b>______</b>");
console.log(text);
After making content changes to the tinyMCE editor dynamically you have to call the save function to update it visually.
Depending on your version:
tinymce.triggerSave();
or
tinymce.activeEditor.save();
First, you need to find all the marked elements.
And then loop over all those marked elements and replace them with the target HTML you want the elements to be replaced with
var replaceWithStr = "<b>____</b>";
var markedElems = document.getElementsByTagName("mark");
var markedElemsArr = [].slice.call(markedElems);
markedElemsArr.forEach(function(elem){
//elem.innerText = replaceWithStr; // this will only replace text
//elem.innerHTML = replaceWithStr; // this will not remove the mark tag, so your underscore will still be highlighted
elem.outerHTML = replaceWithStr; // this will give the required result
})
<p> This yet another moment of trial. We <mark>keep</mark> doing it until it becomes <mark>perfect</mark>.</p>
You can try using regular expressions:
content = content.replace(/<mark>[a-zA-Z]*<\/mark>/g,"<b>______</b>");

Javascript - .innerHTML - Displaying Text format Correctly

Rather New to javascript and hoping that I've come to the right place.
Currently I am trying to make a button that will place specific formatted text in a text box, however I am unsure on how to make the text keep its format.
I would like to be able to include elements like p /p and b /b in the text.
Example how I'd like to see it:
Customer is having problems, please proceed to the location and repair the service
Javascript:
function myFunction() {
document.getElementById("textbox").innerHTML = "Customer is having problems, please proceed to the location and repair the service ";
var oTextbox1 = document.getElementById("textbox");
oTextbox1.focus();
oTextbox1.select();
document.execCommand('copy')
}
Any help on this would be greatly appreciated.
If you use innerHTML then html gets rendered, if you use innerText then it is left unrendered
Considering input can't contain HTML You might want to look into contenteditable. Related question
document.getElementById("test1").innerHTML = "<b>Bolded?</b>";
document.getElementById("test2").innerText = "<b>Bolded?</b>";
<div id="test1" contenteditable></div>
<div id="test2" contenteditable></div>

Simulate paste into Textarea with javascript

When pasting data from the clipboard into an html textarea, it does some pretty cool parsing to make the paste look close to what was copied as far as newlines go.
For example, I have the following html on a page that I select (everything highlights in blue) and then I copy it:
Hello
<br>
<br>
<br>
<div>more</div>
<div>last</div>
So to be clear, what I am copying is what the output of this jsfiddle looks like.
Now when I paste this magical, copied text into a text area, I see exactly what I would expect: "Hello", empty line, empty line, empty line, "more", "last". Cool! Then when I use jQuery's .val() on the textarea, I get "Hello\n\n\nmore\nlast". Super cool. It took the br's and div's and was able to infer the correct newlines from it.
Now...
What I am trying to do it programmatically take the same data I copied earlier and set it as the textarea's value as if it were pasted.
Here is what I have tried...
So, say the stuff I copied earlier was wrapped in a <div id="parent">...</div>.
var parent = $("#parent");
var textarea = $("#theTextArea");
// Set the value of the text area to be the html of the thing I care about
textarea.val(parent.html());
Now I know this isn't the same as a copy-paste, but I was hoping it would take care of me and do what I wanted. It doesn't. The textarea gets filled with Hello<br><br><br><div>more</div><div>last</div>. The html that was once invisible is now stringified and made part of the text.
Obviously I did this wrong. .html() returns, of course, the string of html. But is there something I could call on parent that would give me the text with all inferred linebreaks?. I have tried calling parent.text(), but this only gives Hellomorelast (no line breaks).
A few notes that could help with an answer: I am using Angular, so I have access to all their goodies and jQuery.
Edit:
Solution
It is not nice but you can try to replace html tags with line breaks '\n' or do some line breaks in the html file and get the content with text().
var parent1 = $("#paren1");
var textarea1 = $("#theTextArea1");
var parent2 = $("#paren2");
var textarea2 = $("#theTextArea2");
// Set the value of the text area to be the html of the thing I care about
var text = parent1.html();
text = text.replace(new RegExp("<br>", 'g'),"\n");
text = text.replace(new RegExp("<div>", 'g'),"");
text = text.replace(new RegExp("</div>", 'g'),"\n");
textarea1.val(text);
textarea2.val(parent2.text());
JSFiddle

string search in body.html() not working

Hi here is my total work to search a string in HTML and highlight it if it is found in document:
The problem is here
var SearchItems = text.split(/\r\n|\r|\n/);
var replaced = body.html();
for(var i=0;i<SearchItems.length;i++)
{
var tempRep= '<span class="highlight" style="background-color: yellow">';
tempRep = tempRep + SearchItems[i];
tempRep = tempRep + '</span>';
replaced = replaced.replace(SearchItems[i],tempRep); // It is trying to match along with html tags...
// As the <b> tags will not be there in search text, it is not matching...
}
$("body").html(replaced);
The HTML I'm using is as follows;
<div>
The clipboardData object is reserved for editing actions performed through the Edit menu, shortcut menus, and shortcut keys. It transfers information using the system clipboard, and retains it until data from the next editing operation replace s it. This form of data transfer is particularly suited to multiple pastes of the same data.
<br><br>
This object is available in script as of <b>Microsoft Internet Explorer 5.</b>
</div>
<div class='b'></div>
If I search for a page which is pure or without any html tags it will match. However, if I have any tags in HTML this will not work.. Because I am taking body html() text as the target text. It is exactly trying to match along with html tags..
In fiddle second paragraph will not match.
First of all, to ignore the HTML tags of the element to look within, use the .text() method.
Secondly, in your fiddle, it wasn't working because you weren't calling the SearchQueue function on load.
Try this amended fiddle

Categories