Tinymce 在文本框和文本区域上不能正常工作

Question

我有一个文本框和文本区，我已经尝试在您专注时实施在元素上，会显示 Tiny MCE 栏。

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

我在 jsFiddle 中做了一个简短的例子。它造成了混乱。如果您专注于文本框，Tiny MCE 不会停留在原位，而且如果您按下某个功能（比方说 "BOLD"），它也不会产生任何影响。（在 JSFiddle 中，您看不到它会像在 my
中那样更改文本 Box/Text 区域大小项目）。

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

"...内联仅适用于块元素内的内容（例如 div, h1）。"

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

2。你的 <textarea> 是 Bootstrap "form-control"

当您将 class 'form-control' 添加到表单元素时，Bootstrap 将向该元素添加一系列 CSS。为了使 TinyMCE 按预期工作，我不会将您将用于 TinyMCE 的 <div> 设为 'form-control'。

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

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

查看您的示例的更新 Fiddle 调整以进行我参考的更改：https://jsfiddle.net/4kymf0vh/4/

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

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

Tinymce 在文本框和文本区域上不能正常工作

Tiny-MCE doesn't work properly on Text Box and Text Area

html

javascript

css

jquery

tinymce

HTML:

CSS:

JAVASCRIPT: