I'm trying to integrate TinyMCE in Jquery Tools Tabs, but I can't seem to do it.
When all is set, I simply get no error, nor a warning. I only get a blank textarea.
I tryed with other Tabs (Jquery UI), and with that solution I am able to see TinyMCE, but I would like to use Jquery Tools, because of it's simplicity in css and filesize.
Update: here's 2 examples: one using Jquery Tools and another Jquery UI
Example 1: Jquery Tools
Example 2: Jquery UI
Tinymce init:
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
// Theme options
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_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true
});
Thank you.
Bruno
I've got it!.
Jquery Tools hides all div's inside the tab's panels by default, and TinyMCE uses DIV's to show the buttons, so those DIV's were being hidden.
What to do?
In Jquery Tools Tabs CSS, tell it to only hide the first DIV by adding >.
Example:
instead of:
.panes div { display:none; }
put
.panes > div { display:none; }
This way, it will only hide the first DIV.
Thank you anyway Thariama
I think your problem might be with one of the plugins. I suggest you remove all plugins (plugins: "",) and see what happens then. If it works as expected try adding plugin by plugin till you get the one that hinders tinymce to initialize. Button configuration is not crucial here. If the suitable plugin does not exist - the button simply does not show up, but inititialization won't stop because of this.
Related
Using jsTree (3.1.0+) with checkbox plugin is it possible to allow not all checkboxes to check - disable some of them?
I found solution for old versions of jsTree here jstree disable checkbox but it didn't work on jsTree 3.1.0+ versions.
Solution of hiding checkbox jsTree Hide Checkbox is working, but if I click on the folder, hidden checkbox will be checked anyway.
Thanks.
Keep in mind unless you are using checkbox.tie_selection as false, selecting and checking are the same thing.
So you can simply call .disable_node() on the nodes you want disabled.
EDIT: Use the latest code from the repo (note - not 3.1.1, but the latest code):
https://github.com/vakata/jstree/archive/master.zip
You can now specify the checkbox_disabled state:
<div id="jstree">
<ul>
<li data-jstree='{"checked":true}'>checked</li>
<li data-jstree='{"checkbox_disabled":true}'>checked</li>
</ul>
</div>
In JSON too of course:
{ "id" : "Test node", "state" : { "checkbox_disabled" : true } }
You can also change the disabled state of a checkbox at runtime using enable_checkbox(node) and disable_checkbox(node).
To completely hide checkbox from the specific node, add following JS code
$('#tree_2').on('ready.jstree', function () {
$("#tree_2").jstree().get_node("node1_id").a_attr["class"] = "no_checkbox";
$("#tree_2").jstree().get_node("node2_id").a_attr["class"] = "no_checkbox";
....
});
and in CSS, add the following style
.no_checkbox > i.jstree-checkbox {
display: none;
}
It will completely hide checkbox from provided node id, this worked like a charm for me. Thanks to this link.
I am using the TinyMCE Deluxe module for Orchard to support additional editing options for a site. One of the things my client needs is the ability to do text alignment, identical to how Word works. I saw TinyMCE has a utility does support these options as part of the "Core" set of controls (see here), but when I try to edit orchard-tinymce.js to support core, I just start getting JS errors and the toolbar doesn't show up.
Any suggestions on how to add in the alignment options?
EDIT
Here is my orchard-tinymce.js file (located in /Modules/TinyMceDeluxe/Scripts):
$(document).ready(function () {
tinyMceDeluxe = new TinyMceDeluxe.Orchard();
// 1st arg is an array of plugin names. See plugin link above for full list of available plugins
// 2nd arg is an options object; also see TinyMce documentation for details on all available options.
tinyMceDeluxe.init(['pagebreak', 'paste', 'table', 'template', 'syntaxhl'], {
theme: "advanced",
mode: "specific_textareas",
editor_selector: "tinymce",
plugins: "fullscreen,autoresize,searchreplace,mediapicker,inlinepopups,-table,-pagebreak,-template,-paste,-syntaxhl",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: "true",
//theme_advanced_buttons1: "search,replace,|,cut,copy,paste,|,undo,redo,|,link,unlink,charmap,emoticon,codeblock,|,bold,italic,|,numlist,bullist,formatselect,fontselect,fontsizeselect,|,styleselect,|,forecolor,backcolor",
theme_advanced_buttons1: 'core',
theme_advanced_buttons2: "mediapicker,|,tablecontrols,|,hr,removeformat,visualaid,|,visualchars,template,blockquote,pagebreak,|,alignleft,aligncenter,alignright,alignjustify,|,syntaxhl,code,fullscreen",
theme_advanced_buttons3: "",
convert_urls: false,
template_external_list_url: "/modules/tinymcedeluxe/scripts/samples/tinymce_template_list.js",
// content_css sets the path to your site's main .css file. The styles from this file are imported into a droplist in the TinyMce editor.
// TinyMceDeluxe sets this path automatically to the /Styles/custom.css file in your site's theme, but you can override the path by declaring it here:
//content_css: '/path/to/your/stylesheet.css',
valid_elements: "*[*]",
// shouldn't be needed due to the valid_elements setting, but TinyMCE would strip script.src without it.
extended_valid_elements: "script[type|defer|src|language]"
});
});
I comment out theme_advanced_buttons1 which has a number of specific ones and changed it to just 'core' instead. When I do this, I get an error in tiny_mce.js on line one that says: "Uncaught TypeError: Cannot read propery 'Button' of undefined."
After digging a bit to answer Thariama's question, I found this page on the TinyMCE website. I had been using buttons of "alignleft", "alignright" (and so on) for the alignment controls which I had seen elsewhere on their site, but it turns out the real names were "justifyleft", "justifyright", etc. Changing it to those gave me all the alignment options I needed.
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.
I am looking for a solution that allows me to insert an image and resize it in tinymce,any ideas?.
tinyMCE package comes by default with such feature. Plugin name is Image. The button should be in the toolbar on line 2. However you should use the advanced theme to activate it. In your tinyMCE.init( { ... } ); set theme : "advanced"
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.