在模式中使用 kendo 编辑器时插入超链接弹出只读

Question

当我在模式中使用 kendo 编辑器时，插入 hyperlink/image 弹出窗口是只读的。我该如何解决？

Kendo UI v2015.3.930

Html 对于此示例：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModal-label">Modal title</h4>

            </div>
            <div class="modal-body">
                <textarea id="editor" name="Message" style="width:100%"></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>
<a href="#" id="test">Test</a>

Javascript

<script>
$(document).ready(function () {
    //create Editor from textarea HTML element with default set of tools
    $("#editor").kendoEditor({
        resizable: {
            content: true,
            toolbar: true
        }
    });
});


$("#test").on("click", function (e) {
    $("#myModal").modal('show');
});
</script>

Answer 1

我收到了 Telerik 团队的回复

The Kendo UI Editor uses a popup for the "Insert hyperlink" tool. The popup is rendered as a child of the body, i.e. it is outside the Bootstrap modal dialog. As a result, the Bootstrap modal dialog does not allow anything in the popup to be focused.

Please disable the Bootstrap dialog's modality, or use a modal Kendo UI Window instead.

http://docs.telerik.com/kendo-ui/using-kendo-with-twitter-bootstrap#known-limitations

Answer 2

在脚本中插入这一行：

$(document).off('focusin.modal');

Answer 3

一个简单的解决方案是创建用于插入 link 的自定义工具。首先隐藏 bootstrap 模式然后显示插入 link window.

  $scope.editorOptions = {
        tools: [
            "fontName",
            "bold",
            "italic",
            "underline",
            "fontSize",
            "indent",
            {
                name: "custom",
                tooltip: "Insert Link",
                template: "<button class='k-button' ng-click='createLink()'>Add Link</button>"
            }
        ]
    };

   $scope.createLink = function () {
        var popupHtml =
            '<div class="k-editor-dialog k-popup-edit-form k-edit-form- 
          container" style="width:auto;">' +
            '<div style="padding: 0 1em;">' +
            '<div class="k-edit-label">' +
            '<label for="k-editor-link-url">Web address</label>' +
            '</div>' +
            '<div class="k-edit-field">' +
            '<input type="text" class="k-textbox" id="k-editor-link-url">' +
            '</div>' +
            '<div class="k-edit-label k-editor-link-text-row">' +
            '<label for="k-editor-link-text">Text</label>' +
            '</div>' +
            '<div class="k-edit-field k-editor-link-text-row">' +
            '<input type="text" class="k-textbox" id="k-editor-link-text">' +
            '</div>' +
            '<div class="k-edit-label">' +
            '<label for="k-editor-link-title">ToolTip</label>' +
            '</div>' +
            '<div class="k-edit-field">' +
            '<input type="text" class="k-textbox" id="k-editor-link-title">' +
            '</div>' +
            '<div class="k-edit-label"></div>' +
            '<div class="k-edit-field">' +
            '<input type="checkbox" class="k-checkbox" id="k-editor-link-target">' +
            '<label for="k-editor-link-target" class="k-checkbox-label">Open link in new window</label>' +
            '</div>' +

            '</div>' +
            '<div class="k-edit-buttons k-state-default">' +
            '<button class="k-dialog-insert k-button k-primary">Insert</button>' +
            '<button class="k-dialog-close k-button">Cancel</button>' +
            '</div>' +
            '</div>';

        $('#hideyourmodal').modal('hide');
        var editor = $("#notificationText").data("kendoEditor");
        var selection = editor.getSelection();

        // Store the Editor range object.
        // Needed for IE.
        var storedRange = editor.getRange();

        // Create a modal Window from a new DOM element.
        var popupWindow = $(popupHtml)
            .appendTo(document.body)
            .kendoWindow({
                // Modality is recommended in this scenario.
                modal: true,
                width: 600,
                resizable: false,
                title: "Create Link",
                // Ensure the opening animation.
                visible: false,
                // Remove the Window from the DOM after closing animation is finished.
                deactivate: function (e) { e.sender.destroy(); }
            }).data("kendoWindow")
            .center().open();

        // Insert the new content in the Editor when the Insert button is clicked.
        popupWindow.element.find(".k-dialog-insert").click(function () {
            var linkToAdd = '';
            var urlPart = popupWindow.element.find("#k-editor-link-url").val();
            var textPart = popupWindow.element.find("#k-editor-link-text").val();
            var tooltipPart = popupWindow.element.find("#k-editor-link-title").val();
            if (popupWindow.element.find("#k-editor-link-target").prop("checked") == true) {
                linkToAdd = '<a href=' + urlPart + ' target="_blank" title=' + tooltipPart + '>' + textPart + '</a>';
            }
            else {
                linkToAdd = '<a href=' + urlPart+' title=' + tooltipPart + '>' + textPart + '</a>';
            }
            editor.selectRange(storedRange);
            editor.exec("inserthtml", { value: linkToAdd });
            $('#hideyourmodal').modal('show');
        });

        // Close the Window when any button is clicked.
        popupWindow.element.find(".k-edit-buttons button").click(function () {
            // Detach custom event handlers to prevent memory leaks.
            popupWindow.element.find(".k-edit-buttons button").off();
            popupWindow.close();
            $('#hideyourmodal').modal('show');
        });
    }

在模式中使用 kendo 编辑器时插入超链接弹出只读

Insert hyperlink popup read only when using kendo editor in modal

javascript

asp.net-mvc

jquery

bootstrap-modal

kendo-editor