I've incorporated TinyMCE into my custom TextBox and TextArea, but I'm struggling to display a placeholder within these elements.
Initially, I attempted to implement a placeholder, which worked when TinyMCE was inactive. However, once activated, the placeholder disappeared while the text editing functionality remained unaffected.
Additionally, I would like for both the placeholder and input text to be slightly shifted to the left.
Below is a code snippet from 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/
If anyone has encountered this issue before and found a solution, I would greatly appreciate your guidance.
Thank you in advance,
EVH671