Prevent Summernote html wysiwyg editor page being changed by content CSS - javascript

We are using the Summernote wysiwyg editor to review/preview html content of which some contain external stylesheet references. Some of this css changes not only Summernote itself but the parent page within which Summernote resides.
To demonstrate, just go to the summernote.org page and drop this css reference into the online editor (selecting "< / >" for code view first). You should see the toolbar (and contents on some pages) becoming centered and other undesired changes because of the css that's within the editor :-
<link href="https://owa.kccd.edu/owa/14.3.248.2/themes/resources/logon.css" rel="stylesheet" type="text/css" />
We have tried to put summernote within an iframe tag but this doesnt help so is there a way of isolating summernote thus preventing this css "leakage" to the surrounding page?
For reference, we are using asp.net Razor pages.
Thanks.
James

After much research it seems because Summernote does not reside within it's own iFrame, any CSS included within will naturally propogate to the surrounding page. Others have commented on this although I don't have that information source to hand.
We had no choice but to change to ckeditor, which is working really well for our needs.

Related

Force ignore Prettify within Redactor Editor?

I am currently looking for a way to implement prettify into my website to allow for code snippets to be posted within the content of pages.
The Problem:
I am using Redactor WYSIWYG and this is causing some problems within the editor (prettify styles the code block within the editor, adding the styled html to the HTML view as well as the submission of the content to the database)
Is there any way to force redactor to ignore the prettify styling when editing content, and only have the styling applied to the final submitted content (when displayed on a page).
Display Example: Prettify on front end only (no styling submitted with the content).
Editor Example: I don't want the editor to be prettified.
Problem Example: This is why I don't want the editor to apply prettify.
The problem with this is, when you come back to edit the article it applies the prettify styling within the content, and then that styling displays as plain text (as part of the content of the code snippet).
Is there any way to force ignore prettify within Redactor or a work around to my problem?
Prettify source: https://github.com/google/code-prettify
Redactor: http://imperavi.com/redactor/
For anyone else interested in using Prettify in conjunction with Redactor on their website, I resolved my issue with the following javascript:
$(document).ready(function() {
if (!$('#redactor').length){
//Redactor Editor Not Found
var x = document.createElement('script');
x.src = 'js/prettify/run_prettify.js?autoload=true';
document.getElementsByTagName("head")[0].appendChild(x);
}
});
On load, the script will look for anything containining id="redactor" and if it is not found, it then loads the prettify script, otherwise if redactor is found (meaning you have an editor on the page), it is never loaded.
This keeps redactor from inheriting prettify styling within the editor and submitting it within your content.

Handling unclosed divs (and other problematic HTML code) in TinyMCE

I have an html page with a TinyMCE editor in it.
In the editor I would like to edit HTML code that I get from external source.
Some of the HTML I want to edit are problematic, for example I had one code with an unclosed div. What happens in that case, is that the rest of the HTML (after the TinyMCE editing part) gets messed up - because the rest of the HTML is not parsed properly, and that's understood.
The question is how to solve this issue.
Approach 1 - Is to try and solve it on the server side. That's problematic, because I don't want to actually touch/modify that HTML source, the editing process that I need the Tinymce for is just for language changes by the editor. If I'd implement some HTML fixing mechanism on the server side, I might end up with automatic changes to the HTML I didn't plan to.
Approach 2 - If I had some tag in HTML - that would be great - and tag in which the html code in it does not effect the outside code. Do I have that kind of tag?
Approach 3 - Is to think of putting the HTML code inside an inline IFRAME. The problem here is that my control buttons for SUBMIT are outside of the IFRAME - and the TinyMCE is in the IFRAME, so how would I do the Javascript communication then?
Approach 4- Is to wrap the HTML code given to the tinyMCE with an tag, and then after editing, to strip it out. Would that sound like a decent solution? I couldn't actually succeed in wrapping the html in an iframe inside on the tinymce input.
What do you guys say?

Programmatically add all Css stlyings from external CSS stylesheets to the html's <head> tag

I am using a python library to convert HTML page into PDF.
It does it correctly, except it only handles inline styling. It does not reflect the styling applied to DOM elements using external style sheets.
So, as a solution I am thinking of adding those CSS styling from all the external CSS stylesheets into the head tag of the html file and then send it to get converted into pdf.
But, I am not sure how? Can anyone give me any ideas or atleast suggestion on how to go around fixing that? Or, if they know a better solution.
Much appreciate
Is the python running outside or client-side? You can examine the solution here # http://www.xportability.com/XEPOnline/FOTestSuite.html. While this does a lot more, you can reach through that page to the included Javascript. Look for flattenstyle.js for inspiration.
Because our handling is different, we actually copy a selected div element to another hidden div and "flatten" the style by extracting styles we want. What you could do is run such a javascript on page load and save out the div and not destroy it, then you have most all the print styling in the HTML.

TinyMCE iFrame isn't using parent's theme css

I'm implementing tinymce editor, it creates an iframe with head and body. To insert my site's css I just use the content_css : "path/to/css/mysite.css" in the init() for the tinymce, but that for some reason isn't working, it's not being reflected on the iframe, is there any possibility to make it work?
The editor is working but without my site's css styles.
Btw I'm using the latest TinyMCE version (4.0.12)
Thanks in advance.

Editing <html>, <head>, <body> etc. in WYSIWYG editor

I'm using the WYSIHTML5 editor: http://xing.github.io/wysihtml5/
This editor adds an iFrame to the page and updates a textarea whenever you make a change to the iFrame's contenteditable body. It's similar to many other WYSIWYG editors, so my issue should apply to other editors.
My issue is I want to be able to edit <html>, <head>, <body> and other important base tags through this editor. You obviously can't edit them in WYSIWYG mode, so raw code mode would be fine.
When I enable these tags, they are stripped out by the browser itself because those tags have already been opened by the page in the iFrame itself. So when I switch between raw code and WYSIWYG modes, they are lost.
I use the default "advanced" parser rules and merge them with these: http://pastebin.com/6QvYkqm4 with jQuery's recursive $.merge().
How can I get around this but still use this plugin? Have I misconfigured the plugin? I'm sure I've enabled the tags in the parser rules.
I highly recommend you use as JQuert TE WYSIHTML textarea editor though even it it is buggy, but compared to many others its alot better.
The JavaScript libraries with which WYSIHTML editors are built with search for those tags and deletes them because it's a security flaw not to, and it will probably warp a site layout if its left in. Imagine if a user changes the page's headers. If you really want to implement those feature I would suggest you find the code that deletes those tags in WYSIHTML5's library and alter it to not recognize the those specific tags. Good luck.
Edit:
Example:
In the folder parser_rules of WYSIHTML5 select advanced.js or basic.js (depends what you are using) find:
"head": {
"remove": 1
},
replace with:
"head": {
"rename_tag": "head"
},
Repeat this process with different rules that until you have a desired rule set. WYSIWYG textarea editors all have different JavaScript librarys but the one your using is simple enough to edit.
A WYSIWYG editor is not the solution you're looking for since you can't "see" (format with styles) the head or markup of a page. You should take a look at http://codemirror.net/
HTML example page

Categories