This question has been flagged
1 Reply
6008 Views
viewparametershtmlcleditor
Avatar
Thierry Godin

Hi folk,

I'm trying to pass parameters to cleditor to change controls, styles and others parameters dynamically

Maybe from view with options or attrs ??

For now, I edited view_form.js , but I'd prefer avoid changes of official addons in case of updates.

Any suggestion are welcome

Thanks.

Avatar
Discard
Avatar
Thierry Godin
Author Best Answer

Hi folk,

I found a workaround to pass parameters to cleditor :

This is in view_forms.js of web module, replace initialize_content() as below (around line 2699) :

initialize_content: function() {
    var self = this;
    if (! this.get("effective_readonly")) {
        self._updating_editor = false;
        this.$textarea = this.$el.find('textarea');

        var e_width = ((this.node.attrs || {}).editor_width || '100%');

        var e_height = ((this.node.attrs || {}).editor_height || 250);

        var e_controls = ((this.node.attrs || {}).editor_controls || 
                        "bold italic underline strikethrough " +
                        "| removeformat | bullets numbering | outdent " +
                        "indent | link unlink | source"
                        );

        var e_colors = ((this.node.attrs || {}).editor_colors || 
                        "FFF FCC FC9 FF9 FFC 9F9 9FF CFF CCF FCF " +
                        "CCC F66 F96 FF6 FF3 6F9 3FF 6FF 99F F9F " +
                        "BBB F00 F90 FC6 FF0 3F3 6CC 3CF 66C C6C " +
                        "999 C00 F60 FC3 FC0 3C0 0CC 36F 63F C3C " +
                        "666 900 C60 C93 990 090 399 33F 60C 939 " +
                        "333 600 930 963 660 060 366 009 339 636 " +
                        "000 300 630 633 330 030 033 006 309 303"
                        );

        var e_fonts =((this.node.attrs || {}).editor_fonts ||
                        "Arial,Arial Black,Comic Sans MS,Courier New,Narrow,Garamond," +
                        "Georgia,Impact,Sans Serif,Serif,Tahoma,Trebuchet MS,Verdana"
                        );

        var e_sizes = ((this.node.attrs || {}).editor_sizes || "1,2,3,4,5,6,7");

        var e_docType = ((this.node.attrs || {}).editor_docType || 
                        '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">'
                        );

        var e_styles = [["Paragraph", "<p>"], ["Header 1", "<h1>"], ["Header 2", "<h2>"],
                        ["Header 3", "<h3>"],  ["Header 4","<h4>"],  ["Header 5","<h5>"],
                        ["Header 6","<h6>"]];

        var e_useCSS = true ;

                    if((this.node.attrs || {}).editor_useCSS){
                        console.log('editor_useCSS : ' + (this.node.attrs || {}).editor_useCSS);
                        if((this.node.attrs || {}).editor_useCSS == "true" ){
                            e_useCSS = true;
                       }
                    } 

        var e_docCSSFile = ((this.node.attrs || {}).editor_docCSSFile|| "");

        var e_bodyStyle = ((this.node.attrs || {}).editor_bodyStyle || 
                        "margin:4px; color:#4c4c4c; font-size:13px; " +
                        "font-family:'Lucida Grande',Helvetica,Verdana, " + 
                        "Arial,sans-serif; cursor:text"
                        );

        this.$textarea.cleditor({
                width:        e_width,
                height:       e_height,
                controls:     e_controls,
                colors:       e_colors,    
                fonts:        e_fonts,
                sizes:        e_sizes,
                docType:      e_docType,
                styles:       e_styles,
                useCSS:       e_useCSS,
                docCSSFile:   e_docCSSFile, 
                bodyStyle:    e_bodyStyle,
        });

        this.$cleditor = this.$textarea.cleditor()[0];
        this.$cleditor.change(function() {
            if (! self._updating_editor) {
                self.$cleditor.updateTextArea();
                self.internal_set_value(self.$textarea.val());
            }
        });
        if (this.field.translate) {
            var $img = $('<img class="oe_field_translate oe_input_icon" src="/web/static/src/img/icons/terp-translate.png" width="16" height="16" border="0"/>')
                .click(this.on_translate);
            this.$cleditor.$toolbar.append($img);
        }
    }
},

Now you can pass parameters in a view to change cleditor properties :

  • editor_width : str (400px or %)
  • editor_height : str (400px or %)
  • editor_controls : array
  • editor_colors : str (hex colors , with space separator)
  • editor_fonts : str (font-names with comma separator)
  • editor_sizes : str (font-sizes with comma separator)
  • editor_doctype : str (doctype)
  • # not managed to deal with useCSS .... so i set it to True
  • editor_useCSS : true/false
  • editor_docCSSFile : str (path to css file)
  • editor_bodyStyle : str (CSS style)

Here is an example how to use it in a view (form) :

<field name="content" 
                           placeholder="e.g. Once upon a time..." 
                           widget="html" 
                           class="oe_edit_only" 
                           options='{"safe": True}'
                           editor_width="100%%"
                           editor_height="500"
                           editor_controls="bold italic underline strikethrough subscript superscript | font size style | color highlight removeformat | bullets numbering | outdent indent | alignleft center alignright justify | undo redo | rule image link unlink | cut copy paste pastetext | print source"
                           />

I had no time, but the best way would be to override Web module (in case you update openERP files)

hope this helps.

Best regards

Avatar
Discard