Главная > Javascript > WYSIWYG jQuery Plugin

WYSIWYG jQuery Plugin

19 мая 2010 Написать комментарий К комментариям

1. Скачиваем дистрибутив с http://code.google.com/p/jwysiwyg/
2. Содержимое папки jwysiwyg-0.6.zip\jwysiwyg\jwysiwyg\ копируем например в /js/jwysiwyg/
3. В head (если jquery ранее не подключен, то подключаем, берем на http://jquery.com/):

<link rel='stylesheet' type='text/css' href='js/jwysiwyg/jquery.wysiwyg.css' />
<script type='text/javascript' src='js/jquery-1.4.2.min.js'></script>
<script type='text/javascript' src='js/jwysiwyg/jquery.wysiwyg.js'></script>
<script type='text/javascript' src='js/jwysiwyg_config.js'></script>

4. jwysiwyg_config.js (на основе wysiwyg-0.6.zip\jwysiwyg\examples\02-full.html, токльо добавлена кнопка «редактирование HTML»)

$(function()
{
$('#wysiwyg').wysiwyg({
    controls: {
      html          : { visible : true },
      strikeThrough : { visible : true },
      underline     : { visible : true },
 
      separator00 : { visible : true },
 
      justifyLeft   : { visible : true },
      justifyCenter : { visible : true },
      justifyRight  : { visible : true },
      justifyFull   : { visible : true },
 
      separator01 : { visible : true },
 
      indent  : { visible : true },
      outdent : { visible : true },
 
      separator02 : { visible : true },
 
      subscript   : { visible : true },
      superscript : { visible : true },
 
      separator03 : { visible : true },
 
      undo : { visible : true },
      redo : { visible : true },
 
      separator04 : { visible : true },
 
      insertOrderedList    : { visible : true },
      insertUnorderedList  : { visible : true },
      insertHorizontalRule : { visible : true },
 
      h4mozilla : { visible : true && $.browser.mozilla, className : 'h4', command : 'heading', arguments : ['h4'], tags : ['h4'], tooltip : "Header 4" },
      h5mozilla : { visible : true && $.browser.mozilla, className : 'h5', command : 'heading', arguments : ['h5'], tags : ['h5'], tooltip : "Header 5" },
      h6mozilla : { visible : true && $.browser.mozilla, className : 'h6', command : 'heading', arguments : ['h6'], tags : ['h6'], tooltip : "Header 6" },
 
      h4 : { visible : true && !( $.browser.mozilla ), className : 'h4', command : 'formatBlock', arguments : ['<H4>'], tags : ['h4'], tooltip : "Header 4" },
      h5 : { visible : true && !( $.browser.mozilla ), className : 'h5', command : 'formatBlock', arguments : ['<H5>'], tags : ['h5'], tooltip : "Header 5" },
      h6 : { visible : true && !( $.browser.mozilla ), className : 'h6', command : 'formatBlock', arguments : ['<H6>'], tags : ['h6'], tooltip : "Header 6" },
 
      separator07 : { visible : true },
 
      cut   : { visible : true },
      copy  : { visible : true },
      paste : { visible : true }
    }
  });
});

5. Ну и в тексте:

<div><textarea id='wysiwyg' name='some_name' cols='100' rows='20'></textarea></div>
Categories: Javascript Tags: ,
  1. Пока что нет комментариев.
Похожие публикации