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’.
({So what i did was on the config and changed line 14 to self.value to set the value of the field and on lines 40 & 41 to set new config to tinymce i think you could come up with a better solution i for one have improvements to this solution to make it shorter anyway you this helps
extendsFrom: 'HtmleditableTinymceField',
initTinyMCEEditor: function (optConfig) {
var self = this;
if (_.isEmpty(this._htmleditor)) {
var config = optConfig || this.getTinyMCEConfig();
var __superSetup__ = config.setup;
config.setup = function (editor) {
if (_.isFunction(__superSetup__)) {
__superSetup__.call(this, editor);
}
self._htmleditor = editor;
self._htmleditor.onInit.add(function (ed) {
self.setEditorContent(self.value);
$(ed.getWin()).blur(function (e) {
self._saveEditor();
});
});
self._htmleditor.onDeactivate.add(function (ed) {
self._saveEditor();
});
self._htmleditor.onSetContent.add(function (ed) {
if (self._saveOnSetContent) {
self._saveEditor(true);
}
self._saveOnSetContent = true;
});
self._htmleditor.onChange.add(function (ed, l) {
self._isDirty = true;
});
};
config.oninit = function (inst) {
self.context.trigger('tinymce:oninit', inst);
};
/**
* Get the current field object before rendering
* use the field object to render the tiny mce
* @type {*|HTMLElement}
*/
var editable = this._getHtmlEditableField();
$(editable[0]).tinymce(config);
}
},
})
I just found a quick and dirty fix for firefox. So, I add also the _render function in my custom tinymce field and I set one second delay to render the view.
My code looks like this right now:
// /custom/modules/<MyCustomModule>/clients/base/fields/htmleditable_tinymce/htmleditable_tinymce.js
({
extendsFrom: 'Htmleditable_tinymceField',
_render: function () {
var self = this
this.destroyTinyMCEEditor();
app.view.Field.prototype._render.call(this);
this._getHtmlEditableField().attr('name', this.name);
if (this._isEditView()) {
this._renderEdit(this.options.def.tinyConfig || null);
} else {
setTimeout(function(){
self._renderView(); // here is the trick
},1000)
//this._renderView();
}
},
initTinyMCEEditor: function (optConfig) {
// ....
}
})
Any suggestions are welcome
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,
),
),