Плагин невизуального редактора СodEditor (beta)

[beliyadm]

Представляю Вашему вниманию мелкую поделку для собственных нужд - невизуальный редактор для Joomla 1.5, по типу Home-site и других редакторов, СodEditor версия 1.0.2

Что умеет:
1 - вставлять заданные теги (минимально необходимый набор)
2 - обрамлять выделенный текст выбранным тегом (выделили текст, нажали В - текст обрамился тегами)
3 - поддерживаемые теги: B, I, U, S, P, BR, UL LI, OL LI, A, IMG, H1-H6

В планах на будущее (никаких сроков реализации не обещаю и обещать не буду)
1 - добавить подсветку синтаксиса HTML
2 - добавить нумерацию строк (под вопросом)
3 - добавить функционал плагина для JCE advlink для добавления ссылки на определенный набор элементов сайта, материалы, ссылки в меню (очень нескоро)
4 - возможность в панель редактора подключать кнопки сторонних плагинов для редактора (от SMART)

Кратко для интересующихся
1 - для добавления собственного тега открываем файл plugins\editors\codeditor.php, находим строки 153-173 и по аналогии добавляем свой тег (не забываем положить картинку в каталог plugins\editors\codeditor\ico)



Changelog

Версия 1.0.2

Исправлена ошибка работы сторонних кнопок редактора под областью ввода (подробнее, изображения и прочие), спасибо ShadowXak

[Sulpher]

Опробовал - понравилось. То, что нужно для оптимизации контента. Пожелание на будущее:
добавить возможность вставки ссылки на контент. Это значительно упростило бы работу с наполнением сайта и было бы просто назаменим элементом редактора.

[beliyadm]

добавить возможность вставки ссылки на контент.

как обсудили - сделаю, но не скажу когда. Описано в планах, пункт 3
P.S. рад что понравилось

[ShadowXak]

Потрясающе!
это просто моя мечта, а то за*** постоянно гонять и то включать то выключать редактор
ща солью и поставлю.
извини за назойливость, я еще не смотрел, как можно в этот редактор подключить кнопочки от других плагинов, если это реально, то просто суперски будет, а то у меня внизу уже 2 ряда
---
это я к тому что охото кнопочки сделать маленькие и сверху
---
+ с меня!

[ShadowXak]

Все как кнопочки добавить от плагинов я уже знаю посмотрел код! 

[beliyadm]

извини за назойливость, я еще не смотрел, как можно в этот редактор подключить кнопочки от других плагинов, если это реально, то просто суперски будет, а то у меня внизу уже 2 ряда

автоматическое подключение кнопочек не делал и в принципе не планирую, но добавлять новые кнопки в редактор элементарно просто - одна строка в коде и картинка в каталог plugins\editors\codeditor\ico, в первом посте писал где добавлять, думаю что без проблем разберешься

Потрясающе!
это просто моя мечта, а то за*** постоянно гонять и то включать то выключать редактор

не за что, сам такой же ленивый

[smart]

Петя, а почему-бы не сделать подключение новых кнопок плагинами? Это же очень просто реализовать?

[beliyadm]

Петя, а почему-бы не сделать подключение новых кнопок плагинами? Это же очень просто реализовать?

знаю что просто, но плагин писался только для собственных нужд, у меня такой потребности нет и в ближайшем будущем не планируется.
Раздробить $this->_displayButtons($name, $buttons) и оттуда вытащить опции кнопок, кому надо разберутся самостоятельно

[xobot]

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

[smart]

знаю что просто, но плагин писался только для собственных нужд, у меня такой потребности нет и в ближайшем будущем не планируется

грустно... но вообще, если уж ты что-то выкладываешь, то так или иначе, ты уже несешь ответственность за данное творение... да и честно говоря, я не вижу никакой проблемы добавить 5-10 строчек и реализовать такой функционал. Ну тебе в принципе видней...

[beliyadm]

но вообще, если уж ты что-то выкладываешь, то так или иначе, ты уже несешь ответственность за данное творение...

несу, но не обещаю сделать все и сразу. Занес идею в TODO, в следующей версии реализую

[smart]

Занес идею в TODO, в следующей версии реализую

Петь не совсем внимателен - я предлагал сделать через плагины просто пользовательские кнопки, а не цеплять те, что есть для других редакторов (хотя и это было наверно интересно). Т.е. просто создать группу плагинов CodEditor, которые позволят добавить доп. кнопки на панель редактора. И один плагин пример... Я обещаю сразу же написать второй плагин пример - для вставки тегов JComments. А там народ наверняка всего напридумывает...

[ShadowXak]

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

[beliyadm]

Сергей - идею понял, подумаю
ShadowXak - спасибо, действительно баг, сейчас перезалью исправленную версию, пока же можешь сам в функцию function onInit() добавить случайно убранный мной код

Код

$txt =	"<script type=\"text/javascript\">
					function insertAtCursor(myField, myValue) {
						if (document.selection) {
							// IE support
							myField.focus();
							sel = document.selection.createRange();
							sel.text = myValue;
						} else if (myField.selectionStart || myField.selectionStart == '0') {
							// MOZILLA/NETSCAPE support
							var startPos = myField.selectionStart;
							var endPos = myField.selectionEnd;
							myField.value = myField.value.substring(0, startPos)
								+ myValue
								+ myField.value.substring(endPos, myField.value.length);
						} else {
							myField.value += myValue;
						}
					}
				</script>";

[ShadowXak]

вооо ща работают как надо

[ShadowXak]

еще маленькое пожелание добавить к кнопочкам параметр title, а то некоторым будет не удобно

[beliyadm]

еще маленькое пожелание добавить к кнопочкам параметр title, а то некоторым будет не удобно

там есть тег ALT, title для картинки вроде бы не входит в список допустимых тегов, но работает. Добавлю в следующей версии вместе с подсветкой кода уже

[ShadowXak]

алт есть, но при наведении нет подсказки, покрайней мере в ФФ, в другом не смотрел
---
приложу скрин с будущего сайта, добавил свои кнопочки + добавил титле!

[Darkick]

алт есть, но при наведении нет подсказки, покрайней мере в ФФ, в другом не смотрел

Это ФФ себя так ведёт. Когда-то даже плагин для ФФ ставил, который заставляет его показывать альты.

[ShadowXak]

Это ФФ себя так ведёт. Когда-то даже плагин для ФФ ставил, который заставляет его показывать альты.

ну я почиму то так и подумал сорри за офтоп

[Sulpher]

Ещё есть предложение одно.
Например, мы вставляем ссылочку:

index.php?option=com_content&view=category&layout=blog&id=2

а нужно, чтобы она приняла вот такой вид:

index.php?option=com_content&view=category&layout=blog&id=2

TinyMCE формирует ссылку в такой вид по умолчанию. Было бы здорово внести подобную модификацию и в этот редактор.

[Physicist]

TinyMCE формирует ссылку в такой вид по умолчанию. Было бы здорово внести подобную модификацию и в этот редактор.

Да, было бы неплохо иметь или кнопку "Insert & Encode", или добавить две кнопки "URL Encode"/"URL Decode".

[beliyadm]

То есть заменять & и другие на спецсимволы? А смысл? Я пока не очень понимаю зачем это нужно

[Physicist]

А затем, что правильно писать в исходном коде index.php?option=com_x&Itemid=y вместо index.php?option=com_x&Itemid=y (во втором случае по правилам должна быть ошибка парсинга, т.к. это больше похоже на непонятную сущность &Itemid; — по аналогии с © и т.д.). Замены достаточно сделать через escape/unescape.

[Sulpher]

Найден баг. Не вставляется тег

Код:

<hr id="system-readmore" />

при клике в кнопку "Подробнее...".

upd: проверил - нижние кнопки все не работают: изображение, подробнее, JComments on, JComments off.

[beliyadm]

Жень - об этом баге ShadowXak уже писал выше, исправлено в версии 1.0.2, либо руками

[Sulpher]

Вот блин, а я и не читал ))) нашёл баг и тут же отписался. Сорри

[Sulpher]

Редактор некорректно работает в Joom!Fish 2.0.4.
При попытке вставить тег, курсор перебрасывает в следующее окно и там же теги добавляются.

[Serena Dark]

Замечательная вещь! А можно ли каким-нибудь образом сделать, чтобы автоматически проставлялись тэги перехода на следующую строку?

[beliyadm]

А можно ли каким-нибудь образом сделать, чтобы автоматически проставлялись тэги перехода на следующую строку?

Конкретнее? При нажатии на ентер что ли вставлять <br />?

[Serena Dark]

нет, при копи-паст текста, допустим, и того же самого Wordа, нет переходов на новую строку, все идет сплошняком, не проставлять же вручную. я так понимаю, у вас очищается вообще всякое форматирование, в том числе и символы возврата каретки

[beliyadm]

нет, при копи-паст текста, допустим, и того же самого Wordа, нет переходов на новую строку, все идет сплошняком, не проставлять же вручную. я так понимаю, у вас очищается вообще всякое форматирование, в том числе и символы возврата каретки

правильно, потому что при копировании в окно редактора все переводы строк типа \n пропадают и идет чистый текст, собственно чего и добивался для себя.
Прошу простить, но данный аспект "исправлять" не буду, если есть желание поковыряться и поделиться с будущими поколениями - буду только рад

[attiny]

А для Joomla 1.0 есть версия редактора? Очень нужно.

[beliyadm]

А для Joomla 1.0 есть версия редактора? Очень нужно.

моего редактора нет и не будет, может быть есть другие разработки, давно не интересовался

[..С...е...р...ы...й..]

Нашел мега унифицированный редактор на jQuery, который работает в режиме HTML, bb-code, как CSS редактор и Json.

markItUp! Universal markup editor




и потом вспомнил, что видел что то очень похожее здесь, на форуме.  в общем это к тому, что может те наработки будут полезны в усовершенствовании этого...

[beliyadm]

Нашел мега унифицированный редактор на jQuery, который работает в режиме HTML, bb-code, как CSS редактор и Json.

кстати да, отличное решение. Единственное но - это квери, а админка завязана плотно на мутулз, не очень хочется вклинивать два скрипта.
Версия плагина Html set это по сути и есть то, что писал в своем редакторе, кроме моментального просмотра результата

Но единственных вещей, которых мне не хватает в моем редакторе нет и там - нумерация строк (в принципе мелочь в решении) и самое главное - хтмл подсветки на лету при написании

[..С...е...р...ы...й..]

Но единственных вещей, которых мне не хватает в моем редакторе нет и там - нумерация строк

а нумерацию строк нельзя сделать средствами CSS, например если вставить статичную линейку как бэкграунд (картинка), хотя наверно это не самое лучшее решение...

[smart]

а нумерацию строк нельзя сделать средствами CSS, например если вставить статичную линейку как бэкграунд (картинка), хотя наверно это не самое лучшее решение...

между прочим, очень многие редакторы именно так это и делают, один раз закачается картинка, а дальше уже из кэша... так что вполне адекватное решение, имхо, конечно.

[beliyadm]

между прочим, очень многие редакторы именно так это и делают, один раз закачается картинка, а дальше уже из кэша... так что вполне адекватное решение, имхо, конечно.

совершенно согласен, нумерацию сделать несложно, а вот расскажи мне - как к textarea подключить подсветку строк на лету
Сделать подсветку после сохранения - не проблема, встречал пару скриптов для подсветки по мере ввода на js для iframe (навороченные слишком по мне)
Сколько ковырялся - подходящих идей не нашел и не придумал

[Alldar]

В http://www.rockettheme.com/extensions-joomla/rokpad можно посмотреть как делают подсветку на лету.

Кстати там есть очень важная функция сохранения AJAX материала

[dynamit]

В http://www.rockettheme.com/extensions-joomla/rokpad можно посмотреть как делают подсветку на лету.

Кстати там есть очень важная функция сохранения AJAX материала

А, чем этот не устраивает? и подсветка, и AJAX сохранение, и свои кнопки легко прикручиваются. Прям мечта.
А, можно ли к нему прикрутить плагин Image Manager от JCE, никто не в курсе?

P.S.  Расширенная ImageButton - xtd

[Kverde3]

Было бы очень хорошо если бы настройки были, вроде размера шрифта, кнопок. Чтобы в код не лезть редактировать.

[Kverde3]

Если кто-то сделал какие-нибудь доработки редактора (дополнительные кнопки и подобное) выложите, пожалуйста, будет интересно посмотреть. А то я только пару кнопок добавил и то без картинок

[ShadowXak]

У меня сделано пара тройка кнопак с картинками, но для своих не опубликованных плагинов, что смотреть непонятно нафиг кнопки если некчему подрубать
---
могет тебе кнопочки нарисовать и выложить?
тут много дизайнеров сидит, ты токо скажи вмиг нарисуют.

[Kverde3]

Картинки для кнопок конечно хорошо, но больше идеи интересуют. Вот например до этого как-то не подумал, что можно кнопки плагинов некоторых кнопками редактора заменить .

[4853]

У меня не сохраняется назначенный псевдоним раздела, сохраняет только числовой

[Kverde3]

Псевдоним раздела к плагину редактора не относится.

[ShadowXak]

я вставил следующим образом:

Код:

<img src="'.$imgpath.'/imagepl.png" alt="Картинка плагиным" title="Картинка плагиным" onClick="addText(\'{limage}\', \'{/limage}\') " />&nbsp;
<img src="'.$imgpath.'/guest.png" alt="Скрыть" title="Скрыть часть текста от гостей" onClick="addText(\'{gcontent}\', \'{/gcontent}\') " />&nbsp;
<img src="'.$imgpath.'/design.png" alt="Придать тексту оформление" title="Придать тексту оформление {cdesign style1-5}" onClick="addText(\'{cdesign style1}\', \'{/cdesign}\') " />&nbsp;
<img src="'.$imgpath.'/mossh.png" alt="Вставить заготовленный текст" title="Вставить заготовленный текст {mossh1-5}" onClick="addText(\'{mossh1}\', \'\') " />

сразу после вот этого кода:

Код:

<img src="'.$imgpath.'/h6.png" alt="Заголовок H6" onClick="addText(\'<h6>\', \'</h6>\') " />
<img src="'.$imgpath.'/spacer.png" alt="" />

[Infosakh]

Оффтоп, никто не подскажет как запретит определенный тег? Нужно запретить <ul> и </ul> А то при сохранении статьи они появляются, и не выводится маркерованный список, приходится ручками удалять. Пробовал в визуальном редакторе запретить эти теги, но тогда сам интерфейс визуального редактора карёжится, кнопок почти нет 

[4853]

Псевдоним раздела к плагину редактора не относится.

Разобрался, работает.
Всё новое для себя испытываю на демо версии, локал. Видать доэксперементировался, что что то слетело.
Переустановил, всё пошло
beliyadm, +1

[Infosakh]

Представляю Вашему вниманию мелкую поделку для собственных нужд - невизуальный редактор для Joomla 1.5, по типу Home-site и других редакторов, СodEditor версия 1.0.2

Что умеет:
1 - вставлять заданные теги (минимально необходимый набор)
2 - обрамлять выделенный текст выбранным тегом (выделили текст, нажали В - текст обрамился тегами)
3 - поддерживаемые теги: B, I, U, S, P, BR, UL LI, OL LI, A, IMG, H1-H6

В планах на будущее (никаких сроков реализации не обещаю и обещать не буду)
1 - добавить подсветку синтаксиса HTML
2 - добавить нумерацию строк (под вопросом)
3 - добавить функционал плагина для JCE advlink для добавления ссылки на определенный набор элементов сайта, материалы, ссылки в меню (очень нескоро)
4 - возможность в панель редактора подключать кнопки сторонних плагинов для редактора (от SMART)

Кратко для интересующихся
1 - для добавления собственного тега открываем файл plugins\editors\codeditor.php, находим строки 153-173 и по аналогии добавляем свой тег (не забываем положить картинку в каталог plugins\editors\codeditor\ico)



Changelog

Версия 1.0.2

Исправлена ошибка работы сторонних кнопок редактора под областью ввода (подробнее, изображения и прочие), спасибо ShadowXak

во, как раз на скрине есть, у меня при сохранении статьи <ul> выходят, удаляю, чтобы маркерованный список сохранился в тексте, как запретить этот тег?  

[Kverde3]

Что-то непонятно ul и есть тег маркированного списка, как понять "удаляю ul чтобы список сохранился"?

[Infosakh]

ну удаляю теги <ul>, как на скрине, оставляю <li> и </li> они как раз отвечают за маркерованный список. А если не удалю <ul> и </ul> то во фронпейдже маркерованного списка нет. Ручками уже надоело удалять, вот решил запретить как нибудь этот тег при сохранении. Запихал его в запрещенные теги в самом визуальном редакторе TinyMCE, но тогда сам интерфейс редактора страдает, остается только одна полоска кнопок, жирность шрифта, курсив и еще немного. 

[Kverde3]

Вам надо немного освежить знания по HTML, особенно по поводу списков На скрине показан правильный маркированный и нумерованный список.

если не удалю <ul> и </ul> то во фронпейдже маркерованного списка нет.

Это проблема редактора, или стилей.

[Infosakh]

То что это не редактор глючит 100% так как другой ставил такая же беда. Дело в том что не на многих сайтах используется маркерованный список. Например в опере вообще не возможно через админку работать с маркерованным списком, он постоянно при сохранении материала ставит эти теги. Поэтому работаю только через IE 

[Kverde3]

Похожий редактор но с подсветкой синтаксиса нашел, только кнопок нет. http://ercan.us/extensions/codemirror.html
Может, поможет в добавлении подсветки. Её очень не хватает

[4853]

ну удаляю теги <ul>, как на скрине, оставляю <li> и </li> они как раз отвечают за маркерованный список. А если не удалю <ul> и </ul> то во фронпейдже маркерованного списка нет. Ручками уже надоело удалять, вот решил запретить как нибудь этот тег при сохранении. Запихал его в запрещенные теги в самом визуальном редакторе TinyMCE, но тогда сам интерфейс редактора страдает, остается только одна полоска кнопок, жирность шрифта, курсив и еще немного. 

Если beliyadm не против.
Естественно интерпритация пошла по образцу, по другому не соображаю.
Добавил раздельное добавление <li>, <ul>, <ol>, ну и мне нужное <small>.
Изменение можно сделать прямым копированием

[beliyadm]

Добавил раздельное добавление <li>, <ul>, <ol>

Конечно не против, только за
У меня изначально и было разделение ul li ol отдельными кнопками, но коллеги перед релизом убедили сделать вставку сразу

[Infosakh]

Если beliyadm не против.
Естественно интерпритация пошла по образцу, по другому не соображаю.
Добавил раздельное добавление <li>, <ul>, <ol>, ну и мне нужное <small>.
Изменение можно сделать прямым копированием

решился поставить данный невизуальный редактор, но как им пользоваться то? Плагин включил, в статьях или в VM отключаю визуальный редактор, этот невизуальный не появляется 

[beliyadm]

решился поставить данный невизуальный редактор, но как им пользоваться то? Плагин включил, в статьях или в VM отключаю визуальный редактор, этот невизуальный не появляется 

как и любым другим. В настройках пользователя указать нужный плагин редактора

[Infosakh]

нет, при указании у пользователя этот редактор все равно не выводится, остается дефолтный, ТиниМСЕ. Поставил по дефолту этот редактор, появился, сейчас попробую карточку завести в VM посмотрим вставляет теги ul и /ul при сохранении

[Infosakh]

а так должно быть, что при вставке текста обычным копипастом все теги исходного текста убираются, и вставляется чистый текст без единого тега?

[hozman]

 Я вот только не понял, в чё визуальность этого редактора... разница от не велика от других редакторов. А визуальности то никакой нет... Странное у вас какое-то обсуждение.

[beliyadm]

Я вот только не понял, в чё визуальность этого редактора...

Прочитайте заголовок еще раз и еще три раза - "невизуальный редактор"

[vov41k]

Здравствуйте.

Просьба добавить кнопки:
1. выравнивание - по левому краю, по правому, по центру
2. добавление флеш ролика (желательно с выбором размера)
3. цитата
4. Добавление изображения

[dynamit]

Здравствуйте.

Просьба добавить кнопки:
1. выравнивание - по левому краю, по правому, по центру
2. добавление флеш ролика (желательно с выбором размера)
3. цитата
4. Добавление изображения

сильная просьба, на пять минут делов-то 

как вариант посмотрите - Расширенная кнопка вставки изображения (ImageButton - xtd)

[orchanin]

Вот если бы еще работал ctrl+z отменить действие.

[Darkick]

а оно и работает - это уже от браузёра зависит

[orchanin]

Спасибо так и есть!

[Pandemonium]

О! класс! это просто супер, то что нужно было! Спасибо за такой редактор!

[StyleT]

Спасибо за редактор, допилил его под BBCode и радуюсь)

[ABCroNews]

Будут ли еще какие-нибудь дополнения и новые версии плагина СodEditor?

[Frizzka]

Подскажите пожалуйста решение, для автоматической вставки тега BR при нажатии не энтер, так же как и в TinyMCE !! очень нужно...

[Dimon]

xfg

[Dimon]

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

[ShadowXak]

я вставил следующим образом:

Код:

<img src="'.$imgpath.'/imagepl.png" alt="Картинка плагиным" title="Картинка плагиным" onClick="addText(\'{limage}\', \'{/limage}\') " />&nbsp;
<img src="'.$imgpath.'/guest.png" alt="Скрыть" title="Скрыть часть текста от гостей" onClick="addText(\'{gcontent}\', \'{/gcontent}\') " />&nbsp;
<img src="'.$imgpath.'/design.png" alt="Придать тексту оформление" title="Придать тексту оформление {cdesign style1-5}" onClick="addText(\'{cdesign style1}\', \'{/cdesign}\') " />&nbsp;
<img src="'.$imgpath.'/mossh.png" alt="Вставить заготовленный текст" title="Вставить заготовленный текст {mossh1-5}" onClick="addText(\'{mossh1}\', \'\') " />

сразу после вот этого кода:

Код:

<img src="'.$imgpath.'/h6.png" alt="Заголовок H6" onClick="addText(\'<h6>\', \'</h6>\') " />
<img src="'.$imgpath.'/spacer.png" alt="" />

Вот же я писал как вставить дополнительные теги для дополнительных кнопок