Показать сообщение отдельно
  #1 (permalink)  
Старый 16.10.2012, 09:32
Аспирант
Отправить личное сообщение для Svetlana_ Посмотреть профиль Найти все сообщения от Svetlana_
 
Регистрация: 05.10.2012
Сообщений: 31

Статус кнопок в WYSIWYG-редакторе
Прошу помочь, объяснить, показать. Как сделать изменение статуса кнопок (вкл\выкл) в зависимости от положения курсора в textarea?
По другому: как узнать между какими тэгами находится курсор в textarea?

Не посылайте по ссылкам - перерыла всё, что только можно. К сожалению, нигде не нашла внятного для новичка объяснения. С руководствами, статьями по яваскрипт на грамотном русском языке туго, поэтому пришла сюда.

Прошу, если можно, привести примеры кодов. По ним разбираться проще и понятней. Спасибо.

Готовый код публикну здесь же, без проблем. Будет нормальный висивиг для вэб, а не двухсот-четырёхсоткилобайтный ужас тинимсе и пр.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>WYSIWYG_333</title>

<style type="text/css">
body {margin:10px;}
iframe {width:500px; height:300px;border:1px solid #000;margin-bottom:5px;}
input {margin-right:5px; padding:3px;}
.bold {font-weight:bold;}
.ital {font-style:italic;}
.under {text-decoration:underline;}
</style>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<h1>WYSIWYG</h1>
<form name="formText" method="post" onSubmit="this.data.value=iDoc.body.innerHTML">
    <input type='button' value='Ж' onclick='setBold()' class='bold' />
    <input type='button' value='К' onclick='setItal()' class='ital' />
    <input type='button' value='Ч' onclick='setUnder()' class='under' />
    <input type='button' value='P' onclick='setInsertUnorderedList()' class='insertunorderedlist' />
    <input type='button' value='Y' onclick='setInsertOrderedList()' class='insertorderedlist' /><br/>
    
    <iframe scrolling="no" frameborder="no" src="#" id="frameId" name="frameId"></iframe>

    <textarea id="dataId" name="data"></textarea>
    <input type="submit" value="Отправить" /><br>

</form>

<script type="text/javascript">
     document.getElementById('dataId').style.display = 'none';
</script>
<script type="text/javascript">
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>\n";
iHTML += "<style>\n";
iHTML += "body, div, p, td {font-size:12px; font-family:tahoma; margin:0px; padding:0px;}";
iHTML += "body {margin:5px;}";
iHTML += "</style>\n";
iHTML += "<body></body>";
iHTML += "</html>";

iDoc.open();
iDoc.write(iHTML);
iDoc.close();
//======================================================================================================
if (!iDoc.designMode) alert("Визуальный режим редактирования не поддерживается Вашим браузером");
else iDoc.designMode = (isGecko) ? "on" : "On";

function setBold() {iWin.focus();iWin.document.execCommand("bold", null, "");}
function setItal() {iWin.focus();iWin.document.execCommand("italic", null, "");}
function setUnder() {iWin.focus();iWin.document.execCommand("underline", null, "");}
function setInsertUnorderedList() {iWin.focus();iWin.document.execCommand("insertunorderedlist", null, "");}
function setInsertOrderedList() {iWin.focus();iWin.document.execCommand("insertorderedlist", null, "");}


</script>
</body>
</html>
Ответить с цитированием