Change tinymce toolbar icons to text - tinymce

How can I change tiny mce editor's toolbar icons to text ?
I want these icons to be text buttons.

TinyMCE adds buttons to the toolbar in a variety of places. The method addButton (which is in the tinymce/classes/Editor.js file) is the method used to add a button to the toolbar:
https://www.tinymce.com/docs/api/tinymce/tinymce.editor/#addbutton
If you want to change all of the icons to text strings you need to find the code where each button is added to the toolbar and modify the call to addButton to not use an icon.
For example, the print plugin has this code:
editor.addButton('print', {
title: 'Print',
cmd: 'mcePrint'
});
...which you could change to this:
editor.addButton('print', {
title: 'Print',
cmd: 'mcePrint',
text: 'Custom Print'
});
You would then see the text Custom Print on the toolbar instead of the icon.
A word of warning - the core editor code adds some buttons, and plugins add some buttons. If you truly want to replace the icons of all buttons you will have to modify a fair amount of code in TinyMCE which will make upgrading the editor much harder.

Related

How to change text in toolbar button?

I have a toolbar in my TinyMCE editor. All buttons are correct, but I would like to change the text "Formats" to the Dutch translation "Lettertype".
I tried to add this in the init settings but I guess the toolbar and the menubar are something different:
menu: {
format: {title: 'Lettertype', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'}
}
I couldn't find a solution on the web, so how do I change the text?
There are language packs that will translate the entire UI of TinyMCE to other languages. The packs can be downloaded from here:
https://www.tinymce.com/download/language-packages/
There is a Dutch language pack that (once deployed) should update that button along with the rest of the UI.
If any of the translations don't match your expectation you can modify the js file to meet your needs.

TinyMCE Custom Color can't edit RGB text on modal

I'm using tinyMCE on modal bootstrap, I want to use the custom color plugin to add color that doesn't exist on the tinyMCE..
I know the color code that I want to use, but I can't focus to the textbox to input my color code on custom color popup
How to fix this ?
The Bootstrap modal has code that stops anything else from getting focus while it is enabled (by design). You should be able to override this with code like the following:
$('#myModal').on('shown.bs.modal', function() {
$(document).off('focusin.modal');
});
(This assumes you are don't mind using jQuery)

TinyMCE Readonly Body

I am using TinyMCE editor for my application.
I want to have my body and the presentation toolbar on screen with "readonly".
readonly:true
makes the presentation bar disable which is not acceptable by client (needs both content area and toolbar).
I successully made the:
body.contentEditable = false;
which works good but when i click any of the presentation icon or button it gives the effect like when i click bold it makes the document text bold which should not.
You may add the following to undo the changes in the editor and execute it onchange_callback.
//undo all the changes in the editor
tinyMCE.activeEditor.undoManager.undo();
//remove all undo levels so there will no possibility of redoing last action
tinyMCE.activeEditor.undoManager.clear();
Here is a DEMO
Hope it helps!!

Eclipse RCP Clear Button in Textinput

I just started working on an eclipse RCP application in my company and search now for following component:
In the eclipse preference dialog is a text input field with a eraser which clears the text box (see image).
Is there a component in eclipse RCP which does exactly that? Or one where I can set an image in a text input field, so I can implement just the functionality.
Or have I to write my own component extending from Text?
Thanks.
Eclipse does not offer such a component, so you will have to implement one yourself.
But I wouldn't extend Text for this. Simply create a Composite with SWT.BORDER style, and a Text and Button as children. If you don't give the Text a border, it looks like the button is within the text box. Instead of the Button you could use a ToolBar with a single ToolItem, both with the SWT.FLAT style. This will look much better than a regular button.
Text text = new Text(parent, SWT.SEARCH | SWT.ICON_CANCEL);
This is present in Luna's API, don't know about older versions. You can check more here: http://git.eclipse.org/c/platform/eclipse.platform.swt.git/tree/examples/org.eclipse.swt.snippets/src/org/eclipse/swt/snippets/Snippet309.java?view=co

iPhone - Font used for Toolbar buttons

Could you tell me which font is used to display text on Toolbar buttons ?
I'm searching this to make a custom button.
Helvetica-Bold, 12 pt
Although you may be better off just creating the graphic (background) for the button and using the default title property of the button to set the relevant text.