javascript - Tiny-MCE 在文本框和文本区域上无法正常工作

Question

我有一个文本框和文本区域，我已经尝试在您集中注意力时实现在元素上，会显示 Tiny MCE 栏。

问题是它无法正常工作，在我自己的元素中，它甚至会自行更改文本框和文本区域的宽度和高度。

我在 jsFiddle 中做了一个简短的例子。它造成了困惑。如果您专注于文本框，Tiny MCE 不会留在原处，而且如果您按下某个功能(假设为“BOLD”)，它也不会产生任何影响。(在 JSFiddle 中，您看不到它会像在我的
中那样更改文本框/文本区域大小 元素)。

HTML:

<h3>Item Name</h3>
<div class="form-group">
  <div class="col-md-6">
    <input type="text" class="form-control text-box-styling text-box-area"   
           placeholder="Insert Name Here" id="inputItemName">
  </div>
</div>

<h3>Description</h3>
<form class="form-horizontal form-bordered" method="get">
  <div class="form-group">
    <div class="col-md-6">
        <textarea class="form-control text-area-styling text-box-area" 
                  rows="3"  
                  placeholder="Insert a short description to indicate what  
                               this item is about"  
                  id="textareaDescription">
        </textarea>
    </div>
  </div>
</form>

CSS:

.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.text-box-styling {
    width: 460px !important;
    margin-bottom: -4px;
}

.text-area-styling {
    resize:none;
    width: 460px;
    height: 60px !important;
    /*margin-bottom: -4px;*/
}

JavaScript:

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

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

https://jsfiddle.net/1upajsnf/

如何修复？你能告诉我吗？提前致谢，EVH671

Answer 1

您做错了三件基本的事情...

<强>1。 TinyMCE 内联编辑适用于 block 元素而不是输入字段。

如此处记录:https://www.tinymce.com/docs/get-started/use-tinymce-inline/#enablinginlineeditingmode

“...内联仅适用于 block 元素(例如 div、h1)内的内容。”

您的示例试图使用 <textarea>与内联编辑。如果您使用 <div>相反，它将按预期工作。

<强>2。你的<textarea>是一个 Bootstrap“表单控件”

当您将“form-control”类添加到表单元素时，Bootstrap 将向该元素添加大量 CSS。为了让 TinyMCE 按预期工作，我不会制作 <div>您将为 TinyMCE 使用“表单控件”。

<强>3。你的.text-area-styling正在干扰 TinyMCE 的内联编辑

我为此注释掉了你的 CSS，因为它导致了 TinyMCE 如何在内联模式下工作的问题 - 特别是如果你选择使用 autoresize插入。我确实为 <div> 添加了边框以明确您可以在何处单击以启动内联编辑。在真正的应用程序中，您可以在悬停时添加它，这样边框就不会一直存在。

检查您的示例的这个更新的 Fiddle 调整以进行我引用的更改:https://jsfiddle.net/4kymf0vh/4/

旁注:检查自动调整大小插件

许多使用内联编辑的人使用自动调整大小插件 ( https://www.tinymce.com/docs/plugins/autoresize/ ) 来帮助控制编辑器的尺寸以及它是否可以随着编辑器中内容的增长而增长。