我有一个“文本框”和“文本区域”,当您将焦点放在元素上时,我会尝试实现,此时会出现Tiny MCE条。
问题是它无法正常工作,在我自己的项目中,它甚至会自行更改“文本框”和“文本区域”的宽度和高度。
我在jsFiddle中做了一个简短的例子。它造成一团糟。如果您将重点放在“文本框”上,那么Tiny MCE不会停留在原处,并且如果您按下某个功能(例如“ BOLD”),它也不会起作用。(在JSFiddle中,您看不到它像我的
项目中那样更改了文本框/文本区域的大小)。
<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>
.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;*/
}
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
您做错了三件事:
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] 删除。
我来说两句