NPellet / visualizer

Other
43 stars 24 forks source link

Feature/quill #1076

Closed maasencioh closed 6 years ago

maasencioh commented 6 years ago

The toolbar is not displaying yet, but the actions are working

targos commented 6 years ago

I'm trying the testcase but don't see any user interface. Expected?

maasencioh commented 6 years ago

That is the toolbar that is not instantiating, I add the div where it should be created the toolbar, but for some reason is not filled with the content. I don't know if that could be related somehow to the way that the module is added to the DOM.

targos commented 6 years ago

The documentation says that you provide the toolbar as a DOM object or ID if you manage it manually.

The common case is to pass options. Like this:

diff --git a/src/modules/types/edition/quill_editor/view.js b/src/modules/types/edition/quill_editor/view.js
index 483396d7d..17e9fce9e 100644
--- a/src/modules/types/edition/quill_editor/view.js
+++ b/src/modules/types/edition/quill_editor/view.js
@@ -69,12 +69,31 @@ define([
                     this.dom.html(initText);
                     this.module.controller.valueChanged(initText);
                 }
-                var toolbar = $('<div id="' + this._id + '_toolbar">');
-                this.module.getDomContent().html([toolbar, this.dom]);
+                this.module.getDomContent().html(this.dom);
                 this._setCss();

                 this.instance = new Quill('#' + this._id, {
-                    modules: {toolbar: {container: toolbar}},
+                    modules: {
+                        toolbar: [
+                            ['bold', 'italic', 'underline', 'strike'], // toggled buttons
+                            ['blockquote', 'code-block'],
+                          
+                            [{header: 1}, {header: 2}], // custom button values
+                            [{list: 'ordered'}, {list: 'bullet'}],
+                            [{script: 'sub'}, {script: 'super'}], // superscript/subscript
+                            [{indent: '-1'}, {indent: '+1'}], // outdent/indent
+                            [{direction: 'rtl'}], // text direction
+                          
+                            [{size: ['small', false, 'large', 'huge']}], // custom dropdown
+                            [{header: [1, 2, 3, 4, 5, 6, false]}],
+                          
+                            [{color: []}, {background: []}], // dropdown with defaults from theme
+                            [{font: []}],
+                            [{align: []}],
+                          
+                            ['clean'] // remove formatting button
+                        ]
+                    },
                     readOnly: this.readOnly
                 });
stropitek commented 6 years ago

Thanks for providing this starting point @maasencioh

This is now implemented