使用行和列從引導編輯HTML

是否有像summernote或tinyMCE這樣的任何html編輯器允許從引導添加行和列？使用行和列從引導編輯HTML

我跟着@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>

我錯過了什麼嗎？

來源

2017-02-23 churros

你可以在TinyMCE中做到這一點。您必須爲工具欄設置一個自定義按鈕，並定義您希望生成的內容（以html形式，以字符串形式）。爲列添加一個，爲行添加一個。對於列，您需要定義一個文本字段，用戶可以在其中輸入列的數量，並讓onclick句柄將列計數附加到html元素中。

https://www.tinymce.com/docs/demo/custom-toolbar-button/

tinymce.init({ 
     selector: 'textarea', 
     height: 500, 
     toolbar: 'mybutton', 
     menubar: false, 
     setup: function (editor) { 
     editor.addButton('mybutton', { 
     text: 'My button', 
     icon: false, 
     onclick: function() { 
     editor.insertContent('&nbsp;<b>It\'s my button!</b>&nbsp;'); // <--- this line is where you would define the HTML to use on button click. 
     } 
    }); 
    }, 
    content_css: [ 
    '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css', 
    '//www.tinymce.com/css/codepen.min.css' 
    ] 
    });

來源

2017-02-23 20:34:48 Korgrue

我想你summernote建議什麼。我用我的代碼編輯了我的帖子。當按鈕生成文本時，它不會將引導代碼更改爲html。它是一個原始文本。你知道我錯過了什麼嗎？ – churros

使用行和列從引導編輯HTML

回答

相關問題