Hi,
I am trying to add the ‘show source code’ button in compose email popup however i got no results.
I’ve followed the tutorial in this page Customizing the Email Editor Buttons - SugarCRM Support Site, i checked the permissions everything is all right.
I noticed a strange behavior, this class SugarTinyMCE.php is called when i am in “Template edit mode”, but nothing happens when i open the compose email popup from the list view.
Any suggestions ?
Regards
It’s very uncertain whether that tutorial applies to SuiteCRM, the fork was a long time ago and many things are different now…
I wish I could help you with your problem but I am afraid I don’t know the answer to this one…
Hi ,
I was able to customize the compose view in the quick compose mode when I click on the email in the list view.
I’ve found that tinyMCE is initialized in this js file : “modules/Emails/include/ComposeView/EmailsComposeView.js”
At the bottom we have this code that I modified to suite my needs:
$.fn.EmailsComposeView.defaults = {
"tinyMceOptions": {
theme: 'modern',
plugins: 'code print preview fullpage searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern',
toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat',
}
}
Regards,
My dear friend, Your code indeed worked, when I replaced the whole function. In fact, options offered by the editor after your suggested implementation were more versatile & hugely needed. Great!
However, it is most likely not upgrade-safe. In previous version of TinyMCE we were able to make upgrade-safe customization very conveniently.
Is there someone who has succeed or progressed further ahead? Could someone really share his instructions with us?
Contribution is highly solicited.
With thanks,
RK
A month ago or so I posted instructions on how to add font selection to the editor. Maybe this can be of help in this discussion too.
Dear amariussi,
Thanks for sharing the work instruction on getting font-selection as well as changing the font selection on post Add font selection to Mozaik Template Editor
I hope that you would also endorse the fact the output achieved by ahdidou in #59678 is quite comprehensive and offers the widest possible customization of TinyMCE.
For example, I would like to have insert image, edit/create the link (with image), image edit/options etc, so that images could easily be inserted into the email-templates. There would be large number of users who would like to have images in their templates.
With thanks,
RK
Is there any way this could be put into the product? Like a button to access “Advanced” TinyMCE option, where you could enter a portion of that code and make it effective?
Dear pgr,
Do you mean in description of 'Create Product?
With thanks,
RK
No, I mean when editing the Template, some “advanced” place where you could pass it those parameters configuring TinyMCE.
I don’t know if this makes sense, I never needed these features, and I never used them. I am just speculating if this result you have achieved in this thread could be useful in general, and how… :unsure:
Hello pgr & amariussi,
Targeted file is: modules/Emails/include/ComposeView/EmailsComposeView.js
Here is the improvised version of code:
$.fn.EmailsComposeView.defaults = {
"tinyMceOptions": {
skin_url: "themes/default/css",
skin: "",
//plugins: "fullscreen",
menubar: true,
plugins: 'code print preview fullpage searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern',
toolbar: ['fontselect | fontsizeselect | bold italic underline | styleselect'],
formats: {
bold: {inline: 'b'},
italic: {inline: 'i'},
underline: {inline: 'u'}
},
convert_urls:true,
relative_urls:false,
remove_script_host:false,
}
};
}(jQuery));
What is the gain of this code is that
NOTE: The above mentioned tweaks is not upgrade-safe, but solves the problem by 70%.
Now we are left with TinyMCE editor interface in Email Template>Compose Email Template. I am totally in dark about that, could not do anything about that. Since I am not a coder, I don’t have ability to dig deeper.
I hope some able-developer could break the puzzle.
With thanks,
RK
I have added in my to do list a simple admin section where to select the elements of the toolbar via a form with checkboxes which generates the file and replaces it.
Possibly I can also add the functionality to add or remove elements to chose from. I don’t know how to order them though (this requires extra javascript knowledge)
Did you ever fugure out how/where to change the TinyMCE settings to customize TinyMCE for Email Templates?
Thanks for the above code.
I used the above for Composing emails, but cannot find where to make similar edits to have it work for Email Templates.
Possibly here:
Thank you, that did the trick.
Here is what I did to add Bullet and Numbered lists (plus some other things) to the TinyMCE text editor window for BOTH composing emails and creating/editing email tremplates.
These changes are NOT upgrade safe so will need to be re-done after any upgrade that affects the files identified below.
For a more complete explanation of TinyMCE plugins and toolbar options, see Toolbar Buttons Available for TinyMCE | Docs | TinyMCE
To update the editor used when composing emails, in /var/www/html/{suitecrm_directory_name}/modules/Emails/include/ComposeView/EmailsComposeView.js
In the last section (when I did this) starting with
$.fn.EmailsComposeView.defaults = {
Change
plugins: "fullscreen",
To
plugins: "fullscreen print code table link image lists advlist textcolor colorpicker contextmenu visualchars visualblocks textpattern hr",
or, for a full list of TinyMCE functionality, loading multiple plugins
Change
plugins: "fullscreen",
To
plugins: "fullscreen code print preview searchreplace autolink directionality visualblocks visualchars image link media template codesample charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern",
Change
menubar: false,
To
menubar: true,
Change
toolbar: ['fontselect | fontsizeselect | bold italic underline | styleselect'],
To
toolbar: ['undo redo | fontselect | fontsizeselect | forecolor backcolor | bold italic underline | indent outdent bullist numlist | styleselect'],
Note: plugins (lists and advlist) are stored in /var/www/html/{suitecrm_directory_name}/include/javascript/tiny_mce/plugins/
Then
- Refresh the browser (clear browser cache)
- Go to the Emails Module and Compose an email and you will see the new Toolbar options
To update the editor used when creating/editing an Email Template, in /var/www/html/{suitecrm_directory_name}/include/SuiteEditor/SuiteEditorConnector.php
Near the top of the file (when I did this), after the comments section, in the definition of
public static function getSuiteSettings($html, $width)
Change
plugins: ['code', 'table', 'link', 'image'],
To
plugins: ['fullscreeen', 'print', 'code', 'table', 'link', 'image', 'lists', 'advlist', 'textcolor', 'colorpicker', 'contextmenu', 'visualchars', 'visualblocks', 'textpattern', 'hr'], menubar: true, toolbar: ['undo redo | fontselect | fontsizeselect | forecolor backcolor | bold italic underline | indent outdent bullist numlist | styleselect'],
Then
- Refresh the browser (clear browser cache)
- Go to the Email Templates Module and Create a Template and you will see the new Toolbar options
I see that you edited my post on TinyMCE buttons
I went through the change display and it looks like the edits were for appearance, but I wanted to check to see if in fact you found something that needed changing other than the appearance.
The edits were just for styling, nothing more.