array ( 'name' => 'tinymce_c', 'studio' => 'visible', 'label' => 'LBL_TINYMCE', 'span' => 12, ),
'type' => 'htmleditable_tinymce', 'dismiss_label' => true, 'span' => 12, 'tinyConfig' => array( // Location of TinyMCE script 'script_url' => 'http://{Instance URL}/include/javascript/tiny_mce/tiny_mce.js', 'height' => '100%', 'width' => '100%', // General options 'theme' => 'advanced', 'skin' => 'sugar7', 'plugins' => 'style,paste,inlinepopups', 'entity_encoding' => 'raw', 'forced_root_block' => false, // Theme options 'theme_advanced_buttons1' => "code,separator,bold,italic,underline,strikethrough,separator,bullist,numlist,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,forecolor,backcolor,separator,fontsizeselect", 'theme_advanced_toolbar_location' => "top", 'theme_advanced_toolbar_align' => "left", 'theme_advanced_statusbar_location' => "none", 'theme_advanced_resizing' => false, 'schema' => 'html5', 'template_external_list_url' => 'lists/template_list.js', 'external_link_list_url' => 'lists/link_list.js', 'external_image_list_url' => 'lists/image_list.js', 'media_external_list_url' => 'lists/media_list.js', 'theme_advanced_path' => false, 'theme_advanced_source_editor_width'=> 500, 'theme_advanced_source_editor_height'=> 400, 'inlinepopups_skin' => 'sugar7modal',17. The array should now be similar to the following:
//Url options for links 'relative_urls' => false, 'remove_script_host' => false, ),
array( ‘name’ => ‘tinymce’, 'type' => 'htmleditable_tinymce', ... 'remove_script_host' => false, ),18. Replace ‘{Instance URL}’ with the URL path to your Sugar Instance. For example, ‘sugarcrm.mycompany.com’.
in 7.6.1 I had to also add a controller to get the field to display the tinymce properly.
custom/modules/<my_module>/clients/base/views/record/record.js
({
extendsFrom: 'RecordView',
MIN_EDITOR_HEIGHT: 300,
EDITOR_RESIZE_PADDING: 5,
initialize: function(options) {
this._super('initialize', [options]);
this.context.on('tinymce:oninit', this.handleTinyMceInit, this);
},
/**
* When TinyMCE has been completely initialized, go ahead and resize the editor
*/
handleTinyMceInit: function() {
this.resizeEditor();
},
/**
* Resize the html editor based on height of the drawer it is in
*
* @param {number} [drawerHeight] current height of the drawer or height the drawer will be after animations
*/
resizeEditor: function(drawerHeight) {
var $editor, headerHeight, recordHeight, showHideHeight, diffHeight, editorHeight, newEditorHeight;
$editor = this.$('.mceLayout .mceIframeContainer iframe');
//if editor not already rendered, cannot resize
if ($editor.length === 0) {
return;
}
drawerHeight = drawerHeight || app.drawer.getHeight();
headerHeight = this.$('.headerpane').outerHeight(true);
recordHeight = this.$('.record').outerHeight(true);
showHideHeight = this.$('.show-hide-toggle').outerHeight(true);
editorHeight = $editor.height();
//calculate the space left to fill - subtracting padding to prevent scrollbar
diffHeight = drawerHeight - headerHeight - recordHeight - showHideHeight - this.EDITOR_RESIZE_PADDING;
//add the space left to fill to the current height of the editor to get a new height
newEditorHeight = editorHeight + diffHeight;
//maintain min height
if (newEditorHeight < this.MIN_EDITOR_HEIGHT) {
newEditorHeight = this.MIN_EDITOR_HEIGHT;
}
//set the new height for the editor
$editor.height(newEditorHeight);
},
})
In case this is useful to others, I also chose to show the field label in record view, and add some more buttons to the editor per include/SugarTinyMCE.php
Unfortunately not all the table controls show the appropriate icons even though I have the table plugin included. I'll update when I find a solution.
array (
'name' => 'htmltemplate',
'label' => 'LBL_HTMLTEMPLATE',
'type' => 'htmleditable_tinymce',
'span' => 12,
'tinyConfig' => array(
// Location of TinyMCE script
'script_url' => 'include/javascript/tiny_mce/tiny_mce.js',
'height' => '100%',
'width' => '100%',
'browser_spellcheck' => true,
// General options
'theme' => 'advanced',
'skin' => 'sugar7',
'plugins' => 'advhr,insertdatetime,table,preview,paste,searchreplace,directionality,spellchecker',
'entity_encoding' => 'raw',
'forced_root_block' => false,
// Theme options
'theme_advanced_buttons1' => "code,help,separator,bold,italic,underline,strikethrough,separator,justifyleft,justifycenter,justifyright, justifyfull,separator,forecolor,backcolor,separator,styleselect,formatselect,fontselect,fontsizeselect,", 'theme_advanced_buttons2' => "bullist,numlist,separator,outdent, indent,separator,ltr,rtl,separator,undo,redo,separator, link,unlink,anchor,image,separator,sub,sup,separator,charmap, visualaid",
'theme_advanced_buttons3' => "tablecontrols,separator,advhr,hr,removeformat,separator,insertdate,inserttime,separator,preview,spellchecker",
'extended_valid_elements' => 'style[dir|lang|media|title|type],hr[class|width|size|noshade],@[class|style]',
'theme_advanced_toolbar_location' => "top",
'theme_advanced_toolbar_align' => "left",
'theme_advanced_statusbar_location' => "none",
'theme_advanced_resizing' => false,
'schema' => 'html5',
'template_external_list_url' => 'lists/template_list.js',
'external_link_list_url' => 'lists/link_list.js',
'external_image_list_url' => 'lists/image_list.js',
'media_external_list_url' => 'lists/media_list.js',
'theme_advanced_path' => false,
'theme_advanced_source_editor_width'=> 500,
'theme_advanced_source_editor_height'=> 400,
'inlinepopups_skin' => 'sugar7modal',
//Url options for links
'relative_urls' => false,
'remove_script_host' => false,
),
),
in 7.6.1 I had to also add a controller to get the field to display the tinymce properly.
custom/modules/<my_module>/clients/base/views/record/record.js
({
extendsFrom: 'RecordView',
MIN_EDITOR_HEIGHT: 300,
EDITOR_RESIZE_PADDING: 5,
initialize: function(options) {
this._super('initialize', [options]);
this.context.on('tinymce:oninit', this.handleTinyMceInit, this);
},
/**
* When TinyMCE has been completely initialized, go ahead and resize the editor
*/
handleTinyMceInit: function() {
this.resizeEditor();
},
/**
* Resize the html editor based on height of the drawer it is in
*
* @param {number} [drawerHeight] current height of the drawer or height the drawer will be after animations
*/
resizeEditor: function(drawerHeight) {
var $editor, headerHeight, recordHeight, showHideHeight, diffHeight, editorHeight, newEditorHeight;
$editor = this.$('.mceLayout .mceIframeContainer iframe');
//if editor not already rendered, cannot resize
if ($editor.length === 0) {
return;
}
drawerHeight = drawerHeight || app.drawer.getHeight();
headerHeight = this.$('.headerpane').outerHeight(true);
recordHeight = this.$('.record').outerHeight(true);
showHideHeight = this.$('.show-hide-toggle').outerHeight(true);
editorHeight = $editor.height();
//calculate the space left to fill - subtracting padding to prevent scrollbar
diffHeight = drawerHeight - headerHeight - recordHeight - showHideHeight - this.EDITOR_RESIZE_PADDING;
//add the space left to fill to the current height of the editor to get a new height
newEditorHeight = editorHeight + diffHeight;
//maintain min height
if (newEditorHeight < this.MIN_EDITOR_HEIGHT) {
newEditorHeight = this.MIN_EDITOR_HEIGHT;
}
//set the new height for the editor
$editor.height(newEditorHeight);
},
})
In case this is useful to others, I also chose to show the field label in record view, and add some more buttons to the editor per include/SugarTinyMCE.php
Unfortunately not all the table controls show the appropriate icons even though I have the table plugin included. I'll update when I find a solution.
array (
'name' => 'htmltemplate',
'label' => 'LBL_HTMLTEMPLATE',
'type' => 'htmleditable_tinymce',
'span' => 12,
'tinyConfig' => array(
// Location of TinyMCE script
'script_url' => 'include/javascript/tiny_mce/tiny_mce.js',
'height' => '100%',
'width' => '100%',
'browser_spellcheck' => true,
// General options
'theme' => 'advanced',
'skin' => 'sugar7',
'plugins' => 'advhr,insertdatetime,table,preview,paste,searchreplace,directionality,spellchecker',
'entity_encoding' => 'raw',
'forced_root_block' => false,
// Theme options
'theme_advanced_buttons1' => "code,help,separator,bold,italic,underline,strikethrough,separator,justifyleft,justifycenter,justifyright, justifyfull,separator,forecolor,backcolor,separator,styleselect,formatselect,fontselect,fontsizeselect,", 'theme_advanced_buttons2' => "bullist,numlist,separator,outdent, indent,separator,ltr,rtl,separator,undo,redo,separator, link,unlink,anchor,image,separator,sub,sup,separator,charmap, visualaid",
'theme_advanced_buttons3' => "tablecontrols,separator,advhr,hr,removeformat,separator,insertdate,inserttime,separator,preview,spellchecker",
'extended_valid_elements' => 'style[dir|lang|media|title|type],hr[class|width|size|noshade],@[class|style]',
'theme_advanced_toolbar_location' => "top",
'theme_advanced_toolbar_align' => "left",
'theme_advanced_statusbar_location' => "none",
'theme_advanced_resizing' => false,
'schema' => 'html5',
'template_external_list_url' => 'lists/template_list.js',
'external_link_list_url' => 'lists/link_list.js',
'external_image_list_url' => 'lists/image_list.js',
'media_external_list_url' => 'lists/media_list.js',
'theme_advanced_path' => false,
'theme_advanced_source_editor_width'=> 500,
'theme_advanced_source_editor_height'=> 400,
'inlinepopups_skin' => 'sugar7modal',
//Url options for links
'relative_urls' => false,
'remove_script_host' => false,
),
),