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,
),
),
This is awesome! Thanks for sharing it.
I was able to set a WYSIWYG field, which works great too, but when I was creating the quote for that record, variables wasn't parsed, and also I was getting the HTML tags visible in the quote.
Have you experienced something similar when reporting or creating quotes for the records that use this type of field?
Thank you!
Angel M.
Hi Dan,
For the first time i am using SugarCRM. Found it great. I am learning and was trying to do the same thing with Community Edition 6.5.xx. May you help me with the same question for 6.5.xx Please?
Thank you
Hi Dan,
It seems that this doesn't work anymore on 7.8 after they upgraded the TinyMCE to version 4.1.8.
Please help on this
Regards,
How to do it in version 6.5.x?