I want to change TinyMCE format buttons texts. i.e. "header1/2/3/..." or "paragraph".
Edit : found what I was looking for, I had to go to mytheme/inc/shortcodes/tinymce.php. Not sure if this file is a default one though.
Related
I'd like to change the tool tip for the TinyMCE 4 "removeformatting" button:
from "Clear formatting" to "Clear selected formatting." But I'm not able to find where in the TinyMCE code this button is defined.
Can someone point me to the ed.addButton code for it?
Thanks
By the looks of it the line you are looking for is:
<span id="mceu_61-text" class="mce-text">Clear formatting</span>
So a simple JS search and rewrite the inner HTML would work. But this button clears all formatting on the text if nothing is selected or only clears the selected text if there is a selection. (Note the id of the element will change depending on what tool bars you have loaded, that line was taken from a full featured demo)
Though the actual hard coded string seems to be located in
tinymce/classes/ui/FormatControls.js
on line 300
removeformat: ['Clear formatting', 'RemoveFormat'],
One way you can change these is to use a language file for en_US and put replacements there. To make this work you need to do 2 things:
1 - Add a language configuration option to your init:
tinymce.init({
selector: '#myTextArea',
language: 'en_US', //Force custom translations of button/menu text in English.
...
});
2 - Add a en_US.js file to your langs folder within TinyMCE.
This file is where TinyMCE looks for language translations so if you tell TinyMCE explicitly to use the en_US language it will look in the langs folder for a JS file of the same name as the language. You can then put updated translations in that file:
tinymce.addI18n('en_US',{
"Clear formatting": "Custom Clear Formatting Text"
});
To see all your options for what you can change just grab a language file from here: https://www.tinymce.com/download/language-packages/ The label on the left is the "key" and the value on the right is the "value". The "key" is effectively what you get in English when you don't include a reference to a language in the tinymce.init({}) call..
The advantage of this is that you are not changing the TinyMCE code itself so this makes updating TinyMCE easier as you don't need to keep recreating your changes.
I'm trying to do a simple wysiwyg editor and I am trying to edit this page.
I inserted that code into my editor and included the original css file from the website, yet it seems like ckeditor is putting its own tags around the overall content which breaks the original design. Is there a simple way to overcome this?
Thanks
Inline editing is what you want to do there. Simply render the website (component) in your admin panel, using your default, frontend styles and create inline editors for all editable fields. Finally serialize contents of editors.
CKEditor uses CSS from ckeditor/contents.css - you have to add your CSS there.
Your file is visible at http://makehugeprofit.com/editor/ckeditor/contents.css?t=E0LB and as you can see, it doesn't contain much. How did do "included the original css file from the website"? Merge it with contents.css and you'll have greater luck.
The editable area is an iframe and thus not in the same CSS space as your surrounding site.
When I am adjusting content, I click on the source I want the html to be in an uglified state, so it is easier to naivagte, without having to copy and paste the html into HTMLLint, then into Sublime Text (at least once for editing, but definitely in ST2 if I plan on doing several iterations of edits), and then back into the RTF body area.
How do you get it to show the source in an indented view like this:
Maybe also how do you just edit the content in HTML format only? Any Module?
How do you get it to show the source in an indented view
Well, you can't unless it is built into the Rich Text Editor module that you have installed. CK Editor, for example, does indent the HTML nicely.
how do you just edit the content in HTML format only? Any Module?
If you want to edit the content without the Rich Text Editor, you may
disable that particular module admin/config/modules
or make plain text your default by going to admin/config/content/formats and dragging 'Plain Text' to the top of the list.
Problem: When a user copies a load of code from another website and pastes it into CKEditor it includes a load of inline styles which refer to the style of the content on the website it was copied from. When the pasted content is then saved and shown on my website it doesn't use my styles but the copied inline ones which conflict.
I've had a look through the CKEditor documentation, and to be honest I don't find the documentation to narrow down to what I'm looking for. There is a paste function available which removes formatting but this is an optional button in the menu, whereas most users will just post into the main large area, so its pretty worthless.
Main Question: is there a way to set CKEditor to strip formatting when pasting?
Ah, I found the answer:
// Apply editor instance settings.
CKEDITOR.config.forcePasteAsPlainText = true;
I am programming some plugins that insert elements like pictures and tables inside the editor. What I need is to see these elements in the editor rendered with their final aspect. I mean, I need to add css classes to the editor and use them to render text in the editor, and I want to do it on the fly, seing those elements rendered in the editor.
Is there any way to do it? Can I see the elementes correctly rendered inside the editor inserting them with a plugin?
Thank you!
Yes you can.
You will have a dropdown list in your editor, where you can select configured CSS styles to be applied in your content.
How to do it you can find in the documentation:
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles