テキストボックスとテキストエリアがあり、要素に をフォーカスするたびに実装しようとしましたが、小さなMCEバーが表示されます。Tiny-MCEがテキストボックスとテキストエリアで正しく機能しない
問題は、正しく機能しないということです。自分のプロジェクトでは、テキストボックスとテキストエリアの幅と高さを独自に変更することさえあります。
私はjsFiddleで簡単な例を作りました。それは混乱を作ります。小さな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