field type htmleditable_tinymce

I have the demand to get an html editable field in some modules. So i tried the field type htmleditable_tinymce

I can edit it and enter data, but values are not displayed in view mode,   I can only see  data in edit mode. I'm working with PE 7.5.2.0
pls help
thx in advance
Parents
  • Hell Lehnerr,

    I've written up an as yet unpublished Knowledge Base article on this subject, which I've pasted below:

    Adding TinyMCE to a Custom TextArea Type Field

    Prerequisites

    To incorporate this customization, the following prerequisites must be met:

    1. Login credentials for a System Administrator User.
    2. SugarCRM version 7.5.x
    3. Access to the SugarCRM File System

    Overview

    In Sugar 7, within the SideCar modules, the application uses the TinyMCE editor when composing emails from the Emails subpanel, but this editor can be added to any TextArea type field by modifying the custom record.php file.

    Steps to Complete

    There are three primary steps that need to be completed.  First, a custom TextArea type
    field needs to be created in the module.  Second, the custom record.php file needs to be created.  Finally, the TinyMCE code needs to be copied from the core files.

    To create the TextArea field, please use these steps:

    1. Navigate to the Administrator page.
    2. Scroll down to the Developer Tools section and click Studio.
    3. Select the module where you’d like to add the custom field
    4. Click the Fields option and then click ‘Add Field’.
    5. Enter information into the available fields so that it is similar to the below screenshot:



    6. Click the Save button to complete creating the field.

    With the field created, the steps below will create the needed custom record.php file.  This file is needed so that the customization is upgrade safe and is not removed when changes are made in Studio:

    7. While still in Studio, return to the module where you’ve added the custom field, so that Labels, Fields, Relationships, Layouts, Subpanels, and Mobile Layouts are visible.
    8. Select the Layouts option, then select Record View.
    9. Add a new row to the Record View layout, then drag and drop ‘TinyMCE’ into one of the ‘(filler)’ fields in the new row.
    10. Click the Save button at the top of page to save the changes.
    11. A plus (+) sign is now shown next to ‘TinyMCE’, click this button to expand the field so it uses the full row.
    12. Click the Save & Deploy button at the top of the page to save and apply this change.

    The TextArea field is now added to the module’s Record View layout, but it is just a plain TextArea at this point.  Use these steps to apply the necessary code, so the TinyMCE editor displays when creating or editing a record:

    13. In the SugarCRM File System, open this file in a text editor:

    ./custom/modules/<Module Name>/clients/views/base/record/record.php

    14. Locate the array that contains the custom field that was created, tinymce_c:
    array (   'name' => 'tinymce_c',   'studio' => 'visible',   'label' => 'LBL_TINYMCE',   'span' => 12, ),

      15. This array contains basic information about the field.  Remove all of the items in the array, except the ‘name’ => ‘tinymce_c’, line.
    16. Copy the below code and paste in on a new line after ‘name’ => ‘tinymce_c’, but
    before the closing parenthesis ‘),’:
      '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',
        //Url options for links     'relative_urls'                     => false,     'remove_script_host'                => false,   ),
    17.  The array should now be similar to the following:
    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’.
    19. Save your changes to this file and close it.  If need be, updated the ownership and permissions of the file, in the event they were changed, to match the rest of the Sugar File System.
    20. Return to the Sugar User Interface.
    21. Navigate to the Administration page and select Repair from the System section.
    22. Click ‘Quick Repair and Rebuild’.

    Once the ‘Quick Repair and Rebuild’ process completes, navigate to the module where the customization has been implemented.  From the List View, or Navigation Bar, select the option to Create a new record.

    The TextArea field now displays the TinyMCE editor:




    Keep in mind the configuration I've presented above is a direct copy of the TinyMCE configuration used by the Compose Drawer for Emails.  There are a number of configurations you can make to the TinyMCE editor to add additional options for users, such as Font Family, Images, etc.

    Regards,

    Dan Kallish
    Advanced Support Engineer
    SUGARCRM

    Learning Resources: http://support.sugarcrm.com | http://university.sugarcrm.com | http://community.sugarcrm.com
  • Hi Dan,

    It doesn't work in ie and firefox, see comment below.

    reagrds Robert
  • 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

Reply
  • 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

Children
No Data