GetmeUK / ContentTools

A JS library for building WYSIWYG editors for HTML content.
http://getcontenttools.com
MIT License
3.95k stars 395 forks source link

Question: How to call show on image dialog #471

Closed jamilalisgandarov closed 6 years ago

jamilalisgandarov commented 6 years ago

Hi, I want to know how can I manually call show image dialog, my init code looks like this

    var options = {
      tools: [
        ["bold", "italic", "link", "align-left", "align-center", "align-right"],
        [
          "heading",
          "subheading",
          "paragraph",
          "line-break"
        ],
        ["image"],
        ["undo", "redo", "remove"]
      ]
    };
    var editor = ContentTools.EditorApp.get();
    editor.init("*[data-editable]", "data-name");
    editor.toolbox().tools(options.tools);

But I couldn't find the way to reach image dialog from editor.

I also want to mention that documentation is a little bit hard to understand.

anthonyjb commented 6 years ago

Hi @jamilalisgandarov to call the image dialog manually I'd recommend looking at the code for the image tool to see how it's done there: https://github.com/GetmeUK/ContentTools/blob/master/src/scripts/tools.coffee#L1140

In essence:

// Create the dialog
var app = ContentTools.EditorApp.get();
var modal = new ContentTools.ModalUI();
var dialog = new ContentTools.ImageDialog();

// Handle dialog events
dialog.addEventListener('cancel', function() {
    // ...handle cancel/close event...
});

dialog.addEventListener('save', function() {
    // ...handle cancel/close event...
});

// Launch the dialog
app.attach(modal);
app.attach(dialog);
modal.show();
dialog.show();