angularjs ui bootstrap模式中缺少textbox.io编辑器工具箱

时间:2014-12-14 02:45:34

标签: angularjs twitter-bootstrap

我们在域中使用textboxio编辑器。我已经集成了textboxio。它在chrome safari和IE10上运行良好。但是在Firefox中工具栏没有显示出来。仅供参考我们在角度ui bootstap模式中使用这个。它以完整的模态显示在形式中。但是我们需要在模态中打开它 请帮我们解决这个问题

请找到plunker链接: plunker textbox editor link

<html>
<head>
<link rel="stylesheet" href="bootstrap.css" />
<script src="jquery.js"></script>
<script src="bootstrap.min.js"></script>
<script type="text/javascript" src="textboxio.js"></script>
</head>
<body>
<h2>Textboxio with angularjs ui bootstrap modal</h2>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal"
    data-target="#myModal">
 </button>
<!-- Modal -->

<div class="modal fade" id="myModal">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body" style="height:300px">
            Add some text here
            <textarea id="editorTextArea" name="description"></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">
                Submit changes
            </button>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>


<script type="text/javascript">
    var editor = textboxio.replace('#editorTextArea');
</script>
</html>

1 个答案:

答案 0 :(得分:0)

You can change script like this

<script type="text/javascript">
 $('#myModal').on('shown.bs.modal', function (e) {
      var editor = textboxio.replace('#editorTextArea');
 });  
</script>