我将 jQuery 与 TinyMCE 一起使用。我试图在 TinyMCE 编辑器处于焦点时更改边框颜色,然后在模糊时更改回来。
在 ui.css 中,我添加/更改了这些:
.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;}
我设法为初始化脚本做到了这一点:
$().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();
});
}
});
});
...但是这(点击,更改,边框颜色)是我唯一设法开始工作的事情。我所有的其他尝试要么阻止 TinyMCE 加载,要么什么也没做。我浏览了 TinyMCE wiki 页面和他们的论坛,但无法从散落在各处的小块信息拼凑出完整的画面。
实际上有办法做到这一点吗?我只是忽略了一些简单的事情,还是实际上实现起来真的很复杂?