2016-05-27 4 views
0

テキストボックスとテキストエリアがあり、要素に をフォーカスするたびに実装しようとしましたが、小さなMCEバーが表示されます。Tiny-MCEがテキストボックスとテキストエリアで正しく機能しない

問題は、正しく機能しないということです。自分のプロジェクトでは、テキストボックスとテキストエリアの幅と高さを独自に変更することさえあります。

私はjsFiddleで簡単な例を作りました。それは混乱を作ります。小さなMCEは、テキストボックスに焦点を当てて、機能を押しても(「ボールド」と言います)何も効果を発揮しない場合、その場所にとどまりません。 (JSFiddleでは、私の
プロジェクトのようにテキストボックス/テキストエリアのサイズが変更されることはありません)。

HTML:

<h3>Item Name</h3> 
<div class="form-group"> 
    <div class="col-md-6"> 
    <input type="text" class="form-control text-box-styling text-box-area" 
      placeholder="Insert Name Here" id="inputItemName"> 
    </div> 
</div> 

<h3>Description</h3> 
<form class="form-horizontal form-bordered" method="get"> 
    <div class="form-group"> 
    <div class="col-md-6"> 
     <textarea class="form-control text-area-styling text-box-area" 
        rows="3" 
        placeholder="Insert a short description to indicate what 
           this item is about" 
        id="textareaDescription"> 
     </textarea> 
    </div> 
    </div> 
</form> 

CSS:

.form-control { 
    display: block; 
    width: 100%; 
    height: 34px; 
    padding: 6px 12px; 
    font-size: 14px; 
    line-height: 1.42857143; 
    color: #555; 
    background-color: #fff; 
    background-image: none; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; 
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
} 
.text-box-styling { 
    width: 460px !important; 
    margin-bottom: -4px; 
} 

.text-area-styling { 
    resize:none; 
    width: 460px; 
    height: 60px !important; 
    /*margin-bottom: -4px;*/ 
} 

JAVASCRIPT:それは

tinymce.init({ 
      selector: '.text-box-area', 
      inline: true, 
      setup: function (editor) { 
       editor.on('focus', function (e) { 
        console.log("focus"); 
       }); 

       editor.on('blur', function (e) { 
        console.log("blur"); 
       }); 
      }, 
}); 

https://jsfiddle.net/1upajsnf/

を固定することができますか?あなたは私を見せてくれますか?事前の おかげで、 EVH671

答えて

1

あなたは間違ってやっている三つの基本的な事柄... TinyMCEのインライン編集がブロック要素ではない入力フィールド上で動作します

1.があります。

ここに記載されるように:https://www.tinymce.com/docs/get-started/use-tinymce-inline/#enablinginlineeditingmode

"...インラインのみブロック要素(例えばDIV、H1)内にあるコンテンツに対応しています。"

あなたの例では、インライン編集で<textarea>を使用しようとしています。代わりに<div>を使用すると、意図したとおりに動作します。

2.あなたの<textarea>は、フォーム要素にクラスのフォーム・コントロール」を追加するとブートストラップは、その要素にCSSのスルーを追加します

ブートストラップ「フォームコントロール」です。 TinyMCEが期待どおりに動作するためには、TinyMCEのフォームコントロールに使用する<div>を作成しません。

3.あなたの.text-area-stylingはそれがTinyMCEのは、インラインモードで動作するように望んでいる方法で問題を引き起こしているように私はこのためにあなたのCSSをコメントアウトのTinyMCEのインライン編集

に干渉している - あなたはautoresizeを使用することを選択した場合は特にプラグイン。クリックしてインライン編集を開始できる場所を明確にするために、<div>に境界線を追加しました。実際のアプリでは、ホバー上に追加して、ボーダーが常にそこにないようにすることができます。

私が参照、変更するために調整し、あなたの例のこの更新フィドルチェックアウト:https://jsfiddle.net/4kymf0vh/4/

側注:チェックアウト自動サイズ変更プラグイン

インライン編集を使用する多くの人々は、自動サイズ変更プラグインを使用します(https://www.tinymce.com/docs/plugins/autoresize/を)を使用して、エディタのサイズを制御したり、エディタ内のコンテンツが拡大するにつれてそれが拡大するかどうかを判断したりできます。

関連する問題