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.
Related
I am using highlight.js for syntax highlighting in a webpage.
When I change the content by setting the relevant innerHTML using JavaScript, the content output on the page updates as expected. However the changed content is not highlighted in the browser.
What is the correct way to deal with this situation, generally or with highlight.js using only JavaScript, HTML and CSS?
I found a solution thanks to #Afsar's insightful comment.
The function initHighlighting from highlight.js:
initHighlighting()
Applies highlighting to all <pre><code>...</code></pre> blocks on a page.
... contains an internal check to see whether it has already been run. Since I was attempting to run it more than once, highlighting was not working correctly.
So one possible solution to updating highlighting after updating content via JavaScript with no page reload is:
var element = document.querySelector(".class_that_contains_code_blocks");
var blocks = element.querySelectorAll('pre code');
blocks.forEach(hljs.highlightBlock);
I don't understand how wysiwyg such as Froala or Redactor, are able to render into proper HTML, something that you just copied from another webpage (and that would have rendered only as text if you pasted it somewhere else).
If you want to checkout the behavior I am talking about, just
go to this page : https://www.froala.com/wysiwyg-editor
then delete all the demo content in the editor
then copy some article on medium, wikipedia or whatever
Then paste it in the editor
You can see it is rendered as proper HTML (you can switch their editor to see the actual html behind) : bold is still bold, titles are titles, etc, as if the editor was somehow able to access the style of the copied page.
How do they access to this style ?
I am one of the guys who is working on the Froala Editor. The browser is doing most of the jobs in terms of placing the right style there in the browser clipboard object. We're just getting the style from the browser clipboard when the HTML gets pasted to the editor.
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?
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
I'm trying to add some JavaScript into one of my Wordpress pages. When I change the text area to HTML mode and paste in the JavaScript then save my changes. It does not appear on the page itself. Can someone please help me allow JavaScript in the default Wordpress page text editor?
The JavaScript that I am trying to input is:
<script type="text/javascript">
jQuery(function($){
$.supersized({
random : 1,
slide_interval : 3000,
transition : 3,
transition_speed : 900,
slide_links : 'blank',
});
});
</script>
WordPress is really picky about how you do the newlines and it will sometimes place <p> tags in there which will mess up JavaScript code. I would recommend looking at the source after you make the post and see if any of the <p> tags got incorporated. If so, go back and delete the white-spacing in that area and try again.
In the worst case, you can always use the Raw HTML plugin which will render the raw code for you:
http://wordpress.org/extend/plugins/raw-html/
You, or others viewing this question, might also want to try my plugin which enables support for inline JavaScript and JavaScript code blocks in the HTML editor tab. You don't have to use a shortcode or special markup and you can continue to use the TinyMCE wysiwyg editor without worrying too much about losing the content... If you delete everything in the Visual editor, you'll lose the code block, but edits, additions and targeted deletions of content are fully compatible.
It also preserves whitespace and indentation of HTML code when you switch between the HTML and Visual tabs among a few other minor features.
http://wordpress.org/extend/plugins/preserved-html-editor-markup/