im trying to use TinyMCE as part of a web form. Integration works fine, but once you submit the form, of course the data will be validated.
If validation evaluates to false, for example some other input has not been filled out, then of course I don't want the user to reenter all data. So i pass the Tinymce content back to the reloaded view.
The following problem occurs:
Content in Tinymce Textarea: test
Content in Tinymce after reload: <p>test</p>
So an extra paragraph is added as a wrapper each time.
I want Tinymce to treat the input, as if it was inserted into the html view, so that the plain text view would be allright, and no extra paragraphs are inserted.
How can I achieve this?
Thanks for your reply. That was just an example input, I definitely need an RTE, since I'm building some customized CMS functionality. I got it working now with html_entity_decode(), the html comes from a database, and yes, I do filter user input properly (basically CI does, but I tested to XSS on my own, just to make sure...). I'm not sure if I'm doing this the most elegant way...but the following seems to work fine for me:
JS Part:
<script type="text/javascript" src="<?php echo base_url();?>tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
$(document).ready(function(){
tinyMCE.init({
theme : "advanced",
mode : "textareas",
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
entity_encoding : "raw",
content_css : "<?php echo base_url();?>xcss/standard_tinymce.css",
});
});
</script>
Generate form textarea (the CI way):
echo form_textarea('content', html_entity_decode($content));
Thats it.
An input like:
<p><strong>test</strong></p><p>bla bla bla</p>
Would now be shown the following way in tinymce if it was stored in $content:
test
bla bla bla
And if you submit the form, then the post-data will be equal to $content again. And that is exactly the point where you should consider to check that post data for injections or XSS attacks, so please do not do it the same way, unless you keep track of what happens next...my solution probably is not very safe in ALL cases, in my case, this is fine, I assume, but if anyone knows better, I'm definitely willing to learn more about that ;)
You can specifically tell TinyMCE not to wrap your content into a root tag by specifying
forced_root_block : false
in your TinyMCE init options.
However this is not recommended for various reasons, please read this entry in the FAQ:
http://tinymce.moxiecode.com/wiki.php/TinyMCE_FAQ#TinyMCE_produce_BR_elements_on_enter.2Freturn_instead_of_P_elements.3F
Its quite simple.Add this to the tinymce init options
force_p_newlines : false
This is not possible due to the fact that tinymce (and all other rtes i know of) need to wrap text into block elements like p-tags or divs. This is neccessary in order to be able to style that text (one of the main functions of a rte).
You might consider not to use a tinymce editor for such simple form inputs if you do not need html code there.
Related
I am using CKEditor in DIV mode, as compared to an IFRAME and I am attempting to assign a class to the editor itself. I have found where to add it to things within the editor, but not the editor itself. And, I would prefer to not wrap the editor within another DIV to get the effect I want.
I am also using version 4 of CKEditor.
Edit: The following was my questions to Reinmar after he suggested the Shared Space plugin, which at least for now I have chosen not to use.
Edit: In response to Reinmar I have begun using the Shared Space plugin, and do see the potential benefits of using it over a DIV.
With that said I have the following code:
<div id="topSpace"></div>
<textarea name="data[ArchiveQuarter][description]" class="userContent" id="editor1" cols="30" rows="6"></textarea>
At the bottom of the page I have:
<script type="text/javascript">
CKEDITOR.disableAutoInline = true;
CKEDITOR.replace( 'editor1', {
extraPlugins: 'sharedspace',
sharedSpaces: {
top: 'topSpace',
}
});
</script>
It currently creates the toolbar within the top space, and has the textarea, but both of them are disabled. I probably just messed up some of the configuration, but I'm not sure what.
I would greatly prefer it to use the textarea configuration as it is part of a form instead of extracting the data from inline.
You might be interested in using Shared space plugin:
addon page,
sample.
I'm proposing this instead of using div, because I've got mixed feelings regarding divarea plugin. Your original container is wrapped with editor's structure what changes the real context. IMO it's better to use real inline editing + the shared spaces feature to place toolbar and bottom bar where you need them.
Update:
When you're using inline editor, you don't need textarea. Textarea is only a data container which framed or div based editors replace with themselves.
Inline editing is all about editing real existing elements. So this can be your HTML:
<div id="topSpace"></div>
<div class="userContent" id="editor1"><h1>My page</h1><p>Fooo!</p></div>
And JS:
<script type="text/javascript">
CKEDITOR.disableAutoInline = true;
CKEDITOR.inline( 'editor1', {
extraPlugins: 'sharedspace',
sharedSpaces: {
top: 'topSpace',
}
} );
</script>
Note that I used CKEDITOR.inline not CKEDITOR.replace.
And the huge advantage of inline editing is that that <div> is a real element on your page - it is not wrapped (as in div based editor) and its contents is not moved to the frame (as in framed editor). So your content will inherit styles of your page.
The downside is that you need to implement custom data saving, because there's no form. The simplest way is to add a "save" button which clicked will send editor.getData() via AJAX to your server.
BTW. You probably was confused by the fact that in the shared spaces sample 2 editors are framed and 2 are inline. All of them reuses one top space and one bottom space.
BTW2. To make use of inline editing you don't need shared spaces in fact. Then the "floating toolbar" will be used as in here: http://ckeditor.com/demo#inline
I'm using N2CMS which in turn uses TinyMCE to edit HTML content.
what i need to do is disable the TinyMCE HTML validation completely.
Its stripping out anything out that doesn't adhere to its settings.
If I add a custom attribute <a href="{0}" test="tester1" /> it just removes it the custom attribute!
also, it always add <p> tags around every bit of HTML content.
how can i disable the validation?
any help is very much appreciated.
to resove this, add these into the tinyMCE settings, or init
cleanup_on_startup: false,
trim_span_elements: false,
verify_html: false,
cleanup: false,
convert_urls: false
There are a relatively large number of TinyMCE options related to cleaning up and validating HTML.
The valid_elements or extended_valid_elements option can definitely help you with custom attributes:
extended_valid_elements: "a[href|test]",
That option would specifically allow href and test attributes on anchor tags per your example.
As far as your second question is concerned, could you please clarify? Are you asking how to avoid escaping HTML code that is pasted into the WYSIWYG editor or are you asking how to avoid wrapping text in paragraph or div tags?
another solution,
settings:
verify_html:false,
fix_table_elements:false,
schema:'html4',
invalid_elements:'',
valid_elements:'[]',
valid_children: '[]',
and I'm saving the html content to the hidden field by calling
tinymce.activeEditor.getContent({format: 'raw'})
this helps to prevent any html fixes
This is how I remove all sanitisation:
valid_elements: '*[*]',
plugins: "fullpage"
The valid_elements directive allows all elements and all of their attributes.
The fullpage plugin preserves the <html>,<head> tags etc.
To stop TinyMCE wrapping everything in <p> tags;
force_br_newlines: false,
force_p_newlines: false,
forced_root_block: '',
Those tags are usually paragraphs or divs. They are essential for every rte. Tinymce puts them around every bit of html because it needs to in order to for example be able to style passages of text.
I have a few different applications that use TinyMCE and all experience the same problem... the pages (randomly it seems) show HTML source code to the user. When I use the inspector, I see that the reason is that I get an entire script embed tag pointing to the /themes/advanced/langs/en.js file put into the middle of another HTML element. I've seen it show up inside tables and links, and it's even getting submitted to the DB through the TinyMCE editors themselves.
I see no console logs with JS errors, and the problem happens on only about 1/4 of all requests.
Here's my init:
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
plugins : "paste,spellchecker, table",
paste_auto_cleanup_on_paste : true,
theme : "advanced",
theme_advanced_buttons1 : "spellchecker,separator,pastetext,pasteword,separator,bold,italic,underline,strikethrough,separator,justifyleft,justifycenter,justifyright,separator,code",
theme_advanced_buttons2: "tablecontrols",
theme_advanced_buttons3: "",
theme_advanced_buttons4: "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
width : "700",
height: "500"
});
</script>
Do you include tinyMCE right before your initialization script?
In some cases including tinyMCE after the init part might be the problem...
I don't know how in the world this could be related to my issue, but I haven't seen the problem reappear after I made a setting change in IIS. I added a web garden to handle load issues and this problem has not been seen since.
It's a purely anecdotal solution though.
Evaluating Tinymce. I've looked at the docs/source/api, and have a question that I thought I'd pose to the stackoverflow group.
Has anyone implemented Tinymce, who can tell me it it's possible to setup Tinymce to restrict a user, allowing the user to only "view" a text file, and be able to add additional buttons to the save/cancel row of buttons..
I think it should be, and that I'm missing something subtle..
Thanks
-Tom
Sure, you set the read-only option. Configure your textarea like this in your javascript file:
tinyMCE.init({
...
theme : "advanced",
readonly : 1
});
I have TinyMCE installed on the back end of a site. Some of the html it's accessing isn't totally valid, which I realize is the problem in itself. However, TinyMCE is messing things up by making things valid. I have an <img> with no parents (no <p>, no <div>, etc), and TinyMCE is wrapping the <img> in <p></p>. I'm trying to find a setting that will stop that from happening.
Essentially, I want TinyMCE to allow <img> to be it's own element, rather than a child element, if that makes sense. My current settings are:
tinyMCE.init({
theme : "advanced",
mode : "textareas",
relative_urls : false
});
I had the same problem before I found this: http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/forced_root_block
A bit late, but maybe it will help someone in the future
I'm not an expert in tinyMCE but I'm pretty sure those automatic 'clever' source formatting or modification can be configured. Not sure if you have looked into that.
Example of usage of the force_p_newlines option:
tinyMCE.init({
...
force_p_newlines : true
});
Take a look at the reference here:
http://wiki.moxiecode.com/index.php/TinyMCE:Configuration
I did a little more searching, and found an answer. First, I actually fixed the inherent problem by wrapping the <img> in a <div style="display:inline;">. However, the configuration solution can be found here:
http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/valid_child_elements
I attempted to just force the <body> tag to allow parentless images:
valid_child_elements: "body[img]"
but that denied all other tags from working. So I added some variables, like that link shows, and then I realized the proper solution. But, should anyone need to hack together a solution for an element, that page should solve the problem.