ファイアパッドテキストエディタ - テキスト領域が表示されない

Question

私はhereの指示に従ってファイアウォールエディタを作成しています。

私のコードは次のとおりです。

function init() { 
 
     var firepadRef = getExampleRef(); 
 
     var codeMirror = CodeMirror(document.getElementById('firepad-container'), { 
 
     lineWrapping: true 
 
     }); 
 
     var firepad = Firepad.fromCodeMirror(firepadRef, codeMirror, { 
 
     richTextToolbar: true, 
 
     richTextShortcuts: true 
 
     }); 
 
     firepad.on('ready', function() { 
 
     if (firepad.isHistoryEmpty()) { 
 
      firepad.setHtml('<span style="font-size: 24px;">Rich-text editing with <span style="color: red">Firepad!</span></span><br/><br/>Collaborative-editing made easy.\n'); 
 
     } 
 
     }); 
 
    } 
 

 
    function getExampleRef() { 
 
     var ref = new Firebase('https://firepad.firebaseio-demo.com'); 
 
     var hash = window.location.hash.replace(/#/g, ''); 
 
     if (hash) { 
 
     ref = ref.child(hash); 
 
     } else { 
 
     ref = ref.push(); 
 
     window.location = window.location + '#' + ref.key(); // add it as a hash to the URL. 
 
     } 
 
     return ref; 
 
    } 
 
    init();

<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script> 
 

 
    <!-- CodeMirror --> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.js"></script> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.css" /> 
 

 
    <!-- Firepad --> 
 
    <link rel="stylesheet" href="https://cdn.firebase.com/libs/firepad/1.2.0/firepad.css" /> 
 
    <script src="https://cdn.firebase.com/libs/firepad/1.2.0/firepad.min.js"></script> 
 

 
<div class="page-content"> 
 
    <div id="firepad-container"> 
 
    </div> 
 
</div>

問題は、図に示したように、私はオプションのボタンを持っています。

が、テキストフィールドには、私も、正しいid言及来ていません。元のようになります。私が間違ってやっている

。他のテキストエディタが利用できますか？ここで

Answer 1

がfirebaseパッドの例である：

function init() { 
 
    //// Initialize Firebase. 
 
    var firepadRef = getExampleRef(); 
 
    // TODO: Replace above line with: 
 
    // var firepadRef = new Firebase('<YOUR FIREBASE URL>'); 
 

 
    //// Create CodeMirror (with lineWrapping on). 
 
    var codeMirror = CodeMirror(document.getElementById('firepad-container'), { 
 
    lineWrapping: true 
 
    }); 
 

 
    //// Create Firepad (with rich text toolbar and shortcuts enabled). 
 
    var firepad = Firepad.fromCodeMirror(firepadRef, codeMirror, { 
 
    richTextToolbar: true, 
 
    richTextShortcuts: true 
 
    }); 
 

 
    //// Initialize contents. 
 
    firepad.on('ready', function() { 
 
    if (firepad.isHistoryEmpty()) { 
 
     firepad.setHtml('<span style="font-size: 24px;">Rich-text editing with <span style="color: red">Firepad!</span></span><br/><br/>Collaborative-editing made easy.\n'); 
 
    } 
 
    }); 
 
} 
 

 
// Helper to get hash from end of URL or generate a random one. 
 
function getExampleRef() { 
 
    var ref = new Firebase('https://firepad.firebaseio-demo.com'); 
 
    var hash = window.location.hash.replace(/#/g, ''); 
 
    if (hash) { 
 
    ref = ref.child(hash); 
 
    } else { 
 
    ref = ref.push(); // generate unique location. 
 
    window.location = window.location + '#' + ref.key(); // add it as a hash to the URL. 
 
    } 
 
    return ref; 
 
} 
 

 
init();

html { 
 
    height: 100%; 
 
    } 
 
    body { 
 
    margin: 0; 
 
    height: 100%; 
 
    position: relative; 
 
    
 
    background-color:#c00000; 
 
    } 
 
    /* Height/width/positioning can be customized for your use case. 
 
     For demo purposes, we make firepad fill the entire browser. */ 
 
    #firepad-container { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color:#c5c5c5; 
 
    }

<!-- Firebase --> 
 
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script> 
 

 
<!-- CodeMirror --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.css" /> 
 

 
<!-- Firepad --> 
 
<link rel="stylesheet" href="https://cdn.firebase.com/libs/firepad/1.2.0/firepad.css" /> 
 
<script src="https://cdn.firebase.com/libs/firepad/1.2.0/firepad.min.js"></script> 
 
<body style="border:2px;margin:50px;padding:5px;"> 
 
<div id="firepad-container"></div> 
 
</body>

編集：あなたは別のdiv内firepad-containerを入れている場合は、height:0px;を避けるために、そのdiv要素に高さを設定する（したがって、テキスト-area

は参照してください）隠されて：Firepad example