无法在 TinyMCE 编辑器中键入 space

Question

我最近遇到无法在内嵌 TinyMCE 可编辑区域中添加 space 的问题。

正如您在下面看到的，单击前 3 个导航项是可编辑的，您可以键入任何字符，但是当您 select "Thislinkcannotcontainspaces" link 时，您不能添加任何spaces.

它们都使用相同的 data-editable 最小属性，它们都挂接到 a 标签中，都在 li 内，我完全不知道为什么会这样正在发生。

预期的行为是所有导航元素都可以使用任何字符进行编辑，包括 space。

tinymce.init({
  selector: '[data-editable-minimal]',
  inline: true,
  toolbar: false,
  menubar: false
});

h2.mce-content-body {
  font-size: 200%;
  padding: 0 25px 0 25px;
  margin: 10px 0 10px 0;
}

body {
  background: transparent;
}

.content {
  overflow: visible;
  position: relative;
  width: auto;
  margin-left: 0;
  min-height: auto;
  padding: inherit;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="//www.tinymce.com/css/codepen.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<nav class="navbar navbar-default navbar-user">
  <div class="container">
    <div class="navbar-header">

      <!-- Collapsed Hamburger -->
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
    </div>

    <div class="collapse navbar-collapse" id="app-navbar-collapse">
      <!-- Left Side Of Navbar -->
      <ul class="nav navbar-nav">
        <li><a href="#" data-editable-minimal>Forums</a></li>
        <li class="dropdown">
          <a href="#" class="" role="button" aria-haspopup="true" aria-expanded="false" data-editable-minimal>A Link
            <span class="caret"></span></a>
          <ul class="dropdown-menu open show">
            <li><a href="/" data-editable-minimal>Thislinkcannotcontainspaces</a></li>
          </ul>
        </li>
        <li><a href="/" data-editable-minimal>A link</a></li>
      </ul>
    </div>
  </div>

</nav>

Answer 1

根据 TinyMCE 文档，内联模式仅适用于块级元素。 <a> 标签不是块级元素，因此它不起作用也就不足为奇了。

https://www.tinymce.com/docs/configure/editor-appearance/#inline

<li> 标签是块级元素，所以如果您使用它来代替，您的结果会改变吗？

Answer 2

原来bootstrap内部有冲突。当使用 bootstrap 的下拉模块时，它会在打开下拉菜单时覆盖某些键，从 v3.3.7 开始，它会覆盖键码 38|40|27|32

无法在 TinyMCE 编辑器中键入 space

Cannot type a space in TinyMCE editor

javascript

tinymce

tinymce-4