TinyMCE скрыть заполнитель Div

Я использую TinyMCE на моем собственном созданном TextBox и TextArea.
Дело в том, что мне нужно поместить заполнитель в этих дивах.

Я пытался его реализовать.
Дело в том, что заполнитель отображается, когда TinyMCE не активен,
и когда он активен, редактирование текста работает как ожидалось, но не отображается заполнитель.

Кроме того, мне нужно, чтобы заполнитель и входной текст были перемещены
немного осталось.

Вот фрагмент в JSFiddle:

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);
}

ЯВАСКРИПТ

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

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

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

После того, что я пробовал, как это можно исправить?

Спасибо заранее,

EVH671

1 ответ

  1. Глядя на спецификацию HTML, placeholderатрибут работает со следующими <input>типами:text,search,url,tel,email, и password. При использовании <div>того или иного элемента блока нельзя использовать placeholderатрибут, чтобы поместить «подсказку» в то<div>, что будет содержать TinyMCE.

    TinyMCE сам по себе не имеет атрибута заполнителя, который можно указать (в init или на теге), но, кажется, есть по крайней мере один сторонний плагин, который кто-то написал, чтобы решить эту проблему:

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

    К сожалению, этот плагин в настоящее время не работает для встроенного редактирования, но я уверен, что вы могли бы расширить его, чтобы он работал в этом сценарии. Есть проблема в GitHub, чтобы запросить эту самую поддержку.