Question

我试图将Google的Closure库用于HTML编辑器。我创建了一个goog.editor.SeamlessField，但是如果我输入一个对于宽度来说太长的单词，它会将滚动条放入并覆盖文本。我该如何解决这个问题？

SeamlessField with covered text

这似乎只发生在Firefox中。以下是一些解决问题的HTML：

<!DOCTYPE html>
<html>
<head>
  <script type='text/javascript' src='/closure-library/closure/goog/base.js'></script>
  <script>
  goog.require('goog.dom');
  goog.require('goog.editor.SeamlessField');
  </script>
  <script>
  function init() {
     var d = goog.dom.getElement('div1');
     var f = new goog.editor.SeamlessField(d);
     f.makeEditable();
  }
  </script>
</head>
<body>


<div style='width:150px;'>
<div id='div1'>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
</div>

<button onclick='init();'>Create editor</button>
</body>
</html>

Answer 1

此SeamlessField组件生成的DOM片段因Chromium和Firefox而异。前者获得了经典的div元素，后者发布了iFrame。该方案与Firefox处理内容可编辑元素的方式有关。通过设置iFrame的样式，您应该能够避开滚动条。

Closure的SeamlessField用滚动条覆盖文本

1 个答案: