HTML：

Question

我有一个文本框和文本区域，我试图在你专注时实现在元素上，Tiny MCE栏显示出来。

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

我在jsFiddle中做了一个简短的例子。它造成了一团糟。如果您专注于文本框，并且如果您按下某个功能（让我们说“BOLD”），Tiny MCE不会留在原位，它不会产生任何影响。（在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内联编辑适用于块元素而不是输入字段。

如此处所述：https://www.tinymce.com/docs/get-started/use-tinymce-inline/#enablinginlineeditingmode

＆＃34; ...内联仅适用于块元素内的内容（例如div，h1）。＆＃34;

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

<强> 2。您的<textarea>是一个Bootstrap＆＃34;表单控件＆＃34;

当您添加课程＆＃39;表单控件＆＃39;表单元素Bootstrap将为该元素添加一大堆CSS。为了使TinyMCE按预期工作，我不会将你将用于TinyMCE的<div>表格控制＆＃39;。

第3。您的.text-area-styling干扰了TinyMCE的内联编辑

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

请查看此示例的更新后的Fiddle，以便进行我引用的更改：https://jsfiddle.net/4kymf0vh/4/

旁注：查看autoresize插件

许多使用内联编辑的人使用autoresize插件（https://www.tinymce.com/docs/plugins/autoresize/）来帮助控制编辑器的维度，以及它是否可以随着编辑器中内容的增长而增长。

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

HTML：

CSS：

JAVASCRIPT：

1 个答案: