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

Question

OK.. Currently i am working to make an custom editor using tinymce. 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 Safari ... 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.

PLEASE CHECK THIS FIDDLE

[UPDATED]

Here is my code:

CSS

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

JavaScript

<script type="text/javascript">

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


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

    });

function customfunction()
{

    document.getElementById("testButton").click();
}

</script>

HTML

<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 Safari 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 Bold,Italic,Underline.

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

Answer 1

check i done small changes this http://fiddle.tinymce.com/ngdaab/535

 $("#testButton2").children("button").click();