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
    Hello,

    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?

    Thanks
    Rene

    How to modify image dialog #120275

    Yavor Dashev
    Participant

    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 () {
                $("#jqxwindow").jqxWindow({
                     width: 300, 
                     height: 100,
                     autoOpen: false 
                });
                $('#editor').jqxEditor({
                    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) {
                
                                    widget.jqxButton({
                                        height:20,
                                        width: 170,
                                    });
                           
                                    widget.html('<span> New Image Command</span>');
                                  
                                    widget.on('click', function ( ) {
                                        $('#jqxwindow').jqxWindow('open');
                                    });
                                },
                                refresh: function (widget, style) {
                                  
                                },
                                action: function (widget, editor) {
                                    return
                                   
                                }
                            }
                        }
                    }
                });
                
            });
        </script>
    
    <div id='jqxwindow'>
        <div>Header</div>
        <div>Your image dialog Content</div>
    </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
    https://www.jqwidgets.com

    How to modify image dialog #121800

    Hello,

    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.

    Thank’s
    Rene

    How to modify image dialog #121804

    ivanpeevski
    Participant

    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
    https://www.jqwidgets.com

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

You must be logged in to reply to this topic.