CKEditor или CodeMirror — интеграция и никаких или

Имею в распоряжении собственную админку. Пока еще в состоянии "кочерыжки", но уже удобно, привык.
Как любой ленивый человек юзаю внутри админки wysiwyg-редактор. В данном случае речь идет о редакторе CKEditor, правнуке FCKEditor'a.
Все в нем конечно хорошо и удобно, за исключением того, что режим правки исходного кода страницы превращает использование в ужас.
Ни тебе отступов, ни подсветки, word-wrap не там где поставлено, вобщем не юзабельно.
Отыскал редактор исходного кода на javascript, под названием Codemirror.
Все что нужно в наличии, только теперь получилось у меня их два: если нужно быстренько и лениво, то ckeditor, если нужно кропотливо или точно то codemirror.
Неудобно. Набросал быстренько функцию, которая по нажатию кнопочки подсовывает поверх textarea то один редактор, то другой…
И тут я задумался, а не совместить ли мне их. Собственно это я и сделал, о чем сейчас и расскажу.

UPD 05.07.2011:  Затея по поводу этого плагина оказалась довольно велосипедной и (видимо, тот плагин я не скачивал) была решена еще в 2009 году здесь -> http://cksource.com/forums/viewtopic.php?t=13862

Так как у CKEditor'a уже существует система плагинов, то прикручивать я стал к нему. От вывода codemirror'a в диалоговом окне созданном с помощью api ckeditor'a я сразу отказался, не перевариваю исходный код в отдельном окне.

Сначала я хотел слепить какую-нибудь няшную кнопочку, чтобы тыкать в нее было приятно глазу и пальцам, а на нее уже вешать события. Но потом я заметил, что привычнее нажимать встроенную кнопочку исходного кода. Так как встроенныей source-редактор мне был не нужен, то действие кнопочки я и подменил.

Интеграция (howto)

Приготовления

Итак, качаем, если еще не скачали:

Сам плагин:

  1. CKEditor CodeMirror plugin v0.1
  2. CKEditor (у меня был 3.x версии)
  3. CodeMirror (у меня был 2 версии)
  4. jQuery (у меня был 1.4 версии)

Установка

Извиняюсь за подробность, но на мой взгляд чем полнее, тем лучше.

Установка jQuery:

1) Залейте jQuery в произвольную директорию вашего сайта

2) Подключите jQuery:

	<script type="text/javascript" src="/jquery.js"></script>

Установка CKEditor:

1) Распакуйте архив с CKEditor'om в произвольную директорию вашего сайта

2) Подключите CKEditor:

    <script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
    <script type="text/javascript" src="/ckeditor/adapters/jquery.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function()
        {
            jQuery("textarea").ckeditor();
        });
    </script>

После этого CKEditor уже должен работать.

Установка CodeMirror:

1) Распакуйте архив с CodeMirror'om в произвольную директорию вашего сайта

2) Подключите CodeMirror: Основные:

    <link href="/codemirror/docs.css" rel="stylesheet" type="text/css" />
    <link href="/codemirror/codemirror.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/codemirror/codemirror.js"></script>

Вспомогательные, зависит от языка, который вы используете. Я использую следующие:

    <link href="/codemirror/css.css" rel="stylesheet" type="text/css" />
    <link href="/codemirror/javascript.css" rel="stylesheet" type="text/css" />
    <link href="/codemirror/xml.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/codemirror/xml.js"></script>
    <script type="text/javascript" src="/codemirror/css.js"></script>
    <script type="text/javascript" src="/codemirror/javascript.js"></script>
    <script type="text/javascript" src="/codemirror/htmlmixed.js"></script>

Это все настройки CodeMirror пока что.

Установка CKEditor CodeMirror plugin:

1) Распакуйте содержимое архива (там только один файл под названием plugin.js) с плагином в директорию плагинов вашего сайта, допустим: /ckeditor/plugins/codemirror/

Настройка

Настройка CKEditor:

1) Откройте файл конфигурации, у меня он находился по адресу: /ckeditor/config.js

2) Добавьте в config.extraPlugins слово 'codemirror', или если такой строки нет, впишите ее сами: config.extraPlugins='codemirror';

Настройка CodeMirror:

1) Откройте файл стилей codemirror.css: /codemirror/codemirror.css 2) Добавьте в конец файла стили:

	.cke_skin_kama .CodeMirror
	{
		overflow-y: auto;
		overflow-x: scroll;
		height: 400px; /* варьируйте под размер поля CKEditor'a */
		min-height: 400px; /* варьируйте под размер поля CKEditor'a */
		max-width:900px; /* варьируйте под размер поля CKEditor'a */
		width: 900px; /* варьируйте под размер поля CKEditor'a */
		line-height: 1em;
		_position: relative; /* IE6 hack */
		background-color:#fff;
	}

	.cke_skin_kama .CodeMirror *
	{
		word-wrap:break-word;
		font: 12px Courier, monospace;
		vertical-align:bottom;
		white-space:pre;
	}

	.cke_skin_kama .CodeMirror-gutter
	{
		background:#eee;
	}

Внимание, я использую скин "kama" в CKEditor, если вы используете другую тему, вам нужно соответственно менять название классов на: .cke_skin_названиеВашейТемы.

Все, настройка закончена. Теперь можете опробовать что у вас происходит по нажатию кнопки "Источник" ("Source") и сравнить с тем, что получилось у меня.

Полезно(17)Бесполезно(17)
Комментарии закрыты.