当我在模态中使用剑道编辑器时,插入超链接/图像弹出窗口是只读的。我该怎么解决?
剑道UI版本2015.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">×</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>
我收到了Telerik团队的回复
剑道UI编辑器使用"插入超链接"工具的弹出窗口。弹出窗口被呈现为主体的子窗口,即它在引导模式对话框之外。因此,Bootstrap模式对话框不允许聚焦弹出窗口中的任何内容。
请禁用引导对话框的模态,或使用模态剑道UI窗口。
http://docs.telerik.com/kendo-ui/using-kendo-with-twitter-bootstrap#known-限制
在脚本中插入此行:
$(document).off('focusin.modal');
一个简单的解决方案是创建用于插入链接的自定义工具。Firs隐藏引导模式,然后显示插入链接窗口。
$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');
});
}