TinyMCE hide Divのプレースホルダー

Question

私は自分で作成したTextBoxとTextAreaでTinyMCEを使用しています。 問題は、それらのdivにプレースホルダを配置する必要があることです。

私はそれを実装しようとしました。 TinyMCEがアクティブでないときにプレースホルダーが表示されるのは、 です。アクティブな場合、テキスト編集は期待通りに機能しますが、プレースホルダーは表示されません。

さらに、プレースホルダと入力テキストが少し左に移動する必要があります。

HTML

<h3>Item Name</h3> 
<div class="form-group"> 
    <div class="col-md-6"> 
    <div class="text-box-styling text-box-area" id="inputItemName" 
     contentEditable=true data-text="Enter text here"> 
    </div> 
    </div> 
</div> 

<h3>Description</h3> 
<form class="form-horizontal form-bordered" method="get"> 
    <div class="form-group"> 
    <div class="col-md-6"> 
     <div class="text-area-styling text-box-area" 
      id="textareaDescription"> 
     </div>  
    </div> 
    </div> 
</form> 

CSS

.text-box-styling { 
    width: 460px !important; 
    height: 30px; 
    border: solid 1px #373d42; 
    border-radius:0px; 
    margin-bottom: -4px; 
} 

.text-area-styling { 
    resize:none; 
    width: 460px !important; 
    height: 60px !important; 
    border: solid 1px #373d42; 
    border-radius:0px; 
    /*margin-bottom: -4px;*/ 

} 

[contentEditable=true]:empty:not(:focus):before{ 
     content:attr(data-text); 
} 

JAVASCRIPT

：ここで

はJSFiddleでスニペットです

JSFIDDLE：https://jsfiddle.net/Ln631dh3/

私はそれを固定する方法を試してみた何に続いて？事前に

おかげで、

EVH671

Answer 1

HTMLの仕様を見てから、placeholder属性は、次の<input>タイプで動作します：text、search、url、tel、email、およびpassword。 <div>または他のブロック要素を使用しているので、placeholder属性を使用して、TinyMCEを保持する<div>に「ヒント」を入れることはできません。

TinyMCEは自身が（タグのinitまたは上の）指定できるプレースホルダの属性を持っていない誰かがこの問題点を解決するために書いたことを少なくとも一つのサードパーティのプラグインがあるように見えるん：

https://github.com/mohan/tinymce-placeholderを

残念ながら、プラグインは現在ではインライン編集には対応していませんが、このシナリオでは機能するように拡張することができます。 GitHubには非常にサポートを要請する問題があります。