wysiwyg-editor interface.

[alexsilva]

I do not know is interesting for you but the need arose to use an external editor (froala) but the jquery-coments api does not provide means for that. The changes create a mini api to make it work.

The interface implementation might look something like this:

comments_options = {}
comments_options.wysiwyg_editor = {
            opts: {
                enable: true,
                is_html: true,
                container_id: 'editor-container',
                comment_index: 0,
            },
            init: function (textarea, content) {
                var options =  {{ editor.options|safe }};
                options.events = options.events || {};
                options.events['contentChanged'] = function () { textarea.trigger('change');};
                options.events['edit.on'] = function() { textarea.trigger('click');};
                var froala_initialize = function (){
                   if (content) this.html.set(content);
                };
                var comment_index = textarea.data('comment_index');
                return new FroalaEditor("#" + this.get_container_id(comment_index), options, froala_initialize);
            },
            get_container: function (textarea) {
                if (!textarea.data('comment_index')) {
                    textarea.data('comment_index', ++this.opts.comment_index);
                }
                return $('<div/>', {
                    'id': this.get_container_id(this.opts.comment_index)
                });
            },
            get_contents: function(editor) {
               return editor.html ? editor.html.get(): '';
            },
            on_post_comment: function(editor, evt) {
                if (editor.html) editor.html.set('');
            },
            get_container_id: function(comment_index) {
              var container_id = this.opts.container_id;
              if (comment_index) container_id = container_id + "-" + comment_index;
              return container_id;
            }
        };

$(el).comments( comments_options );

The results were satisfactory.

[giannik]

this is really cool. Thanks. What is the purpose of the property opts.container_id: 'editor-container' ?

what should this value be ? the id of the comments-container or a parent tag surrounding the comments container. I can see that if i comment this out it still works. Just trying to understand what is its purpose. Thanks again.

[alexsilva]

@giannik

It is the container id (div) in which the editor is rendered.

get_container: function (textarea) {
                if (!textarea.data('comment_index')) {
                    textarea.data('comment_index', ++this.opts.comment_index);
                }
                return $('<div/>', {
                    'id': this.get_container_id(this.opts.comment_index)
                });
            },

[giannik]

ok, thanks for confirming.