Форум

Svetlana_ · #1 (**permalink**) 16.10.2012, 09:32

Прошу помочь, объяснить, показать. Как сделать изменение статуса кнопок (вкл\выкл) в зависимости от положения курсора в 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>

Svetlana_ · #2 (**permalink**) 18.10.2012, 23:03

Неужели так туго?

Hoshinokoe · #3 (**permalink**) 18.10.2012, 23:22

Svetlana_,

Есть много различных редакторов (ссылка), можно посмотреть как это реализовано у них.

Посмотрели бы в сторону уже готовых решений, всяко лучше чем изобретать свой велосипед. Есть небольшие редакторы.
Вот для примера - 10Kb minified.

Svetlana_ · #4 (**permalink**) 19.10.2012, 00:23

Hoshinokoe,
"Вот для примера..."
... и где там изменение статуса кнопок?

Редакторов много. Да. Просмотрено, как уже было упомянуто всё, что можно. Попробуйте сами разобраться в связях Тини, к примеру. Очень весёлое занятие. Запаситесь топором рубить монитор.

Svetlana_ · #5 (**permalink**) 19.10.2012, 00:41

Господа профессура! Не фонтан. Или сами ответа не знаете? Куда ж тогда новичку податься?!

nerv_ · #6 (**permalink**) 19.10.2012, 00:58

Сообщение от Svetlana_

Господа профессура! Не фонтан. Или сами ответа не знаете?

на понт брать
а) не есть хорошо с вашей стороны
б) бесполезно

Сообщение от Svetlana_

Как сделать изменение статуса кнопок (вкл\выкл) в зависимости от положения курсора в textarea?
По другому: как узнать между какими тэгами находится курсор в textarea?

http://learn.javascript.ru/vydelenie...ge-i-selection

Hoshinokoe · #7 (**permalink**) 19.10.2012, 01:26

Svetlana_,

Сообщение от Svetlana_

... и где там изменение статуса кнопок?

Специально нашел с изменением статуса кнопок jwysiwyg. В незапакованом варианте всего лишь 19Kb.

Сообщение от Svetlana_

Редакторов много. Да. Просмотрено, как уже было упомянуто всё, что можно. Попробуйте сами разобраться в связях Тини, к примеру. Очень весёлое занятие. Запаситесь топором рубить монитор.

Вам предложили редакторы попроще, но все равно вы хотите чтобы кто-нибудь разбирался за вас. На форуме подсказывают в каком направлении двигаться, а не выполняют всю работу за вас.

nerv_ · #8 (**permalink**) 19.10.2012, 01:40

на сайте мозилы есть готовое решение. Осталось только заюзать.

Сообщение от Hoshinokoe

Специально нашел с изменением статуса кнопок jwysiwyg. В незапакованом варианте всего лишь 19Kb.

у меня сразу же заглючил при ресайзе

Svetlana_ · #9 (**permalink**) 19.10.2012, 02:07

Hoshinokoe,
иногда задание направления является пинком под зад в никуда. Что мне делать за себя разберусь, спасибо.
прим: я в курсе, что это россиянский форум, не напрягайтесь.

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

nerv_, конкретно: приведённые ссылки посещала, читала. По первой в примерах обратные связи. Наоборот. Как их "перевернуть" даже приблизительно не представляю. Пыталась усердно. Как в любой статье, выбраны примеры попроще. Кстати, когда автору в комментах к "Простому висивигу" задали вопрос(примерно)- "как это сделать конкретно", он не знал ответа, бросив лишь, что это тема отдельной статьи и... переслал по приведённой вами ссылке. Подозреваю, что выдать конкретику, это - не перепечатывать справочные руководства в виде статей. Увы.

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

Уверена, что очень многие ищут ответ на вопрос.

Форум

Справочник

Discord чат

Курсы javascript