Как установить HTML Редактор NicEdit

Доброго времени суток, уважаемые читатели блога SoftMaker.kz. Сегодня я хочу рассказать о том, как установить HTML редактор NicEdit. После установки HTML редактора NicEdit вы с лёгкостью сможете редактировать страницы Вашего сайта напрямую из Вашего браузера (например, firefox). Если вы хотите скачать NicEdit перейдите на страницу со статьёй NicEdit — редактор расширенного текста. А в конце статьи вы можете познакомиться с бесплатным материалом по ускорению загрузки вашего сайта. Итак, поехали!

Чтобы установить NicEdit необходимо в любом месте Вашей веб-страницы прописать две строчки на JavaScript:

<script src="https://site.softmaker.kz/files/b>" type="text/javascript"></script>

<script type="text/javascript">
	bkLib.onDomLoaded(
		Вызов функций
	);
</script>

ПутьДоФайлаJS — Прописываем где лежит наш файл nicEdit.js.

Вызов функций — В этом месте происходит вызов функций, которые изменяют вид HTML редактора NicEdit.

 

Пример 1:

Если Вы хотите, чтобы все тэги textarea на странице Вашего сайта были преобразованы в редактор NicEdit, тогда нужно написать следующее:

<script type="text/javascript" src="https://site.softmaker.kz/files/b>"></script>

<script type="text/javascript"> 
	bkLib.onDomLoaded( 
		function() {
			nicEditors.allTextAreas() 
		} 	
	);
</script>

Выражение “src=»https://site.softmaker.kz/files/b>»” указывает на то, что файл nicEdit.js лежит в корневой директории на вашем сервере. Выражение “function() { nicEditors.allTextAreas() }” преобразует все тэги textarea на Вашей веб-странице в текстовый редактор NicEdit.

Пример 2:

Если нужно изменить только один тэг textarea, то можем написать:

<script src="https://site.softmaker.kz/files/NicEdit/nicEdit.js" type="text/javascript"></script>

<script type="text/javascript"> 
bkLib.onDomLoaded(
	function() {
		new nicEditor({
			fullPanel : true
		}
		).panelInstance("area1");
	}
); 

 <div>
	<textarea cols="50" id="area1"> 
	</textarea>
 </div>

Как видим для того, чтобы указать конкретный тэг textarea нужно указать в выражении:

function() {
	new nicEditor(
	{fullPanel : true}
	).panelInstance("area1");
}

название id тэга, в нашем случае это id=»area1«.

Пример 3:

Чтобы на одной странице разместить сразу несколько тэгов textarea с разными наборами кнопок нужно написать так:

Первый, одна кнопка:

<script src="https://site.softmaker.kz/files/NicEdit/nicEdit.js" type="text/javascript"></script> 

<script type="text/javascript">

bkLib.onDomLoaded( 
function() { 
	new nicEditor({
		buttonList : ['fontSize']
		}
	).panelInstance("area1");
}
);

<div>
	<textarea cols="50" id="area1"> 
	</textarea>
</div>

Второй, девять кнопок:

bkLib.onDomLoaded( 
function() {
new nicEditor({
	buttonList : 
	['fontSize','bold','italic','underline','strikeThrough',
	'subscript','superscript','html','image']
	}
	).panelInstance('area2'); 
}
);

<div>
	<textarea cols="50" id="area2"> 
	</textarea>
</div>

buttonList — это список указываемых Вами кнопок.

38 ответы
  1. Максим говорит:

    Как то странно редактор работает…непутево…т.е. набранный текст в блоке администратора после его сохранения не совпадает уже на самой страничке сайте.

  2. Виктор говорит:

    У ворда другое фарматирование, из ворда в блокнот, потом из блокнота в редактор и форматируй

  3. Виктор говорит:

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

  4. Максим говорит:

    Будем привыкать. Но уже стало получацца…намана.:)

  5. Виктор говорит:

    В блокнот вставляешь, чтобы убралось вордовское форматирование, потом в блокноте выделяешь текст, копируешь и форматируешь в редакторе.

  6. Александр говорит:

    Почему не отображаются не все иконки? Только форматирование текста.

  7. Александр говорит:

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

  8. Softmaker говорит:

    У меня была такая проблема, т.к. я неправильно указал пути, посмотри в файле .js параметр iconsPath : ‘../../files/HTML/NicEdit/nicEditorIcons.gif’.
    Также не мешало бы другие пути проверить.

  9. дима говорит:

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

  10. Timophey говорит:

    Спасибо за статью! Очень помогла.

  11. kompolina говорит:

    Мда… зря регистрировалась… Вы бы лучше сказали, как сделать так, чтобы эдитор отображался в одной файле (админке как бы), а выкладывал текст в другой файл. Т.е. заполнил в админке текст, а результат получил на главной сайта в определенном месте…

  12. Softmaker говорит:

    Извините, что не смог заранее предугадать Ваши потребности!

  13. Антон говорит:

    Классная вещь!! только вот что смущает, когда добавляешь картинку она качается на http://img715.imageshack.us а как сделать закачку на свой сайт?

  14. Мария говорит:

    Можно ли дописать скрипт, чтобы был выбор стиля написания (добавлялся бы тэг style="text1") в выпадающем меню типа "Font Size".
    Заранее спасибо за ответ.

  15. Алексей говорит:

    Єсть проблема!!! Програмирую на php. В базу MySql не заносит текст так как двойные кавычки призводят к ошыбке запроса Insert. Что делать? Подскажыте пожалуйста!!!!!!!!!!

  16. Softmaker говорит:

    mysql_real_escape_string — мнемонизирует специальные символы в строке для использования в операторе SQL с учётом текущего набора символов/charset соединения.

    ?php
    $link = mysql_connect(‘localhost’, ‘mysql_user’, ‘mysql_password’);
    $item = "Zak’s and Derick’s Laptop";
    $escaped_item = mysql_real_escape_string($item);
    printf ("Escaped string: %s\n", $escaped_item);
    ?>

    На выводе:Escaped string: Zak\’s and Derick\’s Laptop

  17. Softmaker говорит:

    Чтобы не было ошибки нужно мнемонизировать кавычки, т.е. перед этим специальным символом поставить "\" — обратный слэш.

  18. Softmaker говорит:

    htmlspecialchars — подставляет мнемонические символы вместо знаков тегов и исполняемых выражений.

  19. Softmaker говорит:

    Выполняются трансляции:

    ‘&’ (амперсанд) становится ‘&amp;’

    ‘"’ (double quote) становится ‘&quot;’ когда ENT_NOQUOTES не установлен

    »’ (single quote) становится ‘&#039;’, только когда установлен ENT_QUOTES.

    ‘<‘ (less than) становится ‘&lt;’

    ‘>’ (greater than) становится ‘&gt;’

    Пример 1. htmlspecialchars()
    $new = htmlspecialchars("<a href=’test’>Test</a>", ENT_QUOTES);

  20. Алексей говорит:

    Всьо понятно, огромное спасибо!

  21. Владимир говорит:

    Девочка-то вопрос по существу задала. Зря отшутились!
    Вставляю редактор в HTML страницу.
    Можно его использовать как редактор для комментариев? И как вывести/сохранить это потом на этой же или (как в ее случае) любой другой странице. Без .php просто чисто на HTML странице?
    Ну и размер окна… Кошмар, или админ в нормальном отписывается?

  22. Владимир говорит:

    Первый раз вижу, обновил страницу и опять Логин вводить надо!? Это уже у вас на сайте.

  23. bullDog говорит:

    Теряете читателей со своими "*Просмотр только для зарегистрированных посетителей!"

  24. Дмитрий говорит:

    У меня данные не попадают в post запрос

  25. Kirill говорит:

    Возможно форматировать текст, при копирование в textarea, текст с стилями с другого сайта?

  26. Олег говорит:

    Здравствуйте, подскажите почему редактор NicEdit загружается только в firefox?

  27. Softmaker говорит:

    Здравствуйте, Олег! Проверил в Хроме, работает, да и в Опере, насколько я знаю, тоже работает. Может неправильно установили?

Комментарии закрыты.