I'm adding an *.php editor to a CMS similar to as is done in Drupal's node editor. Currently, I have a selectbox with the values WYSIWYG and PHP Code. If WYSIWYG is selected then code inside the text area will be parsed with something like Tinymce (I've read other answers and found markitup.jaysalvat.com but that seemed WYSIWYG less). Whatever the javascript editor, I'd like (or will be building) a bootstrap front end to allow col, rows, btn, etc.
If PHP Code is selected then the raw PHP code will be shown and editable. I played around with this a little the other day using htmlspecialchars_encode and htmlspecialchars_decode with $_POST and everything seems fine when using PHP Code editor.
However, when I used Tinymce it wrapped all my PHP in paragraph tags, etc. Is anyone aware of a addon or alternative WYSIWYG javascript script that can parse HTML code without messing up PHP code, preferably, but NOT necessarily with builtin Bootstap3 components?
If there is something open source already out there already, it could save me from developing the whole thing from scratch.
Thank you in advance.
Try adding this to your TinyMCE configuration:
protect: [
/<\?php.*?\?>/g // Protect php code
],
Related
I am programming newbie and I need your help.
I'm coding my first project and I ran across problem.
I needed text editor so I included TinyMCE 5. I'm coding in JavaScript and using mongoDB.
I included tinyMCE like this
<script src="https://cloud.tinymce.com/5/tinymce.min.js?apiKey=your_API_key"></script>
Everything works fine, https://imgur.com/a/hjwKipE
Until I try to save it to the mongoDB database: https://imgur.com/a/iaFRaP6
and render it on the page: https://imgur.com/a/o2rgK1X.
This is code I managed to grab from other StackOverflow post: https://imgur.com/a/JTWpgay
My goal is to render text on page(in ejs file), without html tags.
Thank you for your help,
Marian
Make sure you are getting plain html to write the textarea tag:
<textarea>
<p><strong>This is the strong text</strong><br></p>
</textarea>
So don't use the set the init_instance_callback, instead write the html to the textarea tag.
If you use the init_instance_callback, make sure ur template write only plain html.
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 want to copy/paste html from websites and store them in mysql database. To do this I have checked out CKEditor which allows me to paste html, even word documents and it generates html code for it. Since all I want is to "generate" the pasted data as html, instead of using a full wysiwyg editor like CKEditor, I want to write some code (perhaps with jquery) to convert the pasted data to have html tags and formatting.
To achieve this functionality, what do these online editors do? How do they convert the clipboard data to html code? Why do I get only text when I paste html formatted text or divs or buttons to this textarea here and images and properly sized divs on wysiwyg editors?
Do the editors access the clipboard data and manipulate it? Does clipboard save formatting data in an organized manner allowing the "CKEditor" or others to manipulate it?
Can this be done with jQuery? Or do we need server-side code as well?
If you can shed some light on this subjects I would appreciate it. I only want to know the method so that I can write appropriate code for it.
For reference: http://ckeditor.com/demo
Here's a crude demo which works in Chrome, IE9 and Safari: http://jsfiddle.net/SN6PQ/2/
<div contenteditable="true" id="paste-target">Paste Here</div>
$(function(){
$("#paste-target").on("paste", function(){
// delay, or else innerHTML won't be updated
setTimeout(function(){
// option 1 - for pasting text that looks like HTML (e.g. a code snippet)
alert($("#paste-target").text());
// option 2 - for pasting actual HTML (e.g. select a webpage and paste it)
alert($("#paste-target").html());
},100);
});
});
Not sure if this is what you are after, but it alerts HTML on paste. Keep in mind that a content editable element may change the markup on paste.
I've tried creating a new post on my Wordpress blog and I've pasted an external code from a site, which has a <script src="..."></script> in order to work.
When I publish my post, the script tag simply gets deleted.
Is this a default behavior in Wordpress? Is there any way to avoid this? (preferably without doing any modifications to Wordpress or using inline code).
No this is not default behaviour in wordpress. I have added <script> tags to the html view of a page or post no problem.
Did you switch the view after you add the code ? If so, don't. Wordpress will delete all tags if you switch to view back from HTML.
Like Tim said, you probably posted the code into the Visual Editor (doesn't accept any HTML tags, like scripts). You should to the HTML editor to implement your code, but if you want to have it on more than one page, you should open up the Appearance Editor and paste it into your theme where you need it (most likely in the header).
If you put the script code in html and then switch to the visual editor, it will delete the script. This is a commonly reported problem and is the default behavior of wp.
Wordpress assigns Roles to Users, Users who are either Administrators or Editors can add javascript codes within posts. If the User's role is Author or Contributor then they can not add javascript codes inside posts, even if these users try to add Javascript in HTML mode, wordpress automatically removes the tags.