I'm using the CKEditor.
I need to add text around the html outputted by CKEditor (i.e., an opening and closing tag around the html output; not an html tag).
Is there any way of doing this?
Thanks
you can get the html data within the editor via .getData()
Something like this might work for you:
var wrappedOutput = '<div>'+ CKEDITOR.instances.NameOfEditorInstance.getData() +'</div>';
Here is a link to the docs pointing to .getData()
Related
I'm using this code to grab html stored in a string into a div with contenteditable="true" (the string works, and if I manually place the code there it also works, but I need a way to "inject" html or whatever as text in it)
document.getElementById('content').innerHTML=txt
Problem is: It's not placing the html as text inside of it, but executing like it was part of the page. Is there a way around it? I need the HTML(javascript or whatever be written in the string) to be like text...
Use textContent instead to inject strings like this:
document.getElementById('content').textContent=txt
You should use textContent property:
document.getElementById('content').textContent = txt
for more information give a look on MDN
I'd like to allow the user to customize their user name using HTML tags, without restrictions.
The only problem I've found is they not closing tags...
Ex: (a user name with not closed tag: my<b>nick)
mynick: comment textinnocent user: comment text
I searched for a tag like <sandbox> my <b>nick </sandbox> or any way to force closing every open tag, but I have not been lucky.
Desired result:
mynick: comment textinnocent user: comment text
Is there any smart way to achieve this? (Only using HTML or JS/JQuery)
If you have any incomplete tags, the browser automatically tries to close it(doesn't seem to happen if you have an HTML code following).
If you look at this fiddle https://jsfiddle.net/hwpLyow0/1/
I have the HTML inside the DIV asHello <b><i>World!
But when I alert the HTML from the DIV I get
Hello <b><i>World!</i></b>
I would suggest using jQuery's .html() function or JavaScript's .innerHTML to get the HTML with tags closed.
EDIT:
If users are typing it in textbox, creating a new element(not appending it to document) will do the work for you.
var fix = document.createElement("div");
fix.innerHTML=document.getElementById("test").value;
Fiddle: https://jsfiddle.net/hwpLyow0/3/
When I'm editing HTML in the ace editor, is there a way to query that HTML in a simple way? With selectors?
[fake-html-dom].querySelectorAll("A").length
I read that when you use jQuery $('<html code>') the html gets inserted to the real DOM, I want to avoid actually running the HTML it in the window/iframe.
Would also be nice to be able to modify the found elements in the editor directly (like custom highlighting).
you can create a fake html document object like this:
var docImpl = document.implementation;
var fakeDoc = docImpl.createHTMLDocument("myhtml"/*it is just a title*/);
as you use a Ace html editor first you should read the html string from the editor, then extract the body content and finally insert it to the fake body. these are your steps to take:
//Ace usually uses ace_text-layer as the classname for the html string part
var htmlContent = document.querySelector(".ace_text-layer").innerText;
//you can also change this part if it didn't work, depends on your Ace version
now you should extract the body content, if it has <html> or <body> tags in it:
var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
var array_matches = pattern.exec(htmlContent);
var extractedContent = array_matches[1];
then insert it to the fake body
fakeDoc.body.innerHTML = extractedContent;
and finally do any desired query you might need:
fakeDoc.querySelectorAll("A").length
I have a variable with html in it like this:
var html = '<div>Hello, you're awesome!</div>';
I want to append it to an element $("body").append(html) for some reason it's not decoding the HTML Entity. I tried $("body").append($(html)); and that didn't work. My text is stuck inside the element and I can't individually put it together.
Is there any way to append html with a text-based entity inside it into another element, and have the html entity render on the page?
I've read a bunch of posts on stackoverflow reguarding html entities and it seems that none of them include the html & text within a variable like this.
Try this:
var html = $('<div>Hello, you're awesome!</div>');
$("body").append(html)
Demo here
It could be possible that your page did not finish loading while the jQuery code was trying to append the content. Try:
$(document).ready(function (){
var html = '<div>Hello, you're awesome!</div>';
$('body').append(html)
});
And I would suggest using single quotations only unless you need to use escaped characters.
I am writing a small jQuery plugin to allow inline editing (for my purposes I want a very small lightweight custom plugin). Everything works great except when I update the original tag with the new value it removes the edit image used to instigate editing, and as such no further edits are allowed.
I tried to the following, with replaces the edit image but the edit image no longer has the click handler associated with it.
The html looks a little like this
<h2 class="inlineEdit">Thing to edit<a href='' class='pencil_edit_image'></a></h2>
The javascript looks like:
var editThis = $(".inlineEdit");
var existinglink = editThis.find(".pencil_edit_image");
editThis.text($(this).val());
editThis.append(existinglink);
How best can I accomplish this?
Have you tried detaching it before it is replaced?
var existinglink = editThis.find(".pencil_edit_image");
existingLink.detach();
editThis.text($(this).val());
editThis.append(existinglink);
jQuery doesn't have support for text nodes, so the easiest is to put the text in an element so that you can easily access it:
<h2 class="inlineEdit"><span class="editable">Thing to edit></span><a href='' class='pencil_edit_image'></a></h2>
$(".inlineEdit .editable").text($(this).val());
To access the text node without adding an extra element, you can use the DOM element:
$(".inlineEdit")[0].firstChild.innerHTML = $(this).val();