How to Modify Element in CKEditor - javascript

I have CKEditor with config.fullPage = true;, so I have an entire document to work with.
My goal is to automatically find and modify the action of all form elements in the CKEditor content. I've tried using the method of converting the html string to jquery and back with no luck (I think it's because I'm working with a full document).
Any help is greatly appreciated!

If editor is the instance of your CKEditor, then calling editor.editable().$ will get you the native body element of the iframe, then you can keep using DOM methods or jQuery if you prefer.
jQuery(editor.editable().$).find('form').attr('action', '');

UPDATE
check this CKEditor Jquery Adapter and you can also get HTML of the element with .getHtml .
ANOTHER UPDATE
$("#mybutton").click(function(){
var editor_contents = CKEDITOR.instances[YOUR_TEXTAREA_ID].getData();
var dom = document.createElement("DIV");
dom.innerHTML = editor_contents
var plain_text = (dom.textContent || dom.innerText);
alert(plain_text);
});

Related

OneNote JavaScript API access element

I have tried to create my first One Note Add In using the JavaScript API. I have tried the example in the MS documentaion (Build your first OneNote task pane add-in). This one works.
Now I want to try to change the formatting of an element in the document. For example I want to change the font colour of a text. However, I have not yet found a way to access the elements in a document.
Can I access elements in a document via a JS Add In to change their "style" property?
How can I do that?
Thanks
Micheal
Finally, I found a way to access the OneNote page content from the JS Add In. You can load the page content using
var page = context.application.getActivePage();
var pageContents = page.contents;
context.load(pageContents);
Now you have access to the page content in the qued commands.
return context.sync().then( function() {
var outline = pageContents.items[0].outline;
outline.appendHtml("<p>new paragraph</p>");
var p = outline.paragraphs;
context.load(p);
...
});
So consequently you can access element by element in document the hirarchy.

Download html page and bind to a var

I'm new to javascript and jquery.
I wonder if there are any ways to download content of a target html page.
And bind the downloaded content to a variable , and later I can search for its tags inside or not.
Can anyone give me an answer please ? :)
Thank you
Yes, you can, using the jQuery 'load()' function: api.jquery.com
If you want to load it into a variable instead of an element, you cah use the 'get' function. After you loaded the html into a variable, you can wrap it to get a jQuery element.
A simple example (just pseudocode, copy/paste probably won't work):
$.get("/example.html", function( data ) {
var source = $(data);
//and now you have a jQuery element. You can use 'find' to seach the including tags
}, 'html');
Using HTMLAgilityPack to get the content from target html,like as
HtmlWeb htmlWeb = new HtmlWeb();
HtmlDocument doc = htmlWeb.Load(url);
doc.DocumentNode.SelectSingleNode(#"id('content')/div/div[1]/");
hopefully this help you.

Scroll to the bottom of ckeditor

any ideas on how to scroll to bottom of a ckeditor editor using javascript / jQuery?
I cant find anything.
All my search shows is:
document.getElementById("ID").contentWindow.scrollTo(0,3);
Which gives me an error of contentWindow is undefined.
The class of the ckeditor text part appears to be "cke_editable".
Any help on scrolling to the bottom of the editor?
Access the editor and get the editable area via that instead of getting the DOM element directly. Like so:
var editor = CKEDITOR.instances.editor1;
var jqDocument = $(editor.document.$);
var documentHeight = jqDocument.height();
jqDocument.scrollTop(documentHeight);
This works in the Demo: http://ckeditor.com/demo (you need var $ = jQuery; if you try it in the console).
Note that your editor might not be named "editor1" - use the appropriate name for you.

Parse and handle DOM that came as a string input

Here is the thing,
I have a textarea (with ID "input_container") full of HTML code, the simple example is:
<!doctype html>
<html>
<head></head>
<body>
the other place
</body>
</html>
How can I parse it and use it in jQuery as a legitimate DOM?
For example, to do
$(varWithDom).find(...)
with that DOM?
What I already tried
I tried to parse it using jQuery but a funny thing happened - jQuery removed the DOCTYPE and all of the HEAD, and left me with nothing but
the other place
My original method is here: jQuery HTML parser is removing some tags without a warning, why and how to prevent it?
I never found a solution yet. Any ideas? might this be a bug on jQuery or what?
If you need the entire content as elements, you might try using an iframe.
// create and append new iframe
var iframe = document.createElement('iframe');
document.documentElement.appendChild(iframe);
// set its innerHTML
iframe.contentWindow.document.documentElement.innerHTML = varWithDOM;
// grab the `window`
var win = iframe.contentWindow;
// remove the iframe
document.documentElement.removeChild(iframe);
Demo that grabs the head: http://jsfiddle.net/K6tR2/
original answer
It isn't so much jQuery removing it as it is the browser. This behavior will vary in different browsers.
One thing you might try would be to place the entire thing in a <div>, so that becomes your context...
$('<div>' + varWithDom + '</div>').find(...)
Now it won't really matter what is stripped away (unless you actually needed something in the <head>), because it will all be descendant of the outer div.
If you didn't want that, then you'd need to do your query twice, once with .find(), and once with .filter()...
var els = $( varWithDom );
var links = els.find( 'a[href]' ).add( els.filter( 'a[href]' ) );

Append html to jQuery element without running scripts inside the html

I have written some code that takes a string of html and cleans away any ugly HTML from it using jQuery (see an early prototype in this SO question). It works pretty well, but I stumbled on an issue:
When using .append() to wrap the html in a div, all script elements in the code are evaluated and run (see this SO answer for an explanation why this happens). I don't want this, I really just want them to be removed, but I can handle that later myself as long as they are not run.
I am using this code:
var wrapper = $('<div/>').append($(html));
I tried to do it this way instead:
var wrapper = $('<div>' + html + '</div>');
But that just brings forth the "Access denied" error in IE that the append() function fixes (see the answer I referenced above).
I think I might be able to rewrite my code to not require a wrapper around the html, but I am not sure, and I'd like to know if it is possible to append html without running scripts in it, anyway.
My questions:
How do I wrap a piece of unknown html
without running scripts inside it,
preferably removing them altogether?
Should I throw jQuery out the window
and do this with plain JavaScript and
DOM manipulation instead? Would that help?
What I am not trying to do:
I am not trying to put some kind of security layer on the client side. I am very much aware that it would be pointless.
Update: James' suggestion
James suggested that I should filter out the script elements, but look at these two examples (the original first and the James' suggestion):
jQuery("<p/>").append("<br/>hello<script type='text/javascript'>console.log('gnu!'); </script>there")
keeps the text nodes but writes gnu!
jQuery("<p/>").append(jQuery("<br/>hello<script type='text/javascript'>console.log('gnu!'); </script>there").not('script'))`
Doesn't write gnu!, but also loses the text nodes.
Update 2:
James has updated his answer and I have accepted it. See my latest comment to his answer, though.
How about removing the scripts first?
var wrapper = $('<div/>').append($(html).not('script'));
Create the div container
Use plain JS to put html into div
Remove all script elements in the div
Assuming script elements in the html are not nested in other elements:
var wrapper = document.createElement('div');
wrapper.innerHTML = html;
$(wrapper).children().remove('script');
var wrapper = document.createElement('div');
wrapper.innerHTML = html;
$(wrapper).find('script').remove();
This works for the case where html is just text and where html has text outside any elements.
You should remove the script elements:
var wrapper = $('<div/>').append($(html).remove("script"));
Second attempt:
node-validator can be used in the browser:
https://github.com/chriso/node-validator
var str = sanitize(large_input_str).xss();
Alternatively, PHPJS has a strip_tags function (regex/evil based):
http://phpjs.org/functions/strip_tags:535
The scripts in the html kept executing for me with all the simple methods mentioned here, then I remembered jquery has a tool for this (since 1.8), jQuery.parseHTML. There's still a catch, according to the documentation events inside attributes(i.e. <img onerror>) will still run.
This is what I'm using:
var $dom = $($.parseHTML(d));
$dom will be a jquery object with the elements found

Categories

Resources