0 votes

Hi,

We have a Custom Field of type "Memo" in a Category, and we have some problems with it.

First, problem in consult:
The field is displayed like a "text" Memo, and not formatted.
i know that in Efficy 2012 we use fckeditor and fckattach function, but in efficy 10, with ckeditor i don't find the good way to do that.

Second, problem in edit:
Some times, the edit part to write text is not displayed, we must "play" with the Maximize button or with the size of the windows to see it.
With the standard memo field it's working good, .. any idea ?

Third, i would like to:
Remove the "plain text" button.
I think it is possible to use a removeButton, but i don't find the good way to do it.

thx..

asked in Efficy/ Client side by (336 points)

2 Answers

0 votes
Best answer

We have find the solution "with Cédric".

Put the id of your field in a Model

JsonEditModelCustom.Comp {[  
  ,"F_TYPE": "<%GetField(F_TYPE)%>"
  ,"memoCollabInfo": "CATEGORY-COMP$COLLABORATEUR-F_INFORMATIONS"
]}

Add the CKEDITOR in the define of edit.js
Call a new function who attach the ckeditor to your memo

function ManageCustomMemoFields(CKEDITOR){  
    var memoFieldCustom = Model('memoCollabInfo');
    var readonly = $('#' + memoFieldCustom)[0].readOnly;
    var config = {
            readOnly:     readonly,
            toolbar:      'Basic',
            startupFocus: false,
            language:     Model('language'),
            format_p: {element:'p', styles: {'margin':'0px'}},
            customConfig: '../../' + Model('filebase') + 'js/config/ckeditor.config.js', // path relative to /lib/js/ckeditor
            on:           {
                instanceReady: function () {
                    this.maximizeHeightNow();
                    if (!readonly) {
                        if (this.document.getHead().find('style').count() <= 2) {
                            // Add custom style tag only once, 2 other style tags have been added by ckeditor.
                            var style =
                                    'body{ font-family: \'Noto Sans\', Helvetica, Verdana, Arial, sans-serif; font-size:9pt; }\n' +
                                    'p,ol,table{ margin:0 0 2px 0; }';
                            this.document.appendStyleText(style);
                        }
                        this.dataProcessor.writer.selfClosingEnd = '>';
                    }
                },
                change: function () {
                    if (this.checkDirty()) {
                        //console.log('CKE modified');
                    }
                }
            }
        };
    if (readonly) {
        config.removePlugins = 'toolbar,elementspath,wordcount,backup';
    } // hide all toolbars

    config.removeButtons = 'PlainText';
    CKEDITOR.replace(memoFieldCustom, config);  

}

As you can see it is possible to remove some buttons, but, it is not possible to modify it because plugins is in the standard files at the wwwroot, and so not customizable in custom customer folder. ==> need to find an other solution with jquery to do that

answered by (336 points)
selected by
hello,

i've find the solution for override a command between a button of ckeditor.

after the CKEDITOR.replace, you need to do something like this :

CKEDITOR.instances[memoFieldCustom].on("instanceReady",function() {

      // overwrite the default timestamp function
      CKEDITOR.instances[memoFieldCustom].addCommand( "timestamp", {
        canUndo: false, // The undo snapshot will be handled by 'insertElement'.
        exec: function( editor ) {
            var username = '',
                datetime = new Date().toLocaleString();
            if ( typeof window.requirejs === 'function' ) {
                var Model = requirejs('model');
                if ( Model && Model.get )
                    username = Model.get('username') + ', ';
            }
           
            var pUser = editor.document.createElement( 'p');
            pUser.setHtml(username + '<em>' + datetime + '</em>.');
            pUser.setStyle('font-weight', 'bold');
            editor.insertElement( pUser );           
           
            var pData = editor.document.createElement( 'p');
            var datas = "<br>";
            if (Model('F_TYPE') == '1'){               
                datas += "<br><b>Accès handicapé : </b><br>";
                datas += "<br><b>Parking : </b><br>";
                datas += "<br><b>Chambre familiale : </b><br>";
                datas += "<br><b>Chambre fumeur : </b><br>";
                datas += "<br><b>Climatisation : </b><br>";
                datas += "<br><b>Conseillé pour quel type de client : </b><br>";
                datas += "<br><b>Impression générale : </b><br>";
                datas += "<br>";
            }
            if (Model('F_TYPE') == '4'){
                datas += "<br><b>Conseillé pour quel type de client : </b><br>";
                datas += "<br><b>Impression générale : </b><br>";
                datas += "<br>";
            }
           
            pData.setHtml(datas);                                               
            editor.insertElement( pData );       
        },

        allowedContent: 'p',
        requiredContent: 'p'          
        });   
    });
0 votes

Hello,

I have not tested this code. But assuming that the memo of your category has for ID "YouCategoryMemoID", in the entity XXXX, I would try something like this in MacroEditCustom.txt :

EditScriptsCustom.XXXX {[
    <script>
        requirejs(['jquery','ckeditor'], function($, CKEDITOR) { 

            function initCkEditor(memoField) {
                var readonly = $('#' + memoField)[0].readOnly;
                var config = {
                    readOnly:     readonly,
                    toolbar:      'Basic',
                    startupFocus: false,
                    language:     Model('language'),
                    format_p: {element:'p', styles: {'margin':'0px'}},
                    customConfig: '../../' + Model('filebase') + 'js/config/ckeditor.config.js', // path relative to /lib/js/ckeditor
                    on:           {
                        instanceReady: function () {
                            this.maximizeHeightNow();
                            if (!readonly) {
                                var style =
                                    'body{ font-family: \'Noto Sans\', Helvetica, Verdana, Arial, sans-serif; font-size:9pt }\n' +
                                    'p,ul,ol,table{ margin:0 0 2px }';
                                //this.document.getBody().setStyles({'font-family': 'Helvetica,Verdana,sans-serif', 'font-size': '9pt'});
                                this.document.appendStyleText(style);
                                this.dataProcessor.writer.selfClosingEnd = '>';
                            }
                        },
                        change: function () {
                            if (this.checkDirty()) {
                                //console.log('CKE modified');
                            }
                        }
                    }
                };
                if (readonly) {
                    config.removePlugins = 'toolbar,elementspath,wordcount,backup';
                } // hide all toolbars
                CKEDITOR.replace(memoField, config);
            }

            initCkEditor('YouCategoryMemoID');

        });
    </script>
]}

That idea is based on the native initCkEditor function in Efficy. You may have to adapt the relative path to ckeditor.... I would look in that direction.

Regards,
Cédric Edouard

answered by (201 points)
1,173 questions
1,433 answers
1,726 comments
325 users