In TinyMCE WYSIWYG Editor, There is a third row which includes icons such as Insert horizontal ruler, Remove formatting, Subscript, Superscript, etc. These icons seem to come by default with the editor as there seems to be no way of changing them. .
TinyMCE... http://img821.imageshack.us/img821/6431/tinymce.png
I would like to be able to choose which one I want to display, for example, let's say I only want the Subscript and Superscript icons (not the other ones)
Does anybody know how I can do this?
Thank you
You can do this by using the theme_advanced_buttons option for TinyMCE :)
Here's a link to TinyMCE documentation:
Button Themes
I happen to have an example using TinyMCE's jQuery plugin but you can do it with "stock" tinyMCE as well:
$('#bio').tinymce({
script_url : '/js/tiny_mce/tiny_mce.js',
theme : 'advanced',
theme_advanced_buttons1: 'bold,italic,underline,|,undo,redo,|,bullist,numlist',
theme_advanced_buttons2: '',
theme_advanced_buttons3: '',
theme_advanced_buttons4: '',
theme_advanced_toolbar_location: 'bottom',
theme_advanced_toolbar_align: 'center',
});
In this particular case, I'm actually disabling the other toolbars -- but you can put whatever you want. The buttons it understands are documented here:
TinyMCE Button Documentation
Related
With TinyMCE I use extended_valid_elements to allow SVG elements, and indeed I can then add them, but the SVG elements are not selectable/clickable. I am trying to reach the same behavior as IMG elements - allow selecting, dragging and resizing SVG elements.
I tried looking at TinyMCE sources for "IMG" to figure out what makes them selectable and apply the same to "SVG", but noting I tried worked.
Help would be appreciated.
Currently this work fine for me :
Give me the following result :
How to align fieldLabel and textfield as single line in dialog in AEM 6.3? But in AEM 6.2 it's showing Single line FieldLabel and Textfield.
Please find attachments AEM 6.2
AEM 6.3
Like you, I was wondering about that. I have looked over every documentation from Adobe, found nothing that suggests that it's possible.
If you look at 6.1 dialog source, you'll see the form has coral-Form--aligned when in floating mode and coral-Form--vertical in fullscreen.
in 6.3 dialogs, it's always coral-Form--vertical
Also, if you look at the dialog JSP, in 6.3, at this path: /libs/cq/gui/components/authoring/dialog/dialog.jsp you'll see that they add coral-Form--vertical by default and there are no properties to change that behavior.
So, it seems Adobe will keep the dialog style as vertical.
I don't recommend the following, but it is mentioned because it's possible:
If you really really want to force "aligned", you'll have to write a simple script to add coral-Form--aligned to the dialog form and remove coral-Form--vertical, I tried that, and it results in an unpleasant UI (see screenshot) that needs a few CSS fixes.
I am trying to change the text color for tinymce text editor, when I type text inside it is by default appearing with gray color, I want text to appear with say red color. I think I will have to override its default css not sure about it, any suggestions?
If possible don't fiddle with the tinymce skin specifics.
Best practice is to use the tinymce configuration parameter content_css.
content_css : "http://path_to_css/custom_content.css",
I have Div with contentEditable on it.
I want TinyMCE toolbar sit at the top of the page at a specific place I mention (may be in a div) which can be used to edit contents in contentEditable div.
Someone tell me how to do this please?
Sorry, but what you intend to make sounds a bit silly.
Why don't you use tinymce as its designed to be?
You can assign a tinymce editor instance to your div and tinymce will take care of everything else
tinyMCE.execCommand("mceAddControl", false, div_id);
I have two textareas that I load when the page loads, these two textareas are in the same table row. My tinyMCE looks like this
tinyMCE.init({
mode : "textareas",
theme : "simple"
});
For some odd reason only the first textarea gets assigned the editor and the second does not. Although it only does this in Firefox. The text areas have different names and don't contain ids. Any advice will be appreciated.
Give them different ids. Tinymce editor id is equal to the textareas id; if no textarea id is present "content" is used as default. In your case for both textareas. Because there is already a tinymce editor with id "content" when the second textarea is being converted into a tinymce editor instance - it fails.
This has now been fixed by upgrading to the current version of tinyMCE (3.5b2) - as per:
http://www.concrete5.org/community/forums/customizing_c5/firefox-11-tinymce-issue-workaround-and-fix/
In my code, it was not fixed by giving different ids to the multiple text areas (Thariama's suggestion above).
If you don't know how to figure out your version of tinyMCE, see How do I find out what version of TinyMCE I am running?