In TinyMCE, I may insert an image and center it. And the code generated is as follows:
<p><img height="684" src="/static/media/uploads/about.jpg" style="margin-left: auto; margin-right: auto; display: block;" width="938" /></p>
However, when I save the textarea, the display: block;
style is removed.
I also tried the followings, but all in vain:
Set
<p>
:<p style="text-align: center;"><img ... ></p>
The style of
<p>
is removed when I save the content of the textarea.In
tinymce.init
, set:verify_html: false
Set
valid_children: "+body[style]"
intiymce.init
and add the following in textarea:<style> p img { display: block; } </style>
Set the following in tinymce.init:
valid_styles: { "img": "display" }
So, how do I center an image in TinyMCE anyway?
I came up with a work-around solution:
Modify
tinymce.init
:(a) Add Formats: add the class
center
and necessarystyles
to every centered block element includingimg
.(b) Add JavaScript to display centered elements correctly in the editing window: replace previously added
margin: 0px auto;
withmargin: 0px auto; display:block; text-align: center;
:And then add the following in our own CSS file to display centered element correctly in the HTML page:
The above solution took me hours to figure it out, all because TinyMCE wouldn't want to save the style
display: block;
created by its own!