2017-04-19 11 views
0

最近、インラインTinyMCE編集可能領域にスペースを追加できないという問題を抱えています。TinyMCEエディタでスペースを入力できません

下に示すように、クリックすると上位3つのナビゲーション項目が編集可能で、任意の文字を入力できますが、「Thislinkcannotcontainspaces」リンクを選択するとスペースを追加できません。彼らの両方が同じdata-editable最小限の属性を使用

、彼らの両方がaタグにフックされ、両方のli以内に、私はこれが起こっている理由としてアイデアを完全にしています。

予想される動作は、すべてのnav要素がスペースを含む任意の文字で編集可能であることです。 TinyMCEのドキュメントのインラインモード毎

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>

答えて

0

bootstrapに矛盾があります。 bootstrapのドロップダウンモジュールを使用する場合はドロップダウンが開いているとき、それはあなたがデモで見ることができるように38|40|27|32

0

のみブロックレベル要素上で機能することが意図されています。 <a>タグはブロックレベルの要素ではないので、これはうまくいきません。あなたの代わりにあなたの結果の変更を行うことを使うので、もし

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

<li>タグはブロックレベル要素ですか?

+0

、それは複数の 'A'タグに取り付けられており、彼らはキーコードを上書きしますv3.3.7のように、それは、特定のキーを上書きしますうまく動作します。私は彼らのどれも働いていないかどうか理解できましたが、そうではありません。 – Ian

関連する問題