Делал редактор своими руками и столкнулся с тем, что одна функция не очень адекватно работает в IE. Я максимально сократил код, чтобы его можно было протестить в
местной песочнице. HTML часть:
<html><head><style>
#but {
display: block; float:left;
margin: 2px; padding: 0px;
width:20px; heigh:20px;
border: 2px #ccc solid;
}
#colEdit {
display: none; position: absolute;
top: 0%; float: right;
left: 300px; width: 100px;
border: solid 1px black;
background: #fff;
}
#colEdit > div {
float: left; margin: 2px;
width: 15px; height: 15px;
border: solid 2px #ccc;
}
</style></head><body>
<div id="but" class="but" onClick='javascript: coPan("colEdit", 1);' />Col</div>
<div id="colEdit" class="colEdit" >
<div style='background: #800000;' onclick='setSoC("c","#800000"); coPan("colEdit", 0);' ></div>
<div style='background: #ff0000;' onclick='setSoC("c","#ff0000"); coPan("colEdit", 0);' ></div>
<div style='background: #ffa500;' onclick='setSoC("c","#ffa500"); coPan("colEdit", 0);' ></div>
<div style='background: #ffff00;' onclick='setSoC("c","#ffff00"); coPan("colEdit", 0);' ></div>
<div style='background: #00ff00;' onclick='setSoC("c","#00ff00"); coPan("colEdit", 0);' ></div>
<div style='background: #00ffff;' onclick='setSoC("c","#00ffff"); coPan("colEdit", 0);' ></div>
<div style='background: #0000ff;' onclick='setSoC("c","#0000ff"); coPan("colEdit", 0);' ></div>
<div style='background: #000080;' onclick='setSoC("c","#000080"); coPan("colEdit", 0);' ></div>
<div style='background: #800080;' onclick='setSoC("c","#800080"); coPan("colEdit", 0);' ></div>
<div style='background: #000000;' onclick='setSoC("c","#000000"); coPan("colEdit", 0);' ></div>
<div style='background: #696969;' onclick='setSoC("c","#696969"); coPan("colEdit", 0);' ></div></div>
<iframe width='300 px' height='300 px' scrolling='auto' frameborder='no' src='#' id='frameId' name='frameId' style="border: 2px #000 solid;" ></iframe>
Скриптовая часть:
<script>
//Тут идет код, отвечающий за работу iframe, стандартный, без особенностей
var isGecko = navigator.userAgent.toLowerCase().indexOf("gecko") != -1;
var iframe = (isGecko) ? document.getElementById("frameId") : frames["frameId"];
var iWin = (isGecko) ? iframe.contentWindow : iframe.window;
var iDoc = (isGecko) ? iframe.contentDocument : iframe.document;
iHTML = "<html><head></head><body style='background-color: #fff;'></body></html>";
iDoc.open(); iDoc.write(iHTML);
iDoc.close(); iDoc.designMode = "on";
//Далее идут придуманные мною функции:
function coPan(n_panel,todo){ //Функция отвечает за закрытие\открытие разных div
var n_pan = document.getElementById(n_panel).style;
if(todo == 1){
if(n_pan.display == 'block'){ n_pan.display = 'none'; }
else { n_pan.display = 'block'; }
} else { n_pan.display = 'none'; }
}
function setSoC(soc, socval) { //Функция отвечает за изменение цвета (и размера) шрифта
iWin.focus();
switch(soc){
case("s"): socreq = "fontsize"; break;
case("c"): socreq = "forecolor"; break; //Не обращайте внимания - это для функции изменения размера шрифта :)
default: alert ("Ошибка!");}
iWin.document.execCommand(socreq, null, socval);
}
</script></body></html>
Div
but - это кнопка вызова панели выбора цвета.
Div
colEdit - это панель выбора цвета, содержит в себе div-кнопки, при нажатии которых должен меняться выделенный текст.
В скрипте есть комментарии.
Проблема заключается в том, что при выделении в IE текста и последующей попытке сменить его цвет нифига не происходит. Но, кстати, если в IE просто выбрать цвет, то после курсора нормально печатается выбранным цветом. Проблема только со сменой цвета выделенного текста.
Помогите мне пожалуйста! Заранее спасибо
