Question

我在自己创建的TextBox和TextArea上使用TinyMCE。问题是我需要在这些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，{{1} }，tel和email。当您使用password或其他块元素时，您无法使用<div>属性来提示＆＃34;提示＆＃34;进入将持有TinyMCE的placeholder。

TinyMCE本身没有你可以指定的占位符属性（在init或标记上），但似乎至少有一个第三方插件，有人写这个插件来解决这个问题：

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

不幸的是，插件不目前适用于内联编辑，但我确信您可以对其进行扩展，以便它可以在该方案中使用。 GitHub中存在一个问题，即请求非常支持。

TinyMCE隐藏Div的占位符

1 个答案: