EVH671 EVH671 - 1 year ago 92
jQuery Question

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

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.

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



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

<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"
placeholder="Insert a short description to indicate what
this item is about"


.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 {
width: 460px;
height: 60px !important;
/*margin-bottom: -4px;*/


selector: '.text-box-area',
inline: true,
setup: function (editor) {
editor.on('focus', function (e) {

editor.on('blur', function (e) {


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

Answer Source

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

1. TinyMCE inline editing works on block elements not input fields.

As documented here: https://www.tinymce.com/docs/get-started/use-tinymce-inline/#enablinginlineeditingmode

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

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

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

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. Your .text-area-styling is interfering with TinyMCE's Inline Editing

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.

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

Side Note: Checkout the autoresize plugin

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.