Javascript.RU

 
 
Опции темы
 
Старый 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>
 
Старый 18.10.2012, 23:03
Аспирант
Отправить личное сообщение для Svetlana_ Посмотреть профиль Найти все сообщения от Svetlana_
 
Регистрация: 05.10.2012
Сообщений: 31

Неужели так туго?
 
Старый 18.10.2012, 23:22
Профессор
Отправить личное сообщение для Hoshinokoe Посмотреть профиль Найти все сообщения от Hoshinokoe
 
Регистрация: 08.01.2012
Сообщений: 253

Svetlana_,

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

Посмотрели бы в сторону уже готовых решений, всяко лучше чем изобретать свой велосипед. Есть небольшие редакторы.
Вот для примера - 10Kb minified.
 
Старый 19.10.2012, 00:23
Аспирант
Отправить личное сообщение для Svetlana_ Посмотреть профиль Найти все сообщения от Svetlana_
 
Регистрация: 05.10.2012
Сообщений: 31

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

Редакторов много. Да. Просмотрено, как уже было упомянуто всё, что можно. Попробуйте сами разобраться в связях Тини, к примеру. Очень весёлое занятие. Запаситесь топором рубить монитор.
 
Старый 19.10.2012, 00:41
Аспирант
Отправить личное сообщение для Svetlana_ Посмотреть профиль Найти все сообщения от Svetlana_
 
Регистрация: 05.10.2012
Сообщений: 31

Господа профессура! Не фонтан. Или сами ответа не знаете? Куда ж тогда новичку податься?!
 
Старый 19.10.2012, 00:58
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Сообщение от Svetlana_
Господа профессура! Не фонтан. Или сами ответа не знаете?
на понт брать
а) не есть хорошо с вашей стороны
б) бесполезно

Сообщение от Svetlana_
Как сделать изменение статуса кнопок (вкл\выкл) в зависимости от положения курсора в textarea?
По другому: как узнать между какими тэгами находится курсор в textarea?
http://learn.javascript.ru/vydelenie...ge-i-selection
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук

Последний раз редактировалось nerv_, 19.10.2012 в 01:04.
 
Старый 19.10.2012, 01:26
Профессор
Отправить личное сообщение для Hoshinokoe Посмотреть профиль Найти все сообщения от Hoshinokoe
 
Регистрация: 08.01.2012
Сообщений: 253

Svetlana_,
Сообщение от Svetlana_
... и где там изменение статуса кнопок?
Специально нашел с изменением статуса кнопок jwysiwyg. В незапакованом варианте всего лишь 19Kb.
Сообщение от Svetlana_
Редакторов много. Да. Просмотрено, как уже было упомянуто всё, что можно. Попробуйте сами разобраться в связях Тини, к примеру. Очень весёлое занятие. Запаситесь топором рубить монитор.
Вам предложили редакторы попроще, но все равно вы хотите чтобы кто-нибудь разбирался за вас. На форуме подсказывают в каком направлении двигаться, а не выполняют всю работу за вас.
 
Старый 19.10.2012, 01:40
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

на сайте мозилы есть готовое решение. Осталось только заюзать.
Сообщение от Hoshinokoe
Специально нашел с изменением статуса кнопок jwysiwyg. В незапакованом варианте всего лишь 19Kb.
у меня сразу же заглючил при ресайзе
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук

Последний раз редактировалось nerv_, 19.10.2012 в 01:42.
 
Старый 19.10.2012, 02:07
Аспирант
Отправить личное сообщение для Svetlana_ Посмотреть профиль Найти все сообщения от Svetlana_
 
Регистрация: 05.10.2012
Сообщений: 31

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

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

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

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

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

Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jquery wysiwyg в модальном окне jquery ui foreach jQuery 1 19.08.2012 22:07
Один обработчик для нескольких кнопок! frundik Элементы интерфейса 2 10.07.2012 15:30
Фон текста в WYSIWYG редакторе Aptyp Элементы интерфейса 1 09.04.2012 23:52
Новый WYSIWYG редактор, идеи, предложения, советы Logo Общие вопросы Javascript 4 27.05.2011 03:24
WYSIWYG: загрузка спецсимволов posta Общие вопросы Javascript 2 20.05.2011 13:12


© Илья Кантор, 2007-2021 О проекте - Архив форума - Вверх