This is a migrated thread and some comments may be shown as answers.

tool viewHtml editing not working in twitter bootstrap modal

2 Answers 618 Views

Editor

This is a migrated thread and some comments may be shown as answers.

Frederic asked on 06 May 2013, 01:48 PM

Hello,

the viewHtml tool doesn't seems to work when in a bootstrap modal. It' display the code properly but the text cannot be selected or edited.

I tried it in chrome see the file attached

<!DOCTYPE html>

<html>

<head>

<title></title>

<link href="//cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" />

<link href="//cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" />

<link href="//twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="//cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>

<script src="//twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script>

<script src="//twitter.github.io/bootstrap/assets/js/bootstrap-modal.js"></script>

</head>

<body>

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>

<h3 id="myModalLabel">Modal header</h3>

</div>

<div class="modal-body">

<textarea id="editor" rows="10" cols="30" style="width:100%;height:400px"></textarea>

</div>

<div class="modal-footer">

<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>

<button class="btn btn-primary">Save changes</button>

</div>

<script>

$("#editor").kendoEditor({

tools: [

"bold",

"italic",

"underline",

"strikethrough",

"fontName",

"fontSize",

"foreColor",

"backColor",

"justifyLeft",

"justifyCenter",

"justifyRight",

"justifyFull",

"insertUnorderedList",

"insertOrderedList",

"indent",

"outdent",

"formatBlock",

"createLink",

"unlink",

"insertImage",

"subscript",

"superscript",

"viewHtml"

]

});

var editor = $("#editor").data("kendoEditor");

editor.value("test testes");

</script>

</body>

</html>

2 Answers, 1 is accepted

Accepted