Odoo Help

Welcome!

This community is for beginners and experts willing to share their Odoo knowledge. It's not a forum to discuss ideas, but a knowledge base of questions and their answers.

0

How to pass parameters to cleditor ?

By
Thierry Godin
on 12/21/13, 7:02 AM 1,821 views

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.

0

Thierry Godin

--Thierry Godin--
1516
| 8 7 8
Collegien, France
--Thierry Godin--

..

Thierry Godin
On 12/29/13, 4:54 PM

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

Your Answer

Please try to give a substantial answer. If you wanted to comment on the question or answer, just use the commenting tool. Please remember that you can always revise your answers - no need to answer the same question twice. Also, please don't forget to vote - it really helps to select the best questions and answers!

About This Community

This community is for professionals and enthusiasts of our products and services. Read Guidelines

Question tools

0 follower(s)

Stats

Asked: 12/21/13, 7:02 AM
Seen: 1821 times
Last updated: 3/16/15, 8:10 AM