Расширеный WYSIWYG редактор

untitledВ одном из предъидущих уроках мы уже расматривали TinyMCE. В этом рассмотрим как расширить его стандарный функционал.

Для расширения кругозора. РЕЖИМ ПОЛНОГО СООТВЕТСТВИЯ (WYSIWYG) (от англ. What You See Is What You Get — что вы видите, то вы и получите) — режим полного соответствия изображения на экране монитора компьютерной издательской системы изображению в печатном издании. Напр., текстовый процессор, работающий в данном режиме, демонстрирует на экране реальную страницу с заданной шириной строк, разбивкой, размером и стилем шрифтов.

1.Пример со всеми возможными функциями (демо)


<="text/javascript" src="<ПРАВИЛЬНЫЙ ПУТЬ>/tiny_mce/tiny_mce.js"></script>      <="text/javascript">      tinyMCE.init({// General optionsmode : "textareas",theme : "advanced",plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager", // Theme options      theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",      theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",      theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",      theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",      theme_advanced_toolbar_location : "top",      theme_advanced_toolbar_align : "left",      theme_advanced_statusbar_location : "bottom",      theme_advanced_resizing : true, // Example content  (should be your site )      content_css : "css/example.css", // Drop lists for link/image/media/template dialogs      template_external_list_url : "js/template_list.js",      external_link_list_url : "js/link_list.js",      external_image_list_url : "js/image_list.js",      media_external_list_url : "js/media_list.js", // Replace values for the template plugin      template_replace_values : {      username : "Some User",      staffid : "991234"      }      });  </script><form method="post" action="somepage">  <textarea name="content" style="width:100%">  </textarea>  </form>

2. Пример с TinyMCE compressor (демо). Данная технология позволяет до 70% уменьшить количество запросов и тем самым снизить нагрузку на сервер.


<script type="text/javascript" src="<ПРАВИЛЬНЫЙ ПУТЬ>/tiny_mce/tiny_mce_gzip.js"></script>  <script type="text/javascript">  // This is where the compressor will load all components, include all components used on the page here  tinyMCE_GZ.init({plugins : 'style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras',themes : 'advanced',languages : 'en',disk_cache : true,debug : false});</script><script type="text/javascript">// Normal initialization of TinyMCEtinyMCE.init({// General optionsmode : "textareas",theme : "advanced",plugins : "style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras", // Theme options  theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",  theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",  theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",  theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",  theme_advanced_toolbar_location : "top",  theme_advanced_toolbar_align : "left",  theme_advanced_statusbar_location : "bottom",  theme_advanced_resizing : true, // Example content CSS (should be your site CSS)  content_css : "css/example.css", // Drop lists for link/image/media/template dialogs  template_external_list_url : "lists/template_list.js",  external_link_list_url : "lists/link_list.js",  external_image_list_url : "lists/image_list.js",  media_external_list_url : "lists/media_list.js", // Replace values for the template plugin  template_replace_values : {  username : "Some User",  staffid : "991234"  }  });  </script><form method="post" action="somepage">  <textarea name="content" style="width:100%">  </textarea>  </form>

3. Пример с кнопкой включение и выключения редактора (демо)


<script type="text/javascript" src="<ПРАВИЛЬНЫЙ ПУТЬ>/tiny_mce/tiny_mce.js"></script>  <script type="text/javascript">  tinyMCE.init({mode : "textareas",theme : "advanced"});function toggleEditor(id) {  if (!tinyMCE.get(id))  tinyMCE.execCommand('mceAddControl', false, id);  else  tinyMCE.execCommand('mceRemoveControl', false, id);  }  </script><form method="post" action="somepage">  <textarea name="content" style="width:100%">  </textarea>  </form>  <a href="javascript:toggleEditor('content');">Включить/Выключить редактор</a>

 

Во всех трех примерах жирным было выделено место, куда необходимо прописывать правильный путь к редактору для его правильного функционирования. Курсивом отмечен код, который необходимо вставить между тегами <head></head>.

Кроме этих примеров — на сайте редактора еще множество других вариантов. Для того, чтоб просмотреть демо версию просто выберите один из них. Далее нажмите «View Source» и увидите код, который необходим для работы данного примера.

На этом всё, все вопросы прошу в коментарии. Обращая что урок расчитан не на новичков.

Запись навигация

Top