Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   JavaScript Редактор WYSIWYG - редактирование текстов (https://javascript.ru/forum/dom-window/1205-javascript-redaktor-wysiwyg-redaktirovanie-tekstov.html)

banyman 06.05.2008 12:25

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 и правкой тектов из базы

scuter 11.05.2008 20:51

http://mouse.org.ru/develops.html
тут есть редактор который похож на твой,
в нём найдёш ответ как и каким образом

banyman 12.05.2008 11:25

Спасибо! Покапаю!

banyman 14.05.2008 18:09

Вот так идет дело...
Есть данные в скрытом поле
<input type='hidden' name='Text' id='Text' value='<?=$text;?>' />

Значение переменной $text нужно загрузить в ифрейм

<iframe width="500" height="400" id="newTextArea" name="newTextArea"></iframe>

Я так понимаю, это делается с помощью JavaScript, но не пойму как...

banyman 14.05.2008 18:12

Цитата:

Сообщение от scuter (Сообщение 2423)
http://mouse.org.ru/develops.html
тут есть редактор который похож на твой,
в нём найдёш ответ как и каким образом

Его покапал, но адаптировать под свой не смог... этот как и TinyMCE громосткий...

scuter 15.05.2008 22:33

Цитата:

этот как и TinyMCE громосткий...
ну я бы так не сказал,

чтобы текст в 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';
}

banyman 21.05.2008 14:07

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"

Не пойму, где глюк...

Gozar 22.05.2008 13:43

http://mouse.org.ru/develops.html

реализация бросает в холодный пот

banyman если у тебя для создания окошка нужно написать 11 строк кода и он больше нигде не используется то у тебя тоже с реализацие большие проблемы.

Зачем вообще создавать новый гипертекстовый документ чтобы показать пользователю два или три input type="text" и кнопку добавить ссылку?

почему не сделать hidden и visible?

banyman 23.05.2008 13:09

Цитата:

Сообщение от Gozar (Сообщение 2519)
http://mouse.org.ru/develops.html

реализация бросает в холодный пот

Я отсюда взял код функции. Но не пойму, почему у меня не работает...

Цитата:

banyman если у тебя для создания окошка нужно написать 11 строк кода и он больше нигде не используется то у тебя тоже с реализацие большие проблемы.

Зачем вообще создавать новый гипертекстовый документ чтобы показать пользователю два или три input type="text" и кнопку добавить ссылку?

почему не сделать hidden и visible?
Так смысл добавления ссылки в РЕДАКТОРЕ, а не через форму...
Выделяешь слово и прячешь под него ссылку. Функция не только добавляет ссылку, но и формирует HTML код оной...
Или я твою мысль не уловил? Поясни, плизз!

hogart 23.05.2008 13:45

banyman, смысл в том, чтобы не открывать новое окошко и не писать в него через document.write, а подготовить все необходимое для ввода ссылки, положить в спрятанный div, а потом его показывать.
Не надо никаких всплывающих окошек.


Часовой пояс GMT +3, время: 14:42.