В данном уроке мы рассмотрим варианты расширения функциональности JavaScript WYSIWYG редактора.

Все наши эксперименты как и в прошлых уроках мы проводим над TinyMCE.

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

<script type="text/javascript" src="<ПРАВИЛЬНЫЙ ПУТЬ>/tiny_mce/tiny_mce.js"></script>
      <script type="text/javascript">
      tinyMCE.init({
// General options
mode : "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 CSS (should be your site CSS)
      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 : &apos;style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras&apos;,
themes : &apos;advanced&apos;,
languages : &apos;en&apos;,
disk_cache : true,
debug : false
});
</script>
<script type="text/javascript">
// Normal initialization of TinyMCE
tinyMCE.init({
// General options
mode : "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(&apos;mceAddControl&apos;, false, id);
  else
  tinyMCE.execCommand(&apos;mceRemoveControl&apos;, false, id);
  }
  </script>
<form method="post" action="somepage">
  <textarea name="content" style="width:100%">
  </textarea>
  </form>
  <a href="javascript:toggleEditor(&apos;content&apos;);">Включить/Выключить редактор</a>

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

Кроме этих примеров - на сайте редактора еще множество других вариантов.



Для того, чтоб просмотреть демо версию просто выберите один из них.



Далее нажмите "View Source" и увидите код, который необходим для работы данного примера.

Чуть позже я приготовлю для Вас урок по другим возможностям этого классного редактора.

Если у Вас возникли какие-либо вопросы - пишите в комментариях - по возможности на все отвечу.

Спасибо за внимание! :)

Добавлено: 01 Января 2015 15:40:05 Добавил: Андрей Ковальчук Нравится 0

Добавить