ブートストラップの行と列を使用するエディタhtml

summernoteやtinyMCEのような、ブートストラップから行と列を追加できるHTMLエディタはありますか？ブートストラップの行と列を使用するエディタhtml

私は@ Korgrueのアドバイスに従っており、私はsummernoteを使用してカスタムボタンを作成できることもわかりました。しかし、私のコードは、テキストエリアに生のテキストを置いている、それはブートストラップにHTMLを変更しません。これは私のコードです：

<!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形式、文字列）を定義する必要があります。列に1つ、行に1つを追加します。列の場合は、ユーザーが列の量を入力できるテキストフィールドを定義し、列数をHTML要素に追加するonclickハンドルを設定する必要があります。

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

答えて

関連する問題