我正在使用jQuery和TinyMCE。我想让TinyMCE编辑器在聚焦时改变边框的颜色,然后在模糊时再改变。
在ui.css中,我添加了changed这些。
.defaultSkin table.mceLayout {border:0; border-left:1px solid #93a6e1; border-right:1px solid #93a6e1;}
.defaultSkin table.mceLayout tr.mceFirst td {border-top:1px solid #93a6e1;}
.defaultSkin table.mceLayout tr.mceLast td {border-bottom:1px solid #93a6e1;}
我设法在init脚本中加入了这个:
$().ready(function() {
function tinymce_focus(){
$('.defaultSkin table.mceLayout').css({'border-color' : '#6478D7'});
$('.defaultSkin table.mceLayout tr.mceFirst td').css({'border-top-color' : '#6478D7'});
$('.defaultSkin table.mceLayout tr.mceLast td').css({'border-bottom-color' : '#6478D7'});
}
function tinymce_blur(){
$('.defaultSkin table.mceLayout').css({'border-color' : '#93a6e1'});
$('.defaultSkin table.mceLayout tr.mceFirst td').css({'border-top-color' : '#93a6e1'});
$('.defaultSkin table.mceLayout tr.mceLast td').css({'border-bottom-color' : '#93a6e1'});
}
$('textarea.tinymce').tinymce({
script_url : 'JS/tinymce/tiny_mce.js',
theme : "advanced",
mode : "exact",
theme : "advanced",
invalid_elements : "b,i,iframe,font,input,textarea,select,button,form,fieldset,legend,script,noscript,object,embed,table,img,a,h1,h2,h3,h4,h5,h6",
//theme options
theme_advanced_buttons1 : "cut,copy,paste,pastetext,pasteword,selectall,|,undo,redo,|,cleanup,removeformat,|",
theme_advanced_buttons2 : "bold,italic,underline,|,bullist,numlist,|,forecolor,backcolor,|",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "none",
theme_advanced_resizing : false,
//plugins
plugins : "inlinepopups,paste",
dialog_type : "modal",
paste_auto_cleanup_on_paste : true,
setup : function(ed) {
ed.onClick.add(function(ed, evt) {
tinymce_focus();
});
}
});
});
...但是这个(onclick, change, border color)是我唯一能成功的东西. 我所有的其他尝试要么阻止TinyMCE加载,要么什么都不做。 我浏览了TinyMCE的wiki页面和他们的论坛,但一直无法从散落在各地的小块信息中拼凑出一个完整的画面。
其实有什么方法可以做到这一点吗?是我忽略了一些简单的东西,还是其实实现起来非常复杂?
我重新审视了这个问题,最后用了一个支持更多浏览器的jQuery解决方案,因为在ed.getDoc()上使用addEventListener()函数是命中注定的,而在ed.getDoc()上使用AddEvent()函数完全不行("function not supported on object "错误)。
下面确认在IE8、Safari 5.1.7、Chrome 19、firefox 3.6 &12.在Opera 11.64中似乎不起作用。
setup: function(ed){
ed.onInit.add(function(ed){
$(ed.getDoc()).contents().find('body').focus(function(){tinymce_focus();});
$(ed.getDoc()).contents().find('body').blur(function(){tinymce_blur();});
});
}
你可以在你自己的插件中做一些事情,如
ed.onInit.add(function(ed){
ed.getDoc().addEventListener("click", function(){
tinymce_focus();
}
);
ed.getDoc().addEventListener("blur", function(){
tinymce_blur();
}, false);
});
setup:function(ed){
ed.onClick.add(function(ed){
tinymce_blur();
});
ed.onInit.add(function(ed){
ed.getDoc().addEventListener("blur", function(){
tinymce_blur();
}, false);
});
}
对于焦点,你可以使用TinyMCE的事件 "onClick"。对于模糊,回复的预览是可以的。
我以为我在不久前回应过这个问题,但我想不是。我最后在tinymce配置中用了这个。
setup: function(ed){
ed.onInit.add(function(ed){
//check for addEventListener -- primarily supported by firefox only
var edDoc = ed.getDoc();
if ("addEventListener" in edDoc){
edDoc.addEventListener("focus", function(){
tinymce_focus();
}, false);
edDoc.addEventListener("blur", function(){
tinymce_blur();
}, false);
}
});
}
.tox:not([dir=rtl]) {
border-color: #a4286a;
}