TinyMCE hide Place Place

Question

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

Я попытался его реализовать. Дело в том, что местозаполнитель отображается, когда 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); 
} 

JAVASCRIPT

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

Answer 1

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

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

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

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