Fatal编程技术网
  • javascript/
  • Javascript 在模态中使用剑道编辑器时，插入超链接弹出窗口只读

Javascript 在模态中使用剑道编辑器时，插入超链接弹出窗口只读

javascript jquery asp.net-mvc

Javascript 在模态中使用剑道编辑器时，插入超链接弹出窗口只读,javascript,jquery,asp.net-mvc,bootstrap-modal,kendo-editor,Javascript,Jquery,Asp.net Mvc,Bootstrap Modal,Kendo Editor,当我在模式中使用剑道编辑器时，插入超链接/图像弹出窗口是只读的。 我怎样才能解决这个问题 剑道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 cl

当我在模式中使用剑道编辑器时，插入超链接/图像弹出窗口是只读的。 我怎样才能解决这个问题

剑道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>


$（文档）.ready（函数（）{
//使用默认工具集从textarea HTML元素创建编辑器
$（“#编辑”）.kendoEditor({
可调整大小：{
内容:对,，
工具栏：真
}
});
});
$（“#测试”）。在（“单击”上，函数（e）{
$（“#myModal”）.modal（'show'）；
});
我收到了Telerik团队的回复

剑道UI编辑器使用“插入超链接”工具的弹出窗口。弹出窗口作为主体的子对象呈现，即它位于引导模式对话框之外。因此，引导模式对话框不允许聚焦弹出窗口中的任何内容

请禁用引导对话框的模态，或使用模态剑道 而不是UI窗口

我收到了Telerik团队的回复

剑道UI编辑器使用“插入超链接”工具的弹出窗口。弹出窗口作为主体的子对象呈现，即它位于引导模式对话框之外。因此，引导模式对话框不允许聚焦弹出窗口中的任何内容

请禁用引导对话框的模态，或使用模态剑道 而不是UI窗口

在脚本中插入此行：

$（document.off（'focusin.model'）
在脚本中插入此行：


$（document.off（'focusin.model'）
一个简单的解决方案是创建用于插入链接的自定义工具。首先隐藏引导模式，然后显示插入链接窗口


  $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');
        });
    }



$scope.editorOptions={
工具：[
“方名”，
“粗体”，
“斜体”，
“下划线”，
“字体大小”，
“缩进”，
{
名称：“海关”，
工具提示：“插入链接”，
模板：“添加链接”
}
]
};
$scope.createLink=函数（）{
var popupHtml=
'' +
'' +
'' +
“网址”+
'' +
'' +
'' +
'' +
'' +
“文本”+
'' +
'' +
'' +
'' +
'' +
“工具提示”+
'' +
'' +
'' +
'' +
'' +
'' +
'' +
“在新窗口中打开链接”+
'' +
'' +
'' +
“插入”+
“取消”+
'' +
'';
$（'hideyourmodal'）.modal（'hide'）；
var编辑器=$（“#notificationText”）.data（“kendoEditor”）；
var selection=editor.getSelection（）；
//存储编辑器范围对象。
//IE需要。
var storedRange=editor.getRange（）；
//从新的DOM元素创建模式窗口。
var popupWindow=$（popupHtml）
.appendTo（document.body）
肯多文多先生({
//在这种情况下，建议使用模态。
莫代尔：是的，
宽度：600，
可调整大小：false，
标题：“创建链接”，
//确保打开动画。
可见：假，
//关闭动画完成后，从DOM中删除窗口。
停用：函数（e）{e.sender.destroy（）；}
}).数据（“kendoWindow”）
.center（）.open（）；
//单击“插入”按钮时，在编辑器中插入新内容。
popupWindow.element.find（“.k-dialog-insert”）。单击（函数（）{
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=''；
}
否则{
linkToAdd=''；
}
编辑器。选择范围（storedRange）；
exec（“inserthtml”，{value:linkToAdd}）；
$（'hideyourmodal'）.modal（'show'）；
});
//单击任何按钮时关闭窗口。
popupWindow.element.find（“.k-编辑按钮”）。单击（函数（）{
//分离自定义事件处理程序以防止内存泄漏。
popupWindow.element.find（“.k-edit-buttons”）.off（）；
popupWindow.close（）；
$（'hideyourmodal'）.modal（'show'）；
});
}

一个简单的解决方案是创建用于插入链接的自定义工具。首先隐藏引导模式，然后显示插入链接窗口


  $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');
        });
    }



$scope.editorOptions={
工具：[
“方名”，
“粗体”，
“斜体”，
“下划线”，
“字体大小”，
“缩进”，
{
名称：“海关”，
工具提示：“插入链接”，
模板：“添加链接”
}
]
};
$scope.createLink=函数（）{
var popupHtml=
'' +
'' +
'' +
“网址”+
'' +
'' +
'' +
'' +
'' +
“文本”+
'' +
'' +
'' +
'' +
'' +
“工具提示”+
'' +
'' +
'' +
'' +
'' +
'' +
'' +