[英]Firepad text editor - text area not showing
我正在按照此處的說明創建Firepad編輯器。
我的代碼是：
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 ，文本字段也不會出現。 原來會是這樣。
我在做什么錯。 還有其他可用的文本編輯器嗎？
這是firebase 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>
編輯：如果將firepad-container放在另一個div內，則將高度設置為該div以避免height:0px; （因此隱藏了文本區域）
參考： Firepad示例
如何找到Firepad編輯器的文本存儲位置以及如何清除編輯器
[英]How to find the text storage location of the firepad editor and how to clear the editor
firepad：變量作為firepad的codemirror div中的默認文本
[英]firepad: a variable as the default text in firepad's codemirror div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.