Firepad文本编辑器 - 文本区域不显示 [英] Firepad text editor - text area not showing

问题描述

我遵循

但是文本字段不会出现，即使我提到了正确的 id 。原来是这样的。

什么我做错了。是否还有其他可用的文本编辑器？

解决方案

这里是一个firebase pad的例子：

 函数init（）{////初始化Firebase。 var firepadRef = getExampleRef（）; // TODO：将上面的行替换为：// var firepadRef = new Firebase（'< YOUR FIREBASE URL>'）; ////创建CodeMirror（用lineWrapping打开）。 var codeMirror = CodeMirror（document.getElementById（'firepad-container'），{lineWrapping：true}）; ////创建Firepad（启用丰富的文本工具栏和快捷键）。 var firepad = Firepad.fromCodeMirror（firepadRef，codeMirror，{richTextToolbar：true，richTextShortcuts：true}）; ////初始化内容。 firepad.on（'ready'，function（）{if（firepad.isHistoryEmpty（））{firepad.setHtml（'< span style =font-size：24px;>用< span style =color：red> Firepad！< / span>< / span>< br />< br />协作编辑变得简单易行。\ n'）;}}）;} / / Helper从URL的末尾获取哈希值或生成一个随机的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（）; //生成唯一的位置。 window.location = window.location +'＃'+ ref.key（）; //将其作为散列添加到URL中。 } return ref;} init（）;  

html {height ：100％; } body {margin：0;身高：100％;位置：相对;背景色：＃C00000; } / *可以为您的用例自定义高度/宽度/定位。为了演示目的，我们让firepad填充整个浏览器。 * /＃firepad-container {width：100％;身高：100％;背景色：＃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 =stylesheethref =https：//cdnjs.cloudflare。 com / ajax / libs / codemirror / 5.2.0 / codemirror.css/><！ - Firepad - >< link rel =stylesheethref =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>< / >< body style =border：2px; margin：50px; padding：5px;>< div id =firepad-container>< / div>< / body> firepad-container

在另一个div内，然后将高度设置为该div以避免 height：0px; （并因此隐藏文本区域）

R efer： Firepad示例

I'm following the instruction from here to create a firepad editor.

my code is:

    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>

The problem is i got the button for option as shown in the figure.

but the text field is not coming, even i mention the correct id. The original will be like this.

what i'm doing wrong. is there any other text editor available to work with?

解决方案

Here is an example of 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>

Edit: If you are putting the firepad-container within another div then set a height to that div to avoid height:0px; (and hence text-area being hidden)

Refer : Firepad example

这篇关于Firepad文本编辑器 - 文本区域不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！