Firepad Texteditor - Textbereich nicht angezeigt

Question

Ich befolge die Anweisung von here, um einen Editor zu erstellen.

mein Code:

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>

Das Problem ist, ich die Taste für die Option erhielt, wie in der Abbildung dargestellt.

aber das Textfeld kommt nicht, auch erwähnen ich die richtige id. Das Original wird so sein.

, was mache ich falsch. Gibt es einen anderen Texteditor, mit dem man arbeiten kann? Hier

Answer 1

ist ein Beispiel für Feuerbasis Pad:

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>

Edit: Wenn Sie die firepad-container in einem anderen div setzen und stellen Sie dann eine Höhe zu diesem div height:0px; (und damit Text zu vermeiden -Bereichs wird versteckt)

siehe: Firepad example