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

EVH671

我有一个“文本框”和“文本区域”,当您将焦点放在元素上时,我会尝试实现,此时会出现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

迈克尔·弗罗明(Michael Fromin)

您做错了三件事:

1. TinyMCE内联编辑适用于块元素而不是输入字段。

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

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

您的示例尝试将a<textarea>与内联编辑一起使用如果您改用a <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/

旁注:检出autoresize插件

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Rails:Tiny-MCE编辑器

来自分类Dev

django ImportError:没有名为tiny-mce的模块

来自分类Dev

React Form组件不会随Tiny MCE更新

来自分类Dev

django ImportError:没有名为tiny-mce的模块

来自分类Dev

如何使用Tiny MCE编辑器嵌入Instagram帖子

来自分类Dev

如何使用C Sharp设置tiny_mce内容

来自分类Dev

无法`gem install tiny_tds` OS X Mavericks

来自分类Dev

在OSX 10.10 Yosemite上安装tiny_tds时出错

来自分类Dev

在Ubuntu 20.04上安装tiny_tds gem失败

来自分类Dev

如何同时使用Parallel :: ForkManager和Capture :: Tiny?

来自分类Dev

在perl中尝试:: Tiny和$ SIG {__ DIE__}吗?

来自分类Dev

如何获取Capture :: Tiny失败时打印stderr和stdout?

来自分类Dev

Tiny Core:启动脚本和持久性

来自分类Dev

CSS类在文本区域中无法正常工作

来自分类Dev

React Tiny.MCE-如何在React上创建自定义插件

来自分类Dev

IE 11中的文本区域选择在最后一行上无法正常工作

来自分类Dev

Codeigniter:在动态文本框/文本区域上生成ID

来自分类Dev

动态添加文本框和文本区域

来自分类Dev

使文本框和文本区域更长

来自分类Dev

在TINY MCE编辑器中输入速度非常慢

来自分类Dev

Perl安装失败,无法进行HTTP :: Tiny对5.18.2和5.20.1版本的测试

来自分类Dev

角日期管道在文本框中无法正常工作

来自分类Dev

试图让文本框输入和输出正常工作

来自分类Dev

试图让文本框输入和输出正常工作

来自分类Dev

如何在tiny210设备上使用Qt应用程序?

来自分类Dev

QEMU是否使用Tiny Code Generator,甚至主机和目标(来宾)都是相同的体系结构?

来自分类Dev

在当今的移动和桌面浏览器中,“ SVG Tiny 1.2”的性能优势是什么?

来自分类Dev

使用Try :: Tiny或Eval?

来自分类Dev

AngularJS-我的折叠和展开在过滤到文本框后无法正常工作

Related 相关文章

  1. 1

    Rails:Tiny-MCE编辑器

  2. 2

    django ImportError:没有名为tiny-mce的模块

  3. 3

    React Form组件不会随Tiny MCE更新

  4. 4

    django ImportError:没有名为tiny-mce的模块

  5. 5

    如何使用Tiny MCE编辑器嵌入Instagram帖子

  6. 6

    如何使用C Sharp设置tiny_mce内容

  7. 7

    无法`gem install tiny_tds` OS X Mavericks

  8. 8

    在OSX 10.10 Yosemite上安装tiny_tds时出错

  9. 9

    在Ubuntu 20.04上安装tiny_tds gem失败

  10. 10

    如何同时使用Parallel :: ForkManager和Capture :: Tiny?

  11. 11

    在perl中尝试:: Tiny和$ SIG {__ DIE__}吗?

  12. 12

    如何获取Capture :: Tiny失败时打印stderr和stdout?

  13. 13

    Tiny Core:启动脚本和持久性

  14. 14

    CSS类在文本区域中无法正常工作

  15. 15

    React Tiny.MCE-如何在React上创建自定义插件

  16. 16

    IE 11中的文本区域选择在最后一行上无法正常工作

  17. 17

    Codeigniter:在动态文本框/文本区域上生成ID

  18. 18

    动态添加文本框和文本区域

  19. 19

    使文本框和文本区域更长

  20. 20

    在TINY MCE编辑器中输入速度非常慢

  21. 21

    Perl安装失败,无法进行HTTP :: Tiny对5.18.2和5.20.1版本的测试

  22. 22

    角日期管道在文本框中无法正常工作

  23. 23

    试图让文本框输入和输出正常工作

  24. 24

    试图让文本框输入和输出正常工作

  25. 25

    如何在tiny210设备上使用Qt应用程序?

  26. 26

    QEMU是否使用Tiny Code Generator,甚至主机和目标(来宾)都是相同的体系结构?

  27. 27

    在当今的移动和桌面浏览器中,“ SVG Tiny 1.2”的性能优势是什么?

  28. 28

    使用Try :: Tiny或Eval?

  29. 29

    AngularJS-我的折叠和展开在过滤到文本框后无法正常工作

热门标签

归档