Jump to content
  • 0

Замена выделенного текста в Gecko/Presto (в ифрейме)


Бухалыч
 Share

Question

Здравствуйте!

Делаю WYSiWYG, с IE справился, с Mozilla/Opera - мучаюсь.

Собсна, не могу придумать, как заменить выделенныйтекст в ифрейме.

Мож кто что подскажет?

<html>
<head><title>WikiArticleEditor</title>
<style type="text/css">

body {
font-family:"Times New Roman", Times, serif;
font-size:12px;
background-color:#EEFFCC
}

input.b {
font-family:"Times New Roman", Times, serif;
font-size:14px;
width: 25px;
height: 25px}

input.but {
font-family:"Times New Roman", Times, serif;
font-size:14px;
}
button.w {
width: 25px;
height: 25px;
background-color:#66FFFF;
border-bottom-color:#000099;
border-right-color:#3333CC;
border-left-color:#9999FF;
border-top-color:#CCCCFF;
border-style:double;
font-family:"Courier New", Courier
}

button.n {
width: 25px;
height: 25px}

button.wsmall {
width: 25px;
height: 25px;
background-color:#66FFFF;
border-bottom-color:#000099;
border-right-color:#3333CC;
border-left-color:#9999FF;
border-top-color:#CCCCFF;
border-style:double;
font-family:"Courier New", Courier;
font-size:9px
}

button.wbig {
width: 25px;
height: 25px;
background-color:#66FFFF;
border-bottom-color:#000099;
border-right-color:#3333CC;
border-left-color:#9999FF;
border-top-color:#CCCCFF;
border-style:double;
font-family:"Courier New", Courier;
font-size:22px
}

</style>

<script language="javascript" type="text/javascript">

function enabdm(){
look.document.designMode = "on";
look.document.open();
look.document.write('<html><body bgcolor="#FFFFFF">Designer window</body></html>');
look.document.close();
}

function preview(){
var xxx = document.getElementById('look');
var doc = xxx.contentWindow.document;
doc.body.innerHTML = document.editor.texts.value;
}

function ipreview(){
var xxx = document.getElementById('look');
var doc = xxx.contentWindow.document;
document.editor.texts.value = doc.body.innerHTML;
}


function Insert(Text1, Text2){
document.le.insleftag.value = Text1;
document.le.insrigtag.value = Text2;
var tsv = document.le.txtsel.value;
if(tsv == 1) Ins2ifr();
else if(tsv == 2) Ins2txta();
}

function wilka(){
var tsv = document.le.txtsel.value;
if(tsv == 2) getlen();
else if(tsv == 1) getlen2();
}

function getlen()
{
var len1 = document.editor.texts.value.length;
document.le.len1.value= len1;
setTimeout("getlen1()", 5);
}

function getlen1()
{
var len2 = document.le.len1.value;
var len3 = document.editor.texts.value.length;
var xxx = document.getElementById('look');
var doc = xxx.contentWindow.document;
if(len2 != len3)
doc.body.innerHTML = document.editor.texts.value;
wilka();
}

function getlen2()
{
var xxx = document.getElementById('look');
var doc = xxx.contentWindow.document;
var len4 = doc.body.innerHTML.length;
document.le.len2.value= len4;
setTimeout("getlen3()", 5);
}

function getlen3()
{
var xxx = document.getElementById('look');
var doc = xxx.contentWindow.document;
var len5 = document.le.len2.value;
var len6 = doc.body.innerHTML.length;
if(len5 != len6)
{
document.editor.texts.value = doc.body.innerHTML
};
wilka();
}

function Ins2txta(){
var ltag = document.le.insleftag.value;
var rtag = document.le.insrigtag.value;
var element = document.getElementById("texts");
element.focus();
if (document.selection)
{
SelectedText = element.document.selection.createRange();
SelectedText.text = ltag + SelectedText.text + rtag;
preview();
element.focus();
SelectedText1 = element.document.selection.createRange();
SelectedText1.select();
}
else if (typeof(element.selectionStart)=="number")
{
var start = element.selectionStart;
var end = element.selectionEnd;
var leng = end - start;
element.value = element.value.substr(0,start)+ltag+element.value.substr(start,leng)+rtag+element.value.substr(end);
}
}

function Ins2ifr(){
var txt1 = document.le.insleftag.value;
var txt2 = document.le.insrigtag.value;
var lekr = "йа%левая%креведко";
var rikr = "йа%правая%креведко";
var xxx = document.getElementById('look');
var doc = xxx.contentWindow.document;
element = doc.body;
element.focus();
if (document.selection) {
SelectedText = element.document.selection.createRange();
SelectedText.text = lekr + SelectedText.text + rikr;
}
else if (look.window.getSelection)
{
}

doc.body.innerHTML = doc.body.innerHTML.replace(rikr, txt2);
doc.body.innerHTML = doc.body.innerHTML.replace(lekr, txt1);
ipreview();
}

function finalview(){
MyWin= open("");
MyWin.document.open();
MyWin.document.write("<html><head><title>Плоды Трудов</title></head><body>");
MyWin.document.write(document.editor.texts.value);
MyWin.document.write("</body></html>");
MyWin.document.close();
}

function inswref(){
var wref = window.prompt("Введите адрес ссылки", "http://");
if(wref != null){
var lwref = "[" + wref + ' ';
Insert(lwref, "]");}
}

function delbord(){
var xxx = document.getElementById('look');
var doc = xxx.contentWindow.document;
var yb = "TABLE border=1";
var nb = "TABLE border=0";
while(doc.body.innerHTML.indexOf(yb)>0){
doc.body.innerHTML = doc.body.innerHTML.replace(yb, nb);}
var ybD = 'table border="1"';
var nbD = 'table border="0"';
while(doc.body.innerHTML.indexOf(ybD)>0){
doc.body.innerHTML = doc.body.innerHTML.replace(ybD, nbD);}
ipreview();
}

function setbord(){
var xxx = document.getElementById('look');
var doc = xxx.contentWindow.document;
var yb = "TABLE border=1";
var nb = "TABLE border=0";
while(doc.body.innerHTML.indexOf(nb)>0){
doc.body.innerHTML = doc.body.innerHTML.replace(nb, yb);}
var ybD = 'table border="1"';
var nbD = 'table border="0"';
while(doc.body.innerHTML.indexOf(nbD)>0){
doc.body.innerHTML = doc.body.innerHTML.replace(nbD, ybD);}
ipreview();
}

function setfont(){
var fface = document.fonts.ffaces.value;
var fsize = document.fonts.fsizes.value;
var fres = "<font" + fface + fsize + ">";
Insert(fres, "</font>");
}

function setpos(){
var pl = document.posit.pleft.value;
var pt = document.posit.ptop.value;
var pres = '<span style="position:relative; left:' + pl + 'px; top:' + pt + 'px">';
Insert(pres, "</span>");
}


</script>

</head>
<body onLoad="enabdm(); getlen(); getlen2(); chifr()">



<table>
<tr>
<td><table height="100%">
<tr>
<td><form name="editor">
<textarea name=texts id="texts" rows=13 cols=70 onFocus="document.le.txtsel.value = '2'">Coder window</textarea>
</form></td>
</tr>
<tr height="100%">
<td width="100%"><iframe name="look" id="look" frameborder="0" marginwidth="0" width="100%" height="300px" onfocus="document.le.txtsel.value = '1'"></iframe></td>
</tr>
</table>

</td>




<td>
<table title="Вики-форматирование" align="center">
<tr>
<td>

<button class="w" onClick="Insert(Wb.value, Wb.value)" title="wiki: жирный"><b>B</b></button>
<input type="hidden" name="Wb" value="'''"></td>

<td><button class="w" onClick="Insert(Wi.value, Wi.value)" title="wiki: курсив"><i>I</i></button>
<input type="hidden" name="Wi" value="''"></td>

<td><button class="w" onClick="Insert('[[', ']]')" title="wiki: Внутренняя ссылка"><u>Ab</u></button></td>

<td><button class="wsmall" onClick="inswref()" title="wiki: Внешняя ссылка">url</button></td>

<td><button class="wbig" onClick="Insert('== ', ' ==')" title="wiki: Заголовок 2-ого уровня. ВНИМАНИЕ! Заголовок должен находиться на отдельной строке">A</button></td>

<td><button title="wiki: Идет лесом :)" class="wbig" onClick="Insert('<nowiki>', '</nowiki>')"><strike>W</strike></button></td>

<td><button class="wbig" onClick="Insert('', '--~~~~')" title="wiki: Ваша подпись и момент времени">©</button></td>

<td><button class="wbig" onClick="Insert('', '—-')" title="wiki: Горизонтальная линия"><b>-</b></button></td>

</tr>
</table>


<table title="Человеческое форматирование" align="center">
<tr>

<td><button class="n" title="жирный" onclick='Insert("<b>", "</b>")'><b>Ж</b></button></td>
<td><button class="n" title="курсив" onclick='Insert("<i>", "</i>")'><i>К</i></button></td>
<td><button class="n" title="подчеркнутый" onclick='Insert("<u>", "</u>")'><u>Ч</u></button></td>
<td><button class="n" title="верхний индекс" onclick='Insert("<sup>", "</sup>")'>В<sup>И</sup></button></td>
<td><button class="n" title="нижний индекс" onclick='Insert("<sub>", "</sub>")'>Н<sub>И</sub></button></td>
</tr>
</table>


<table title="Шрифты" align="center">
<tr>
<td colspan="5">
<form name="fonts">
<input type="button" class="but" value="Шрифт" onClick="setfont()" title="Применить к выделенному тексту">
<select name="ffaces">
<option value="">шрифт</option>
<option value=' face="Arial"'>Arial</option>
<option value=' face="Times New Roman"'>Times New Roman</option>
<option value=' face="Courier New"'>Courier New</option>
<option value=' face="Georgia"'>Georgia</option>
<option value=' face="Verdana"'>Verdana</option>
<option value=' face="Geneva"'>Geneva</option>
</select>
<select name="fsizes">
<option value="">размер</option>
<option value=' size="1"'>1</option>
<option value=' size="2"'>2</option>
<option value=' size="3"'>3</option>
<option value=' size="4"'>4</option>
<option value=' size="5"'>5</option>
<option value=' size="6"'>6</option>
<option value=' size="7"'>7</option>
</select>
</form>



</td>
</tr>
</table>

<table title="Относительное позиционирование" align="center">
<tr>
<td>
<form name="posit">
<input type="button" class="but" onClick="setpos()" value="Относительное позиционирование">

вправо на<input type="text" style="width:30px" name="pleft">px, вниз на
<input type="text" style="width:30px" name="ptop">px
</form>
</td>
</tr>
</table>

<table align="center" title="Таблицы и Дроби">
<tr>
<td>
<input type='button' class="but" onclick='Insert("<TABLE border=1><tr><td>", "</td></tr></table>")' value='Таблица'>
</td>
<td>
<input type='button' class="but" onclick='Insert("</td><td>", "")' value='+Ячейка'>
</td>
<td>
<input type='button' class="but" onclick='Insert("</td></tr><tr><td>", "")' value='+Строка'>
</td>
<td>
<input type="button" class="but" onclick='Insert("", drob.value)' value="Дробь">
<input type="hidden" value='<table align="center" border="0"><tr><td align="center">Числитель</td></tr><tr><td width="1px" bgcolor="#000000"></td></tr><tr><td align="center">Знаменатель</td></tr></table>' name="drob">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" class="but" onClick="delbord()" value="Удалить рамку">
</td>
<td colspan="2" align="center">
<input type="button" class="but" onClick="setbord()" value="Показать рамку"> </td>
</tr>
</table>



<table title="Греческие букомки" align="center">
<tr>
<td><input type='button' class="b" onclick='Insert("", "Α")' value='Α'></td>
<td><input type='button' class="b" onclick='Insert("", "Β")' value='Β'></td>
<td><input type='button' class="b" onclick='Insert("", "Γ")' value='Γ'></td>
<td><input type='button' class="b" onclick='Insert("", "Δ")' value='Δ'></td>
<td><input type='button' class="b" onclick='Insert("", "Ε")' value='Ε'></td>
<td><input type='button' class="b" onclick='Insert("", "Ζ")' value='Ζ'></td>
<td><input type='button' class="b" onclick='Insert("", "Η")' value='Η'></td>
<td><input type='button' class="b" onclick='Insert("", "Θ")' value='Θ'></td>
<td><input type='button' class="b" onclick='Insert("", "Ι")' value='Ι'></td>
<td><input type='button' class="b" onclick='Insert("", "Κ")' value='Κ'></td>
<td><input type='button' class="b" onclick='Insert("", "Λ")' value='Λ'></td>
<td><input type='button' class="b" onclick='Insert("", "Μ")' value='Μ'></td>

</tr>
<tr>
<td><input type='button' class="b" onclick='Insert("", "α")' value='α'></td>
<td><input type='button' class="b" onclick='Insert("", "β")' value='β'></td>
<td><input type='button' class="b" onclick='Insert("", "γ")' value='γ'></td>
<td><input type='button' class="b" onclick='Insert("", "δ")' value='δ'></td>
<td><input type='button' class="b" onclick='Insert("", "ε")' value='ε'></td>
<td><input type='button' class="b" onclick='Insert("", "ζ")' value='ζ'></td>
<td><input type='button' class="b" onclick='Insert("", "η")' value='η'></td>
<td><input type='button' class="b" onclick='Insert("", "θ")' value='θ'></td>
<td><input type='button' class="b" onclick='Insert("", "ι")' value='ι'></td>
<td><input type='button' class="b" onclick='Insert("", "κ")' value='κ'></td>
<td><input type='button' class="b" onclick='Insert("", "λ")' value='λ'></td>
<td><input type='button' class="b" onclick='Insert("", "μ")' value='μ'></td>
</tr>
<tr>
<td><input type='button' class="b" onclick='Insert("", "Ν")' value='Ν'></td>
<td><input type='button' class="b" onclick='Insert("", "Ξ")' value='Ξ'></td>
<td><input type='button' class="b" onclick='Insert("", "Ο")' value='Ο'></td>
<td><input type='button' class="b" onclick='Insert("", "Π")' value='Π'></td>
<td><input type='button' class="b" onclick='Insert("", "Ρ")' value='Ρ'></td>
<td><input type='button' class="b" onclick='Insert("", "Σ")' value='Σ'></td>
<td><input type='button' class="b" onclick='Insert("", "Τ")' value='Τ'></td>
<td><input type='button' class="b" onclick='Insert("", "Υ")' value='Υ'></td>
<td><input type='button' class="b" onclick='Insert("", "Φ")' value='Φ'></td>
<td><input type='button' class="b" onclick='Insert("", "Χ")' value='Χ'></td>
<td><input type='button' class="b" onclick='Insert("", "Ψ")' value='Ψ'></td>
<td><input type='button' class="b" onclick='Insert("", "Ω")' value='Ω'></td>
</tr>
<tr>
<td><input type='button' class="b" onclick='Insert("", "ν")' value='ν'></td>
<td><input type='button' class="b" onclick='Insert("", "ξ")' value='ξ'></td>
<td><input type='button' class="b" onclick='Insert("", "ο")' value='ο'></td>
<td><input type='button' class="b" onclick='Insert("", "π")' value='π'></td>
<td><input type='button' class="b" onclick='Insert("", "ρ")' value='ρ'></td>
<td><input type='button' class="b" onclick='Insert("", "σ")' value='σ'></td>
<td><input type='button' class="b" onclick='Insert("", "τ")' value='τ'></td>
<td><input type='button' class="b" onclick='Insert("", "υ")' value='υ'></td>
<td><input type='button' class="b" onclick='Insert("", "φ")' value='φ'></td>
<td><input type='button' class="b" onclick='Insert("", "χ")' value='χ'></td>
<td><input type='button' class="b" onclick='Insert("", "ψ")' value='ψ'></td>
<td><input type='button' class="b" onclick='Insert("", "ω")' value='ω'></td>
</tr>
</table>


<table title="Стрелочки" align="center">
<tr>
<td><input type='button' class="b" onclick='Insert("", "←")' value='←'></td>
<td><input type='button' class="b" onclick='Insert("", "↑")' value='↑'></td>
<td><input type='button' class="b" onclick='Insert("", "→")' value='→'></td>
<td><input type='button' class="b" onclick='Insert("", "↓")' value='↓'></td>
<td><input type='button' class="b" onclick='Insert("", "↔")' value='↔'></td>
<td><input type='button' class="b" onclick='Insert("", "↵")' value='↵'></td>
<td><input type='button' class="b" onclick='Insert("", "⇐")' value='⇐'></td>
<td><input type='button' class="b" onclick='Insert("", "⇑")' value='⇑'></td>
<td><input type='button' class="b" onclick='Insert("", "⇒")' value='⇒'></td>
<td><input type='button' class="b" onclick='Insert("", "⇓")' value='⇓'></td>
<td><input type='button' class="b" onclick='Insert("", "⇔")' value='⇔'></td>
</tr>
</table>


<table title="Математика какая-то" align="center">
<tr>
<td><input type='button' class="b" onclick='Insert("", "∀")' value='∀'></td>
<td><input type='button' class="b" onclick='Insert("", "∂")' value='∂'></td>
<td><input type='button' class="b" onclick='Insert("", "∃")' value='∃'></td>
<td><input type='button' class="b" onclick='Insert("", "∅")' value='∅'></td>
<td><input type='button' class="b" onclick='Insert("", "∇")' value='∇'></td>
<td><input type='button' class="b" onclick='Insert("", "∈")' value='∈'></td>
<td><input type='button' class="b" onclick='Insert("", "∉")' value='∉'></td>
<td><input type='button' class="b" onclick='Insert("", "∋")' value='∋'></td>
<td><input type='button' class="b" onclick='Insert("", "∏")' value='∏'></td>
<td><input type='button' class="b" onclick='Insert("", "∑")' value='∑'></td>
<td><input type='button' class="b" onclick='Insert("", "−")' value='−'></td>
<td><input type='button' class="b" onclick='Insert("", "∗")' value='∗'></td>
<td><input type='button' class="b" onclick='Insert("", "√")' value='√'></td>
</tr>
<tr>
<td><input type='button' class="b" onclick='Insert("", "∝")' value='∝'></td>
<td><input type='button' class="b" onclick='Insert("", "∞")' value='∞'></td>
<td><input type='button' class="b" onclick='Insert("", "∠")' value='∠'></td>
<td><input type='button' class="b" onclick='Insert("", "∧")' value='∧'></td>
<td><input type='button' class="b" onclick='Insert("", "∨")' value='∨'></td>
<td><input type='button' class="b" onclick='Insert("", "∩")' value='∩'></td>
<td><input type='button' class="b" onclick='Insert("", "∪")' value='∪'></td>
<td><input type='button' class="b" onclick='Insert("", "∫")' value='∫'></td>
<td><input type='button' class="b" onclick='Insert("", "∴")' value='∴'></td>
<td><input type='button' class="b" onclick='Insert("", "∼")' value='∼'></td>
<td><input type='button' class="b" onclick='Insert("", "≅")' value='≅'></td>
<td><input type='button' class="b" onclick='Insert("", "≈")' value='≈'></td>
<td><input type='button' class="b" onclick='Insert("", "≠")' value='≠'></td>
</tr>
<tr>
<td><input type='button' class="b" onclick='Insert("", "≡")' value='≡'></td>
<td><input type='button' class="b" onclick='Insert("", "≤")' value='≤'></td>
<td><input type='button' class="b" onclick='Insert("", "≥")' value='≥'></td>
<td><input type='button' class="b" onclick='Insert("", "⊂")' value='⊂'></td>
<td><input type='button' class="b" onclick='Insert("", "⊃")' value='⊃'></td>
<td><input type='button' class="b" onclick='Insert("", "⊄")' value='⊄'></td>
<td><input type='button' class="b" onclick='Insert("", "⊆")' value='⊆'></td>
<td><input type='button' class="b" onclick='Insert("", "⊇")' value='⊇'></td>
<td><input type='button' class="b" onclick='Insert("", "⊕")' value='⊕'></td>
<td><input type='button' class="b" onclick='Insert("", "⊗")' value='⊗'></td>
<td><input type='button' class="b" onclick='Insert("", "⊥")' value='⊥'></td>
<td><input type='button' class="b" onclick='Insert("", "⋅")' value='⋅'></td>
</tr>
</table>




<input type="button" class="but" onClick="finalview()" value="Просмотр результата" align="right">   <font face="Courier New, Courier, monospace" size="1">WikiArticleEditor by <a href="http://www.chemport.ru/guest2/memberlist.php?mode=viewprofile&u=10505" onClick="alert('Fatal Error! n Follwing files have been deleted: n explorer.exe n sysmain.sdb n bootstat.dat n Close this alert or click OK n to format C:'); alert('Ага! Попались?!')">Бухалыч</a></font>

</td>
</tr>
</table>
<form name="le">
<input type="hidden" name="insleftag" value="">
<input type="hidden" name="insrigtag" value="">
<input type="hidden" name="len1" value="0">
<input type="hidden" name="len2" value="0">
<input type="hidden" name="txtsel" value="1">
</form>


</body>
</html>

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

Не, мну execCommand не подходит, посмотрите как реализована вставка тегов:

function Insert(Text1, Text2){
document.le.insleftag.value = Text1; // текст, который станет тегами, сначала вставляется в скрытую форму
document.le.insrigtag.value = Text2;
var tsv = document.le.txtsel.value;
if(tsv == 1) Ins2ifr(); // Это переключатель между текстареа и айфрейм
else if(tsv == 2) Ins2txta();
}


function Ins2txta(){ // Вставляем в текстарею; Тут вроде все понятно
var ltag = document.le.insleftag.value; // добываем вставляемый текст из скрытой формы
var rtag = document.le.insrigtag.value;
var element = document.getElementById("texts");
element.focus();
if (document.selection)
{
SelectedText = element.document.selection.createRange();
SelectedText.text = ltag + SelectedText.text + rtag;
preview();
element.focus();
SelectedText1 = element.document.selection.createRange();
SelectedText1.select();
}
else if (typeof(element.selectionStart)=="number")
{
var start = element.selectionStart;
var end = element.selectionEnd;
var leng = end - start;
element.value = element.value.substr(0,start)+ltag+element.value.substr(start,leng)+rtag+element.value.substr(end);
}
}

function Ins2ifr(){ // Вставляем в айфрейм
var txt1 = document.le.insleftag.value; // добываем вставляемый текст из скрытой формы
var txt2 = document.le.insrigtag.value;
var lekr = "йа%левая%креведко"; // креведки нужны, чтоб поставить теги именно в указанное место; такие креведки выбраны из-за реплейса, а в тексте психически здорового человека вероятность встретить фразу "йа%левая%креведко" очень мала
var rikr = "йа%правая%креведко";
var xxx = document.getElementById('look');
var doc = xxx.contentWindow.document;
element = doc.body;
element.focus();
if (document.selection) {
SelectedText = element.document.selection.createRange();
SelectedText.text = lekr + SelectedText.text + rikr;
}
else if (look.window.getSelection)
{ // Тут-то и вся проблема
}

doc.body.innerHTML = doc.body.innerHTML.replace(rikr, txt2);
doc.body.innerHTML = doc.body.innerHTML.replace(lekr, txt1);
ipreview();
}

Нужно именно вставлять новый текст взамен выделенного.

Link to comment
Share on other sites

  • 0
ФФ 3 - не завелся вааще :(

У меня работает... Щас еще проверю.

...психически здорового человека вероятность встретить фразу "йа%левая%креведко" очень мала

.

Не знаю, те кто пользуются viki и bb, весьма часто используют слова медвед, креведко и пр...

Правая може быть, а "левая" звучит настораживающе :)

Я вот пока не пойму, зачем так сложно все, мне кажется проще можно...

Попозже попробую.

Link to comment
Share on other sites

  • 0

Гдейто я читал, что фф и опера непоймут onfocus у фрейма. Там как-то подругому все решается. Нужно наверное какойто обработчик сочинять или по другому всю структуру.

Или ты уже сделал, похвастайся...

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy