Question

是否有像summernote或tinyMCE这样的html编辑器允许从bootstrap中添加行和列？

我遵循了@Korgrue的建议，我发现我也可以使用summernote创建自定义按钮。但我的代码是将原始文本放在textarea上，它不会将html更改为bootstrap。这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
    <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">
</head>
<body>

    <div id="summernote"></div>

    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> 
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>
    <script>
        $(document).ready(function() {
            var HelloButton = function (context) {
              var ui = $.summernote.ui;

              // create button
              var button = ui.button({
                contents: '<i class="fa fa-child"/> Hello',
                tooltip: 'hello',
                click: function () {
                  // invoke insertText method with 'hello' on editor module.
                  context.invoke('editor.insertText', '<div class="row">Row</div>');
                }
              });

              return button.render();   // return button as jquery object 
            }

            $('#summernote').summernote({
              toolbar: [
                ['mybutton', ['hello']]
              ],

              buttons: {
                hello: HelloButton
              }
            });
        });
    </script>
</body>
</html>

我错过了什么吗？

使用bootstrap中的行和列编辑html

0 个答案: