Shail Paras Shail Paras - 1 year ago 147
jQuery Question

tinymce-4 with custom buttons working fine in Chrome & Firefox But not working in Safari - Why?

OK.. Currently i am working to make an

custom editor
. I have used few button control method to execute the these control from outsite the
tinymce toolbar
. and possibly i did that and it is working fine in Chrome and Firefox.

But when i turned my head towards
... i found myself exhausted because what i have done.. is a 2 days work and i cannot believe that it is not working in Safari.

I am using latest version of TinyMce with inline editor.



Here is my code:


.buttons { float:left;margin:10px;border:1px solid black;padding:4px 7px; }


<script type="text/javascript">

tinymce.PluginManager.add('example', function(e) {
function customfunction() {
alert('Hello TinyMce');

e.addButton('testButton', {
id: "testButton",
text: 'Example',
icon: false,
onclick: function() {
selector: "#textareasDiv",
inline: true,
plugins: "example",
toolbar: "testButton",
menubar: false,
fixed_toolbar_container: "#toolbarCon",
inline_styles : true,


function customfunction()




<div id="textareasDiv" style="width:200px;height:100px;border:1px solid black">Please select the text and click any of these buttons.</div>
<div id="toolbarCon" style="display:none;"></div>

<a href="#" onclick="tinyMCE.execCommand('Bold');return false;"><div class="bold buttons">B</div></a>
<a href="#" onclick="tinyMCE.execCommand('Italic');return false;"><div class="italic buttons"><em>I</em></div></a>
<a href="#" onclick="tinyMCE.execCommand('Underline');return false;"><div class="underline buttons">U</div></a>
<a href="#" onclick="tinyMCE.execCommand('FontName',false,'Andale Mono');return false;"><div class="jLeft buttons" >Andale Mono</div></a>
<a href="#" onclick="tinyMCE.execCommand('FontName',false,'Courier New');return false;"><div class="jCenter buttons" >Courier New</div></a>
<a href="#" onclick="tinyMCE.execCommand('FontName',false,'Tahoma');return false;"><div class="jRight buttons" >Tahoma</div></a>
<a href="#" onclick="tinyMCE.execCommand('FontName',false,'Impact');return false;"><div class="jRight buttons" >Impact</div></a>
<a href="#" onclick="customfunction();return false;"><div class="jRight buttons" >Custom Button</div></a>

There are some issues coming when i run this fiddle on
as well as my own file.

  1. When i selected some text in textarea and clicked on Any Buttons, it appears style on whole line along with my selected text. Style should be appeared only my selected Text?

  2. It should be able to toggle style like i clicked on Bold button it appears style but when i again clicked on the same Bold button it should be normal. Nothing happening?

  3. I also added a custom plugin for some other task and when clicked on the custom buttom nothing happens. and in other browser it gives me alert message.

One thing i have also checked
tinymce demo page
HERE but once i checked this demo in Safari same condition there, no toggle happens after clicking on

But its all working in
Chrome and FireFox
. SO whats wrong with
. Is that not supported by
? OR Some other thing is happening?

Answer Source

check i done small changes this