Tiny-MCE在文本框和文本区域上无法正常工作 [英] Tiny-MCE doesn't work properly on Text Box and Text Area

问题描述

我有一个文本框和文本区域，我试图实现，当你集中
的元素，Tiny MCE栏显示。

I have a Text Box and Text Area and I've tried to implement whenever you focus on the element, the Tiny MCE bar shows up.

事情是它不能正常工作，在我自己的项目中，它甚至自己改变文本框和文本区域的宽度和高度。

The thing is that it doesn't work properly and in my own project its even changes the Text Box and Text Area width and height on its own.

在jsFiddle做了一个简单的例子。它创造了一个混乱。 Tiny MCE不会停留在它的位置，如果你专注于文本框，并且如果你按一个功能（让我们说BOLD）它不会影响任何东西。
（在JSFiddle中，你看不到它在我的

项目中改变了文本框/文本区域大小。）

I've made a short example in jsFiddle. It creates a mess. The Tiny MCE doesn't stay on its place if you focus on the Text Box and also if you press on a function (let's say "BOLD") it doesn't effect anything. (In JSFiddle you don't see that it changes the Text Box/Text Area size as in my
project).

<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：

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 ：

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

How it can be fixed ? Can you please show me ? Thanks in Advance, EVH671

推荐答案

有三个基本的事情，你做错了...

There are three basic things you are doing incorrectly...

1。

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

... inline仅适用于块元素（例如div，h1）内的内容。

"...inline only works with content that is within a block element (e.g. div, h1)."

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

Your example is trying to use a <textarea> with inline editing. If you use a <div> instead it will work as intended.

2。 < textarea> 是一个Bootstrapform-control

2. Your <textarea> is a Bootstrap "form-control"

'form-control'到一个表单元素Bootstrap将添加一个CSS的元素。对于TinyMCE按预期工作，我不会使< div> 您将用于TinyMCE'形式控制'。

When you add the class 'form-control' to a form element Bootstrap will add a slew of CSS to that element. For TinyMCE to work as expected I would not make the <div> that you will use for TinyMCE a 'form-control'.

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

3. Your .text-area-styling is interfering with TinyMCE's Inline Editing

因为它导致问题TinyMCE想要在内联模式下工作 - 特别是如果你选择使用 autoresize 插件。我在< div> 中添加了一个边框，以清楚说明您可以点击以启动在线编辑。在一个真正的应用程序，你可以添加到悬停，所以边框不是所有的时间。

I commented out your CSS for this as it is causing issues with how TinyMCE wants to work in inline mode - especially if you choose to use the autoresize plugin. I did add a border to the <div> to make it clear where you can click to initiate inline editing. In a real app you could add that on hover so the border is not there all the time.

查看此更新的小说中调整为进行更改的引用： https://jsfiddle.net/4kymf0vh/4/

Check out this updated Fiddle of your example adjusted to make the changes I reference: https://jsfiddle.net/4kymf0vh/4/

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

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

Many people who use inline editing use the autoresize plugin (https://www.tinymce.com/docs/plugins/autoresize/) to help control the dimensions of the editor and whether or not it can grow as the content in the editor grows.

这篇关于Tiny-MCE在文本框和文本区域上无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！