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, а потом его показывать.
Не надо никаких всплывающих окошек. |
| Часовой пояс GMT +3, время: 04:51. |