JavaScript Редактор WYSIWYG - редактирование текстов
Здравствуйте!
Я использую свой простой редактор. Там все самые необходимые теги для форматрования текстов и используется фрейм. Добавляется отформатированный текст отлично - все работает... но вот редактировать текст - тут проблема: нужно как-то загнать текст в фрейм. Все работает на JavaScript
<form id="myform" name="myform" action="check_text.php" method="post" enctype="multipart/form-data">
<input id="Text" name="Text" type="hidden" />
</form>
<script>
function Post()
{
document.myform.Text.value=newTextArea.document.body.innerHTML;
myform.submit();
}
function EditorExecCommand(command_param)
{
var tr = frames.newTextArea.document.selection.createRange();
tr.select();
tr.execCommand(command_param);
frames.newTextArea.focus();
}
</script>
<div>
<table cellpadding=0 cellspacing=0 width=500>
<tr>
<td height=26>
<img src="bold.jpg" onClick="EditorExecCommand('Bold')" title="Жирный">
<img src="italic.jpg" onClick="EditorExecCommand('Italic')" title="Курсив">
<img src="underline.jpg" onClick="EditorExecCommand('Underline')" title="Подчеркнутый">
<img src="spacer.jpg">
<img src="left.jpg" onClick="EditorExecCommand('JustifyLeft')" title="Выровнять по левому краю">
<img src="center.jpg" onClick="EditorExecCommand('JustifyCenter')" title="Выровнять по центру краю">
<img src="right.jpg" onClick="EditorExecCommand('JustifyRight')" title="Выровнять по правому краю">
<img src="spacer.jpg">
<img src="numlist.jpg" onClick="EditorExecCommand('InsertOrderedList')" title="Нумерованый список">
<img src="marklist.jpg" onClick="EditorExecCommand('InsertUnorderedList')" title="Маркированный список">
<img src="spacer.jpg">
</td>
</tr>
</table>
<p>
<iframe width="500" height="400" id="newTextArea" name="newTextArea"></iframe>
</p>
<p>
<input type="button" onClick="Post()" value="Добавить запись" />
</p>
</div>
<script>
newTextArea.document.designMode = "on";
newTextArea.document.open();
newTextArea.document.write('TEXT');
newTextArea.document.close();
</script>
Может у кого-то есть идеи, как это реализовать... TinyMCE не пойдет... слишком громосский.. этот готов, но осталось разобраться с designMode и правкой тектов из базы |
http://mouse.org.ru/develops.html
тут есть редактор который похож на твой, в нём найдёш ответ как и каким образом |
Спасибо! Покапаю!
|
Вот так идет дело...
Есть данные в скрытом поле <input type='hidden' name='Text' id='Text' value='<?=$text;?>' /> Значение переменной $text нужно загрузить в ифрейм <iframe width="500" height="400" id="newTextArea" name="newTextArea"></iframe> Я так понимаю, это делается с помощью JavaScript, но не пойму как... |
Цитата:
|
Цитата:
чтобы текст в iframe можно было редактировать, надо сделать так, frames.message.document.designMode = "On"; чтобы перекинуть данные из формы в iframe, надо сделать так,
frames.message.document.innerText = document.getElementById('id').value;
в том редакторе это делается так,
function ShowHTML(){
document.all.im2.style.display = '';
document.all.im1.style.display = 'none';
NewHTML = frames.message.document.body.innerHTML;
document.all.Frm.style.display = 'none';
Add.NMH.value = NewHTML;
Add.NMH.style.display = 'block';
}
function ShowNormal(){
document.all.im1.style.display = '';
document.all.im2.style.display = 'none';
NewHTML = Add.NMH.value;
Add.NMH.style.display = 'none';
frames.message.document.body.innerHTML = NewHTML;
document.all.Frm.style.display = 'block';
}
|
scuter,
Спасибо! С этим понятно :) дело пошло. У меня тут еще проблема с функцией вставки гиперссылки в визуальном редакторе... Не сработывает кнопка. Само окно для оформления ссылки открывается, а ссылка не оформляется...
function OpenLink() {
var newWindowFeatures="dependent=1,Height=150,Width=430";
var board=window.open("","InsertLinks",newWindowFeatures);
board.document.open();
board.document.write("<html>");
board.document.write("<head><title>Вставка гиперссылки</title></head>");
board.document.write("<script language=Javascript>function AddLink() { AnCode = '<a href='+document.all.Protocol.value+document.all.Path.value+document.all.Target.value+'>'+window.opener.frames.newTextArea.selection.createRange().text+'</a>'; var range = window.opener.frames.newTextArea.document.selection.createRange(); range.pasteHTML(AnCode); range.select(); range.execCommand(); window.close(); }</script>");
board.document.write("<body topmargin=0 leftmargin=0>");
board.document.write("<input type=button value=Вставить OnClick=\"AddLink()\"></center>");
board.document.write("</body>");
board.document.write("</html>");
board.document.close();
}
У фрейма id="newTextArea" Не пойму, где глюк... |
http://mouse.org.ru/develops.html
реализация бросает в холодный пот banyman если у тебя для создания окошка нужно написать 11 строк кода и он больше нигде не используется то у тебя тоже с реализацие большие проблемы. Зачем вообще создавать новый гипертекстовый документ чтобы показать пользователю два или три input type="text" и кнопку добавить ссылку? почему не сделать hidden и visible? |
Цитата:
Цитата:
Выделяешь слово и прячешь под него ссылку. Функция не только добавляет ссылку, но и формирует HTML код оной... Или я твою мысль не уловил? Поясни, плизз! |
banyman, смысл в том, чтобы не открывать новое окошко и не писать в него через document.write, а подготовить все необходимое для ввода ссылки, положить в спрятанный div, а потом его показывать.
Не надо никаких всплывающих окошек. |
banyman, а вот когда ты это сделаешь, ты может поймешь где у тебя ошибка
также можно проверить значение переменных через alert(varname) это называется дебаг |
Пока не понятно...
Ну создал див <div class="imagebutton" id="createlink"><img src="createlink.gif" width="21" height="20" alt="Вставить ссылку" /></div> А дальше как? |
Цитата:
|
banyman, дальше в том месте, где у вас раньше создавалась новое окошко, делаете
document.getElementById("createlink").style.display = block;
Gozar, если бы дебаг ограничивался только этим... Алерт не всегда спасает и не всегда вскрывает причину ошибки. banyman, дебаг -- процесс отладки, избавление от багов. Поставьте в firefox расширение firebug и используйте метод console.log() для вывода отладочных значений. |
banyman, я попробую помочь еще раз
1. Ваш скрипт может работать в одном браузере, но не работать в другом, потому что то, что Вы используете для одного не работает для другого и должно быть реализовано в виде исключения в вашем скрипте 1.2. Вставка html в дизайн моде для мозиллы и для ie имеет разницу 2. Может это поможет html это не только текст но и дерево DOM hogart, alert позволит banyman сейчас понять что происходит в скрипте Вобще решение простое: читать что такое js и как он работает!!! а также обязательно прочитать вот это:http://xpoint.ru/know-how/WYSIWYG/TrueJavaScriptEditor |
угу, и не плодить этих глючных w5g редакторов...
|
Цитата:
но в принципе этот WISIWING был разчитан на IE 6 там всё работает, чтобы работало на всех броузерах, лечше создать диалоговое окно на HTML, тоесть какой то DIV или TADLE. |
Цитата:
function AddLink() { AnCode = '<a href='+document.all.Protocol.value+document.all.Path.value+document.all.Target.value+'>'+window.opener.frames.newTextArea.selection.createRange().text+'</a>'; var range = window.opener.frames.newTextArea.document.selection.createRange(); range.pasteHTML(AnCode); range.select(); range.execCommand(); window.close(); }
Цитата:
Вроде все нормально... все устраивает. Осталась гиперссылка... про див тк и не понял... я в JS пока очень плохо разбираюсь. РНР - тут другое дело. |
слухай а через функцию execCommand можно создать ссылку,
у этой команды есть своё диалоговое окно. |
Я про execCommand в самом начале подумал, но не нашел ее описание. Как формировать функцию. С другими execCommand для списков и т.п. проще. Не думаю, что тут так же.. или пройдет?..
|
ну по пробуй сделать так,
document.execCommand('unlink')
описалово по это функции есть тут, http://www.quirksmode.org/dom/execCommand.html#t045 но жалко только что по инглишу. |
да кстати,
вот это дело,
function OpenLink() {
var newWindowFeatures="dependent=1,Height=150,Width=430";
var board=window.open("","InsertLinks",newWindowFeatures);
board.document.open();
board.document.write("<html>");
board.document.write("<head><title>Вставка гиперссылки</title></head>");
board.document.write("<script language=Javascript>function AddLink() { AnCode = '<a href='+document.all.Protocol.value+document.all.Path.value+document.all.Target.value+'>'+window.opener.frames.newTextArea.selection.createRange().text+'</a>'; var range = window.opener.frames.newTextArea.document.selection.createRange(); range.pasteHTML(AnCode); range.select(); range.execCommand(); window.close(); }</script>");
board.document.write("<body topmargin=0 leftmargin=0>");
board.document.write("<input type=button value=Вставить OnClick=\"AddLink()\"></center>");
board.document.write("</body>");
board.document.write("</html>");
board.document.close();
}
не срабатывало потому что у тебя нет таких элементов как Protocol, Path и Target, правильней будет сделать так как в том вузимуке или unlink |
Даа :)) все оказалось просто... правда, не всеми браузерами может поддерживаться, но сейчас это не существенно. в ИЕ работает.. может и во всех остальных...
нашел execCommand
<img src="../images/edit/lincs.jpg" onClick="EditorExecCommand('CreateLink')" title="Вставить гиперссылку">
Работает как нужно :) Вам, ребята, спасибо!!! |
жаль что banyman ограничился только CreateLink ибо тема тогда не стоила и подниматься, намного более интересна была его первоначальная задача по созданию продвинутой ссылки и вставки html
|
| Часовой пояс GMT +3, время: 14:32. |