jQuery UI Widgets Forums Editors Editor How to modify image dialog

This topic contains 3 replies, has 3 voices, and was last updated by  ivanpeevski 8 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • How to modify image dialog #120235

    image dialog

    if I click on add image icon on jqxEditor open pop up dialog.

    How to translate all labels on this dialog?

    How to replace this dialog with my own image dialog – it is possible?


    How to modify image dialog #120275

    Yavor Dashev

    Hi Rene,

    Sorry for the late reply.

    I have created a code example which demonstrates you how to replace the dialog with your own.
    Here is the code snippet for it:

     <script type="text/javascript">
            $(document).ready(function () {
                     width: 300, 
                     height: 100,
                     autoOpen: false 
                    height: "400px",
                    width: 1500,
                    tools: 'myImage | print clear | backcolor | font bold italic underline',
                    createCommand: function (name) {
                        switch (name) {
                            case "myImage":
                            return {
                                type: 'button',
                                init: function (widget) {
                                        width: 170,
                                    widget.html('<span> New Image Command</span>');
                                    widget.on('click', function ( ) {
                                refresh: function (widget, style) {
                                action: function (widget, editor) {
    <div id='jqxwindow'>
        <div>Your image dialog Content</div>
        <textarea name="editor" id="editor">

    Let me know if that works for you!

    Please, do not hesitate to contact us if you have any additional questions.

    Best Regards,
    Yavor Dashev
    jQWidgets team

    How to modify image dialog #121800


    Thanks for the answer. I’ve been away on other projects for a long time now, so it’s only now that I’ve gotten around to continuing with this.

    One question is still open for me here: If I create a user-defined dialog as described here, which I did according to the example, how do I get my picture inserted into the editor?

    For example, I have a list of images that I display as thumbnails and with a mouse click I want to transfer the exact image to the editor.

    Now how do I transfer the code

    <img src="..." alt="..." />
    to the editor?

    I could remember the editor from the action event of the widget, but I want to insert the image at the last mouse position in the editor…

    Do you have any other ideas for me?

    I’m currently implementing the whole thing with react, but I think jQuery has a similar solution.


    How to modify image dialog #121804


    Hello Rene,

    Please have a look at the example here on how to transfer the image into the Editor: https://jsfiddle.net/L4dqrfpy/

    Unfortunately inserting at cursor position is currently not supported. On the other hand, we support Drag&Drop functionality so users can drag and place the image into the Editor wherever they like.

    Best Regards,
    Ivan Peevski
    jQWidgets team

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.