jQuery UI Widgets Forums Editors Editor Abount Customization Tool

This topic contains 3 replies, has 4 voices, and was last updated by  Dimitar 4 years, 7 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Abount Customization Tool #69913

    qvbhsskg
    Participant

    I want to add new command using createCommand.
    When I click the new command button, It first popup a dialog. User can input something in the dailog.
    The content from the popup dialog is inserted into content area after a clicking ok button in previous popup dialog.

    I found a demo the docment, but it can not support my requirement.

    $(‘#editor’).jqxEditor({
    height: 400,
    width: 800,
    tools: ‘datetime | print clear | backcolor | font bold italic underline’,
    createCommand: function (name) {
    switch (name) {
    case “datetime”:
    return {
    type: ‘list’,
    tooltip: “Insert Date/Time”,
    init: function (widget) {
    widget.jqxDropDownList({ placeHolder: “Insert Custom HTML”, width: 160, source: [‘Insert Time’, ‘Insert Date’], autoDropDownHeight: true });
    },
    refresh: function (widget, style) {
    // do something here when the selection is changed.
    widget.jqxDropDownList(‘clearSelection’);
    },
    action: function (widget, editor) {
    var widgetValue = widget.val();
    var date = new Date();
    // return object with command and value members.
    return { command: “inserthtml”, value: widgetValue == “Insert Time” ? date.getHours() + “:” + date.getMinutes() : date.getDate() + “-” + date.getMonth() + “-” + date.getFullYear() };

    //it should popup the dialog first. but how can i insert content later???????
    }
    }

    Abount Customization Tool #69915

    Nadezhda
    Participant

    Hello qvbhsskg,

    You can get inserted value from the popup dialog and set it to jqxEditor. Here is an example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title></title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcolorpicker.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxeditor.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#jqxwindow").jqxWindow({
                    height: 100,
                    width: 300,
                    theme: 'energyblue',
                    autoOpen: false,
                    isModal: true,
                    initContent: function () {
                        $("#input").jqxInput({ placeHolder: "Enter text", height: 25, width: 200, minLength: 1 });
                        $("#ok").jqxButton({ width: 50, height: 30 });
                    }
                });
    
                $('#editor').jqxEditor({
                    height: 400,
                    width: 800,
                    tools: 'datetime | print clear input | backcolor | font | bold italic underline',
                    createCommand: function (name) {
                        switch (name) {
                            case "input":
                                return {
                                    type: 'button',
                                    tooltip: "Content",
                                    init: function (widget) {
                                        widget.jqxButton({ height: 25, width: 60 });
                                        widget.html("<span id='content' style='line-height: 24px;'>Content</span>");
                                    },
                                    refresh: function (widget, style) {
                                        // do something here when the selection is changed.
                                    },
                                    action: function (widget, editor) {
                                 
                                        $("#jqxwindow").jqxWindow('open');
                                        $('#ok').on('click', function () {
                                            var value = $('#input').jqxInput('val');
                                            $("#editor").jqxEditor('val', value);
                                            $('#jqxwindow').jqxWindow('close');
                                        });
                                    }
                                }
                            case "datetime":
                                return {
                                    type: 'list',
                                    tooltip: "Insert Date/Time",
                                    init: function (widget) {
                                        widget.jqxDropDownList({ placeHolder: "Insert Custom HTML", width: 170, source: ['Insert Time', 'Insert Date'], autoDropDownHeight: true });
                                    },
                                    refresh: function (widget, style) {
                                        // do something here when the selection is changed.
                                        widget.jqxDropDownList('clearSelection');
                                    },
                                    action: function (widget, editor) {
                                        var widgetValue = widget.val();
                                        var date = new Date();
                                        // return object with command and value members.
                                        return { command: "inserthtml", value: widgetValue == "Insert Time" ? date.getHours() + ":" + date.getMinutes() : date.getDate() + "-" + date.getMonth() + "-" + date.getFullYear() };
                                    }
                                }
                            case "print":
                                return {
                                    type: 'button',
                                    tooltip: 'Print',
                                    init: function (widget) {
                                        widget.jqxButton({ height: 25, width: 40 });
                                        widget.html("<span style='line-height: 24px;'>Print</span>");
                                    },
                                    refresh: function (widget, style) {
                                        // do something here when the selection is changed.
                                    },
                                    action: function (widget, editor) {
                                        // return nothing and perform a custom action.
                                        $('#editor').jqxEditor('print');
                                    }
                                }
                            case "clear":
                                return {
                                    type: 'button',
                                    tooltip: 'Clear',
                                    init: function (widget) {
                                        widget.jqxButton({ height: 25, width: 40 });
                                        widget.html("<span style='line-height: 24px;'>Clear</span>");
                                    },
                                    refresh: function (widget, style) {
                                        // do something here when the selection is changed.
                                    },
                                    action: function (widget, editor) {
                                        // return nothing and perform a custom action.
                                        $('#editor').val('');
                                    }
                                }
                            case "backcolor":
                                return {
                                    type: 'colorPicker',
                                    tooltip: 'Background',
                                    init: function (widget) {
                                        widget.jqxDropDownButton({ width: 170 });
                                        widget.jqxDropDownButton('setContent', '<span style="line-height: 24px;">Choose Background</span>');
                                    },
                                    refresh: function (widget, style) {
                                        // do something here when the selection is changed.
                                    },
                                    action: function (widget, editor) {
                                        // return nothing and perform a custom action.
                                        var color = widget.val();
                                        editor.css('background', color);
                                    }
                                }
                        }
                    }
                });
            });
        </script>
        <textarea id="editor">   
        </textarea>
        <div id='jqxwindow'>
            <div>Content</div>
            <div>
                <input type="text" id="input" /><br />
                <input type="button" id="ok" value="OK" /></div>
        </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

    Abount Customization Tool #78223

    mattjh
    Participant

    I am looking to do something similar. I think the problem line in the solution is $(“#editor”).jqxEditor(‘val’, value); Overwriting the content isn’t what I’m looking for. What I think is really needed is a way to execute an inserthtml command on the editor object. I want to launch some code on the button event and then at some point insert html from an external source, not with an inline object being returned on the event.

    Abount Customization Tool #78229

    Dimitar
    Participant

    Hello mattjh,

    Unfortunately, there is no such functionality in jqxEditor. If you wish, you can combine your external HTML with the current value by getting it with val and then concatenating it with the new HTML before updating the editors value again with val.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

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

You must be logged in to reply to this topic.