编程语言
首页 > 编程语言> > javascript – tinymce-4,自定义按钮在Chrome和Firefox中正常工作但在Safari中无效 – 为什么?

javascript – tinymce-4,自定义按钮在Chrome和Firefox中正常工作但在Safari中无效 – 为什么?

作者:互联网

好的..目前我正在使用tinymce制作自定义编辑器.我使用了几个按钮控制方法从现场的tinymce工具栏执行这些控件.可能我做到了这一点,它在Chrome和Firefox中运行良好.

但当我转向Safari时……我发现自己筋疲力尽,因为我所做的……是2天的工作,我无法相信它在Safari中不起作用.

我正在使用最新版本的TinyMce和内联编辑器.

PLEASE CHECK THIS FIDDLE

[更新]

这是我的代码:

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>

当我在Safari上运行这个小提琴以及我自己的文件时,会出现一些问题.

>当我在textarea中选择一些文本并单击任何按钮时,它会在整行显示样式以及我选择的文本.样式应该只出现我选择的文字?
>它应该能够切换样式,就像我点击粗体按钮它出现的样式,但当我再次点击相同的粗体按钮时,它应该是正常的.什么都没发生?
>我还为其他任务添加了一个自定义插件,当点击自定义按钮时没有任何反应.在其他浏览器中它给我提醒信息.

有一件事我也检查了tinymce演示页面HERE,但是一旦我在Safari中检查了这个演示相同的条件,点击Bold,Italic,Underline后没有切换.

但它全都在Chrome和FireFox中工作.那么Safari有什么问题. TinyMce不支持吗?或者其他一些事情正在发生?

解决方法:

检查我做了这个http://fiddle.tinymce.com/ngdaab/535的小改动

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

标签:jquery,javascript,safari,html,tinymce-4
来源: https://codeday.me/bug/20190703/1364472.html