Unable to get Firepad to work properly

StackOverflow https://stackoverflow.com/questions/19470628

문제

I created a Firebase (https://mkaminsky.firebaseio.com/), and am attempting to use Firepad to create a code collaboration tool. I created this html file, as said in the example(https://github.com/firebase/firepad/blob/master/examples/code.html).

<!doctype html>
<!-- See http://www.firepad.io/docs/ for detailed embedding docs. -->
   <html>
      <head>
         <meta charset="utf-8" />
         <script src="https://cdn.firebase.com/v0/firebase.js"></script>

         <script src="codemirror/lib/codemirror.js"></script>
         <script src="codemirror/mode/javascript/javascript.js"></script>
         <link rel="stylesheet" href="codemirror/lib/codemirror.css" />

         <script src="firepad.js"></script>
         <link rel="stylesheet" href="firepad.css" />
         <style>
             html { height: 100%; }
             body { margin: 0; height: 100%; position: relative; }
             .firepad {
              position: absolute; left: 0; top: 0; bottom: 0; right: 0; height: auto;
              }
         </style>
   </head>
   <body>
      <button type="button">Test</button> 
      <div id="firepad-container"></div>

      <script>
         //// Initialize Firebase.
         var firepadRef = new Firebase('https://mkaminsky.firebaseio.com/');

         //// Create CodeMirror (with line numbers and the JavaScript mode).
         var codeMirror = CodeMirror(document.getElementById('firepad-container'), {
           lineNumbers: true,
           mode: 'javascript'
         });

         //// Create Firepad.
         var firepad = Firepad.fromCodeMirror(firepadRef, codeMirror);

         //// Initialize contents.
         firepad.on('ready', function() {
           if (firepad.isHistoryEmpty()) {
            firepad.setText('//hello');
           }
         });
    </script>
</body>
</html>

However, this code does not work as it should. It displays the code editor, complete with syntax highlighting, but does not execute the "setText('//hello');" method. Any other commands put in its place also do not work.

In addition, the button is not displayed in the html page.

I have tested and verified that the Firebase works properly.

도움이 되었습니까?

해결책

Could it be the isHistoryEmpty() code doesn't run for you simply because it worked once and now the history is not empty?

$ curl  https://mkaminsky.firebaseio.com/.json 
{"users":{"-J6J90xrR-D-XC6WE23F":{"color":"#d5b3ff"}},"history":{"A0":{"a":"-J6HUBET5icmC-yXAkJb","o":["//hello"]}}}

Try clearing your firebase or using a fresh namespace for the firepad documents. The easiest way to test fresh namespaces is

Firepad.fromCodeMirror(firepadRef.push(), codeMirror);

which consistently runs the isHistoryEmpty() branch for me (tested on https://cben-sandbox.firebaseio.com/, Chrome & Firefox).

다른 팁

It's most likely missing CSS formatting. As per the documentation, add the following CSS rule: 

.firepad {
  width: 700px;
  height: 450px;
  background-color: #f62; /* dark orange background */
}

Before CSS Styling Before CSS Styling After CSS Styling After CSS Styling

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top