Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.05.2008, 11:25
Интересующийся
Отправить личное сообщение для banyman Посмотреть профиль Найти все сообщения от banyman
 
Регистрация: 06.05.2008
Сообщений: 11

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 и правкой тектов из базы
Ответить с цитированием
  #2 (permalink)  
Старый 11.05.2008, 19:51
Аватар для scuter
Профессор
Отправить личное сообщение для scuter Посмотреть профиль Найти все сообщения от scuter
 
Регистрация: 14.03.2008
Сообщений: 169

http://mouse.org.ru/develops.html
тут есть редактор который похож на твой,
в нём найдёш ответ как и каким образом
Ответить с цитированием
  #3 (permalink)  
Старый 12.05.2008, 10:25
Интересующийся
Отправить личное сообщение для banyman Посмотреть профиль Найти все сообщения от banyman
 
Регистрация: 06.05.2008
Сообщений: 11

Спасибо! Покапаю!
Ответить с цитированием
  #4 (permalink)  
Старый 14.05.2008, 17:09
Интересующийся
Отправить личное сообщение для banyman Посмотреть профиль Найти все сообщения от banyman
 
Регистрация: 06.05.2008
Сообщений: 11

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

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

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

Я так понимаю, это делается с помощью JavaScript, но не пойму как...
Ответить с цитированием
  #5 (permalink)  
Старый 14.05.2008, 17:12
Интересующийся
Отправить личное сообщение для banyman Посмотреть профиль Найти все сообщения от banyman
 
Регистрация: 06.05.2008
Сообщений: 11

Сообщение от scuter Посмотреть сообщение
http://mouse.org.ru/develops.html
тут есть редактор который похож на твой,
в нём найдёш ответ как и каким образом
Его покапал, но адаптировать под свой не смог... этот как и TinyMCE громосткий...
Ответить с цитированием
  #6 (permalink)  
Старый 15.05.2008, 21:33
Аватар для scuter
Профессор
Отправить личное сообщение для scuter Посмотреть профиль Найти все сообщения от scuter
 
Регистрация: 14.03.2008
Сообщений: 169

Цитата:
этот как и 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';
}
Ответить с цитированием
  #7 (permalink)  
Старый 21.05.2008, 13:07
Интересующийся
Отправить личное сообщение для banyman Посмотреть профиль Найти все сообщения от banyman
 
Регистрация: 06.05.2008
Сообщений: 11

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"

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

Последний раз редактировалось banyman, 21.05.2008 в 13:10.
Ответить с цитированием
  #8 (permalink)  
Старый 22.05.2008, 12:43
Аватар для Gozar
Отправить личное сообщение для Gozar Посмотреть профиль Найти все сообщения от Gozar
 
Регистрация: 07.06.2007
Сообщений: 7,504

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

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

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

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

почему не сделать hidden и visible?
Ответить с цитированием
  #9 (permalink)  
Старый 23.05.2008, 12:09
Интересующийся
Отправить личное сообщение для banyman Посмотреть профиль Найти все сообщения от banyman
 
Регистрация: 06.05.2008
Сообщений: 11

Сообщение от Gozar Посмотреть сообщение
http://mouse.org.ru/develops.html

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

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

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

почему не сделать hidden и visible?
Так смысл добавления ссылки в РЕДАКТОРЕ, а не через форму...
Выделяешь слово и прячешь под него ссылку. Функция не только добавляет ссылку, но и формирует HTML код оной...
Или я твою мысль не уловил? Поясни, плизз!
Ответить с цитированием
  #10 (permalink)  
Старый 23.05.2008, 12:45
Профессор
Отправить личное сообщение для hogart Посмотреть профиль Найти все сообщения от hogart
 
Регистрация: 18.04.2008
Сообщений: 152

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


Опции темы Искать в теме
Искать в теме:

Расширенный поиск