Различия

Показаны различия между двумя версиями страницы.

--- software:development:web:docs:web:wysiwyg:nicedit [2026/01/07 14:26] – внешнее изменение 127.0.0.1
+++ software:development:web:docs:web:wysiwyg:nicedit [2026/01/07 16:02] (текущий) – [Дополнения и Файлы] VladPolskiy
@@ Строка 42: / Строка 42: @@
 The nicEditor instance class creates the editable area for a single element and provides a number of useful methods to developers.  You can get a reference to a specific nicInstance object using
 ''nicEditors.findEditor''
+|''[nicInstance].getContent()''|Returns the current HTML of the nicInstance For example: ''nicEditors.findEditor('myArea2').getContent();'' returns the HTML in the content editor that replaced the element on the page with ID 'myArea2'.|
+|''[nicInstance].setContent(HTML)''|Set the current HTML in the editor instance For example: ''nicEditors.findEditor('myArea2').setContent''('''<strong>Some HTML</strong>'' here');|
+|''[nicInstance].saveContent()''|Only for nicInstances that are replacing a ''<textarea>'' this method syncs the content of the editor with the textarea value. This is done automatically if the form with the orginal ''<textarea>'' is submitted. However, you may want to explitly do the syncing yourself.|
+===Class nicEditor===
+The nicEditor class is a container for a number of nicEditor instances and 1 nicPanel.
+Because of this you can use nicEditor in 2 ways:
+  - Create a single control panel with setPanel() then use addInstance multiple times to create as many editable areas on the page you need that are controlled from a single control panel.
+  - Use the panelInstance() to create a combined content area/panel editor.  If you use this option and want multiple editors you should create multiple nicEditor instances.
+|''var myNicEditor = new nicEditor()''|Creates a new nicedit object. A single instance of nicEditor contains:- 1 or more editor instances (nicInstance/nicIFrameInstance) - 1 nicPanel|
+|''myNicEditor.addInstance('someElementsID')''|Adds a nicedit instance to allow inline editing of the given elements ID|
+|''myNicEditor.removeInstance('someElementID')''	|Removes the nicedit instance with the given ID, returning it to the orginal element with the content within the element.|
+|''myNicEditor.setPanel('someElementID')''	|Append an editor control panel at the end of the given ID. Normally the element is blank and with a fixed CSS width you would like the panel set.|
+|''myNicEditor.panelInstance('someElementID')''	|Creates an inline content editor with attached control panel on top of the element.|
+|''myNicEditor.instanceById('someElementID')''	|Find a nicInstance object by ID that was added to this nicEditor|
+|''myNicEditor.floatingPanel()''	|Activate a floating panel. First add editor instances to this editor with addInstance() then call floatingPanel(). When a instance is selected, a floating panel will appear above/below it.  * Requires nicFloating plugin|
 ==== Configuration Options ====
+NicEdit обладает широкими возможностями настройки: параметры конфигурации передаются при создании объекта NicEditor. Передавайте конфигурацию при вызове:
+''new nicEditor({CONFIG HERE})''
+Добавьте ''.panelInstance('ID TO TEXTAREA HERE')'', чтобы добавить редактор в текстовое поле.
+Вы можете указать несколько параметров конфигурации, они представлены в формате ''JSON: {fullPanel : true, iconsPath : 'nicEditorIcons.gif', maxHeight : 200}''
+Обратите внимание, что некоторые параметры конфигурации, такие как список кнопок, не будут работать, если вы не загрузите версию NicEdit и не используете её на своём веб-сервере.
+=== Доступные параметры конфигурации: ===
+|fullPanel|Если установлено значение true, будет создан экземпляр редактора со всеми доступными кнопками. Если значение ''false'' (по умолчанию), для управления отображением кнопок будет использоваться buttonList.|
+|buttonList|Например, массив кнопок в редакторе. ''['жирный','курсив','подчеркнутый','слева','по центру']''|
+|iconsPath|Строковый путь к файлу значков, например, ''images/nicEditorIcons.gif''.|
+|maxHeight|Высота в пикселях, за пределы которой редактор не должен автоматически расширяться. Область редактирования может быть больше указанного значения, но в этом случае будут использоваться полосы прокрутки. Для редактора с фиксированной высотой (не динамически увеличивающегося) установите значение maxHeight и style="height: X" равным одному и тому же значению в пикселях.|
+|externalCSS|Относительный путь к внешней таблице стилей, применяемой к экземплярам iframe nicEditor (этот режим работы используется только в FF2). Пример: ''{externalCSS : 'mysite.css'}''|
+|''uploadURI''|Абсолютный или относительный URL-адрес скрипта-приемника nicUpload. Позволяет загружать изображения из nicedit на ваш собственный сервер. __*Требуется nicUpload__ Пример:''{uploadURI: ' http://yourdomain.com/nicUpload.php '}''. По умолчанию ( http://files.nicedit.com/ ) используется сервер Nicedit, а файлы загружаются на Imageshack. PHP-версию скрипта для загрузки файлов можно найти по адресу: http://nicedit.com/svn/nicedit/trunk/nicUpload/php/nicUpload.php|
+=== List of Buttons for buttonList option ===
+  * 'bold'
+  * 'italic'
+  * 'underline'
+  * 'left'
+  * 'center'
+  * 'right'
+  * 'justify'
+  * 'ol'
+  * 'ul'
+  * 'subscript'
+  * 'superscript'
+  * 'strikethrough'
+  * 'removeformat'
+  * 'indent'
+  * 'outdent'
+  * 'hr'
+  * 'image'
+  * 'upload' * requires nicUpload
+  * 'forecolor'
+  * 'bgcolor'
+  * 'link' * requires nicLink
+  * 'unlink' * requires nicLink
+  * 'fontSize' * requires nicSelect
+  * 'fontFamily' * requires nicSelect
+  * 'fontFormat' * requires nicSelect
+  * 'xhtml' * required nicCode
 ===== Plugin Reference=====
 ==== Saving via AJAX ====
+NicEdit поддерживает наличие кнопки сохранения на панели инструментов, которую пользователи могут нажать для сохранения контента.
+Для использования этого режима вам потребуется базовое знание JavaScript, и вы должны выполнить следующие шаги:
+  * Сначала убедитесь, что вы настроили загрузку с помощью плагина nicSave.
+  * Используйте параметр onSave при объявлении экземпляра nicEditor, например:
+<code js script.js>
+bkLib.onDomLoaded ( function ( ) {
+  new nicEditor ( { fullPanel: true , onSave: function ( content, id, instance ) {
+    alert ( 'Кнопка сохранения нажата для элемента ' + id + ' = ' + content ) ;
+  } } ) . panelInstance ( 'myArea2' ) ;
+} ) ;
+</code>
+  * Поскольку мы установили параметр onSave для нашей функции обратного вызова и добавили кнопку «Сохранить», значок сохранения появится на панели инструментов.
+  * При нажатии кнопки будет запущена функция обратного вызова onSave с тремя параметрами.
+    * Первый параметр — это содержимое экземпляра nicEditor.
+    * Второй параметр — это идентификатор элемента, преобразованного в nicEditor.
+    * Третий параметр — это ссылка на nicInstance (подробнее об этом см. в документации по [[nicedit#Javascript API|Javascript API]]).
 ==== XHTML Compliant Output ====
+=== В чем проблема?
+NicEdit генерирует некорректный, не соответствующий стандартам код, который выглядит по-разному в каждом браузере и приводит к сбоям в работе редактора, если редактирование выполняется в браузере, отличном от того, который использовался для создания контента.
+=== Почему это проблема? ===
+Применение стилей и очистка HTML-кода — самая сложная задача при создании WYSIWYG-редактора, и я так и не смог её решить с помощью nicEdit. Для полностью совместимой с XHTML системы необходимы два компонента:
+Во-первых, нам нужно реализовать все кнопки nicEdit таким образом, чтобы они перестали использовать поведение ''execCommand()'' браузера и применяли свои стили непосредственно к выделению/диапазонам. Это решит проблемы, подобные тем, с которыми вы сталкивались при применении команд к различным способам применения одного и того же стиля (например, ''<b>'', ''<strong>'', ''<span style="font-weight: bold">''), и позволит редактору обрабатывать все три стиля в своем содержимом, а не использовать стандартное поведение браузера, которое не отличается гибкостью.
+Во-вторых, nicEdit будет выполнять очистку HTML-кода во время доступа (подобно тому, как это пытается делать nicXHTML, но пока с ошибками), чтобы обрабатывать другой контент, который не применяется через элементы управления редактора (например, при вставке контента).
+=== Что доступно сейчас? ===
+На данный момент плагин ''nicXHTML'' находится в экспериментальной стадии и не решает эту проблему полностью. Чтобы попробовать его в действии, скачайте плагин с nicXHTML, а затем добавьте ''{xhtml : true}'' в параметры. Известно множество проблем с его реализацией.
+Ещё один вариант, который я рекомендовал и который может подойти некоторым, — это использование стратегий очистки на стороне сервера, таких как функции ''tidy'' в PHP, для очистки HTML-кода, создаваемого `nicEdit`. Однако это решение не будет доступно всем, усложняет процесс и не является идеальным.
+=== Когда я могу ожидать исправления этой проблемы? ===
+Предстоит много работы, сделать это правильно немного сложнее, чем просто взять другую реализацию, например tinyMCE, и интегрировать её в nicEdit. NicEdit — это побочный проект, у меня есть основная работа, поэтому у меня нет нескольких свободных недель, которые потребовались бы для этого. Но я буду продолжать работать, когда смогу, и буду рад любым исправлениям для nicXHTML, а также любым новым плагинам, которые работают лучше (я включу любые сторонние плагины в загрузчик).
+== Пример использования функции ''tidy'' в PHP для очистки кода: ==
+<code js script.js>
+tidy_repair_string(
+         $_POST['body'],
+            array(
+                'show-body-only' => true,
+                'doctype' => '-//W3C//DTD XHTML 1.0 Transitional//EN',
+                'output-xhtml' => true
+                  )
+);
+</code>
 ===== Customization =====
 ==== Developing with NicEdit ====
+Разработка дополнительных плагинов и внесение других изменений в исходный код NicEdit не представляет сложности.
+== Ознакомьтесь с кодом.==
+Сначала получите копию исходного кода, клонировав репозиторий NicEdit из SVN.
+svn co http://svn.nicedit.com/trunk src
+== Используйте Кодекс разработки ==
+Для использования NicEdit с набором отдельных JavaScript-файлов для разработки вам потребуется включить их в раздел <head> создаваемой вами тестовой страницы. Вот пример для начала работы.
+<code php index.html>
+<html>
+<head>
+<script src="src/nicCore/bkLib.js" type="text/javascript"></script>
+<script src="src/nicCore/nicConfig.js" type="text/javascript"></script>
+<script src="src/nicCore/nicCore.js" type="text/javascript"></script>
+<script src="src/nicCore/nicInstance.js" type="text/javascript"></script>
+<script src="src/nicCore/nicIFrameInstance.js" type="text/javascript"></script>
+<script src="src/nicCore/nicPanel.js" type="text/javascript"></script>
+<script src="src/nicCore/nicButton.js" type="text/javascript"></script>
+<script src="src/nicCore/nicPlugin.js" type="text/javascript"></script>
+<script src="src/nicPane/nicPane.js" type="text/javascript"></script>
+<script src="src/nicSelect/nicSelect.js" type="text/javascript"></script>
+<script src="src/nicButtonTips/nicButtonTips.js" type="text/javascript"></script>
+<script src="src/nicAdvancedButton/nicAdvancedButton.js" type="text/javascript"></script>
+<script src="src/nicLink/nicLink.js" type="text/javascript"></script>
+<script src="src/nicImage/nicImage.js" type="text/javascript"></script>
+<script src="src/nicCode/nicCode.js" type="text/javascript"></script>
+<script src="src/nicColors/nicColors.js" type="text/javascript"></script>
+<script src="src/nicXHTML/nicXHTML.js" type="text/javascript"></script>
+<script src="src/nicBBCode/nicBBCode.js" type="text/javascript"></script>
+</head>
+<body>
+<textarea style="width: 400px; height: 150px;" id="myArea2">
+This is some TEST CONTENT
+</textarea>
+<script>
+bkLib.onDomLoaded(function(){
+  var myInstance = new nicEditor().panelInstance('myArea2');
+});
+</script>
+</body>
+</html>
+</code>
 ==== Creating a Plugin ====
+Добавить плагин/кнопки в NiceDit несложно. Сначала убедитесь, что вы настроили свою [[nicedit#Developing with NicEdit|среду разработки]], а затем выполните следующие шаги:
+  - Создайте новую папку для вашего плагина в каталоге src/, в этом примере я использовал nicExample.
+  - Создайте файл с тем же именем в папке src/nicExample/nicExample.js
+  - Вы можете использовать приведенный ниже код в качестве отправной точки для вашего плагина.
+<code js script.js>
+/**
+* nicExample
+* @description: An example button plugin for nicEdit
+* @requires: nicCore, nicPane, nicAdvancedButton
+* @author: Brian Kirchoff
+* @version: 0.9.0
+*/
+/* START CONFIG */
+var nicExampleOptions = {
+    buttons : {
+        'example' : {name : __('Some alt text for the button'), type : 'nicEditorExampleButton'}
+    }/* NICEDIT_REMOVE_START */,iconFiles : {'example' : 'src/nicExample/icons/save.gif'}/* NICEDIT_REMOVE_END */
+};
+/* END CONFIG */
+var nicEditorExampleButton = nicEditorButton.extend({
+  mouseClick : function() {
+    alert('The example save button icon has been clicked!');
+  }
+});
+nicEditors.registerPlugin(nicPlugin,nicExampleOptions);
+Car Shipping
+</code>
+  * Скопируйте и вставьте код в свой JS-файл.
+  * Создайте папку icons в папке вашего плагина (например, src/nicExample/icons) и поместите туда свои иконки (в данном случае  {{:software:development:web:docs:web:wysiwyg:save_buttom_nicedit.gif?|save.gif}}).
+== Чтобы объяснить различные части примера: ==
+<code php>
+/**
+* nicExample
+* @description: Пример плагина кнопок для nicEdit
+* @requires: nicCore, nicPane, nicAdvancedButton
+* @автор: Брайан Кирхофф
+* @version: 0.9.0
+*/
+</code>
+Это специальный блок комментариев, используемый скриптами сжатия nicEdit, и он должен присутствовать в каждом плагине, который необходимо включить в загрузчик.
+Большинство полей понятны. Параметр @requires должен указывать, какие плагины являются зависимостями для вашего плагина (используется конфигуратором загрузки).
+<code php>
+/* НАЧАЛО КОНФИГУРАЦИИ */
+var nicExampleOptions = {
+    кнопки: {
+        'example' : {name : __('Некоторый альтернативный текст для кнопки'), type : 'nicEditorExampleButton'}
+    }/* NICEDIT_REMOVE_START */,iconFiles : {'example' : 'src/nicExample/icons/save.gif'}/* NICEDIT_REMOVE_END */
+};
+/* КОНЕЦ КОНФИГУРАЦИИ */
+</code>
+В разделе config вы настраиваете конфигурацию кнопок для вашего плагина. Параметр 'type' в объекте buttons указывает конкретный класс, который будет использоваться (по умолчанию это будет nicButton), куда вы поместите код ваших кнопок.
+<code php>
+/* NICEDIT_REMOVE_START */
+</code>
+Блоки удаляются из выходных данных скриптами сборки.
+В поле iconFiles следует указывать относительное местоположение отдельных значков кнопок в формате GIF, находящихся в разработке. В данном случае значение ключа 'example' и элемент iconFiles с указанным путем должны совпадать.
+<code php>
+/* НАЧАЛО КОНФИГУРАЦИИ */
+</code>
+Используется только для предотвращения сжатия пробелов в разделах конфигурации скриптом сборки.
+<code js script.js>
+var nicEditorExampleButton = nicEditorButton.extend({
+  mouseClick : function() {
+    alert('Пример значка кнопки сохранения был нажат!');
+  }
+});
+</code>
+Это класс, который определяет вашу кнопку; в данном случае мы переопределяем метод ''mouseClick()'' для обработки нажатия кнопки.
+''Существует также класс nicEditorAdvancedButton'', который могут использовать кнопки плагинов, которым требуется, чтобы функциональность панели имела форму (см. src/nicLink/nicLink.js) для примера того, как это можно сделать.
+\\
+''nicEditors.registerPlugin(nicPlugin,nicExampleOptions);''
+\\
+Это зарегистрирует ваш плагин, чтобы все новые созданные экземпляры могли его использовать (убедитесь, что вы используете ''{fullPanel : true}'' или задаете buttonList с идентификатором кнопки, в данном случае 'example'), и вы сможете увидеть свою новую кнопку на панели инструментов nicEdit.
+== Вскоре: ==
+- Как использовать скрипты сборки для упаковки вашего плагина (а не просто запускать его как отдельный JS-файл) после того, как он заработает (пока что напишите мне на почту или опубликуйте свой плагин на форуме, если он окажется полезным, я даже включу его в официальный загрузчик Nicedit).
 ==== Integration with NicEdit events ====
+ Ядро nicEdit отправляет несколько внутренних событий, которые можно использовать в плагинах и в вашем собственном JavaScript при расширенной интеграции редактора в ваши веб-сайты.
+|blur|Отправляется, когда экземпляр редактора теряет фокус.|
+|focus|Отправлять, когда редактор получает фокус (то есть, когда кто-то щелкает внутри него).|
+|key|Когда пользователь нажимает сочетание клавиш (например, Ctrl+B).|
+|add|Событие срабатывает при добавлении нового экземпляра.|
+|panel|	Событие срабатывает при инициализации панели инструментов для новых экземпляров (это предпочтительное событие, если вы хотите добавить функцию при создании экземпляров NicEdit).|
+Для привязки функций к внутренним событиям NicEdit используйте метод ''addEvent'' объекта nicInstance.
+\\
+''[some nicedit instance].addEvent([event name], [callback function]);''
+\\
+События также часто используются для того, чтобы сообщить о завершении загрузки редактора.
+<code js script.js>
+bkLib.onDomLoaded(function(){
+  var myEditor = new nicEditor({fullPanel : true }).panelInstance('myArea2');
+  myEditor.addEvent('add', function() {
+    alert( myEditor.instanceById('myArea2').getContent() );
+  });
+});
+</code>
+Ещё один пример использования событий для определения момента размытия изображения в редакторе.
+<code js script.js>
+<script>
+bkLib.onDomLoaded(function(){
+  var myInstance = new nicEditor().panelInstance('myArea2');
+  myInstance.addEvent('blur', function() {
+    // Your code here that is called whenever the user blurs (stops editing) the nicedit instance
+  });
+});
+</script>
+</code>
 ==== How to translate nicEdit (with Spanish example) ====
+  * Скачать версию для разработчиков
+  * Откройте файл nicEdit.js
+  * Перейдите к этим нескольким строкам и отредактируйте текст справки, например, перевод на испанский будет выглядеть так:
+== Примерно строка 252: ==
+<code js script.js>
+var nicEditorConfig = bkClass.extend({
+    buttons : {
+        'bold' : {name : __('Negrita'), command : 'Bold', tags : ['B','STRONG'], css : {'font-weight' : 'bold'}, key : 'b'},
+        'italic' : {name : __('Cursiva'), command : 'Italic', tags : ['EM','I'], css : {'font-style' : 'italic'}, key : 'i'},
+        'underline' : {name : __('Subrayado'), command : 'Underline', tags : ['U'], css : {'text-decoration' : 'underline'}, key : 'u'},
+        'left' : {name : __('Alinear texto a la izquierda'), command : 'justifyleft', noActive : true},
+        'center' : {name : __('Centrar texto'), command : 'justifycenter', noActive : true},
+        'right' : {name : __('Alinear texto a la derecha'), command : 'justifyright', noActive : true},
+        'justify' : {name : __('Justificar texto'), command : 'justifyfull', noActive : true},
+        'ol' : {name : __('Insertar lista ordenada'), command : 'insertorderedlist', tags : ['OL']},
+        'ul' :     {name : __('Insertar lista desordenada'), command : 'insertunorderedlist', tags : ['UL']},
+        'subscript' : {name : __('SubIndice'), command : 'subscript', tags : ['SUB']},
+        'superscript' : {name : __('SuperIndice'), command : 'superscript', tags : ['SUP']},
+        'strikethrough' : {name : __('Tachar'), command : 'strikeThrough', css : {'text-decoration' : 'line-through'}},
+        'removeformat' : {name : __('Borrar formato'), command : 'removeformat', noActive : true},
+        'indent' : {name : __('Identar'), command : 'indent', noActive : true},
+        'outdent' : {name : __('Eliminar identado'), command : 'outdent', noActive : true},
+        'hr' : {name : __('Barra separadora'), command : 'insertHorizontalRule', noActive : true}
+</code>
+== Примерно строка 1046: ==
+<code js script.js>
+var nicLinkOptions = {
+    buttons : {
+        'link' : {name : 'Enlazar', type : 'nicLinkButton', tags : ['A']},
+        'unlink' : {name : 'Eliminar enlace',  command : 'unlink', noActive : true}
+    }
+</code>
+== Примерно строка 1120: ==
+<code js script.js>
+var nicCodeOptions = {
+    buttons : {
+        'xhtml' : {name : 'Visualizar HTML', type : 'nicCodeButton'}
+    }
+};
+</code>
+== Примерно строка 1131: ==
+<code js script.js>
+    addPane : function() {
+        this.addForm({
+            '' : {type : 'title', txt : 'Editar HTML'},
+            'code' : {type : 'content', 'value' : this.ne.selectedInstance.getContent(), style : {width: '340px', height : '200px'}}
+        });
+    },
+</code>
 ===== Дополнения и Файлы =====
   * {{ :software:development:web:docs:web:wysiwyg:nicedit-5861cebf02e167b2cc8ca4672c3a478d.zip |Сжатый NicEdit (без пробелов и комментариев). Рекомендуется для развертывания NicEdit.}}
   * {{ :software:development:web:docs:web:wysiwyg:nicedit-4ad98f51fafd99ef01e4eff35af7c570.zip |Несжатая версия NicEdit для разработки. Используйте её только для отладки или разработки NicEdit.}}
+  * {{:software:development:web:docs:web:wysiwyg:ajax-loader.gif?|}}
+  * [[nicedit_nicedit_latest_js|nicEdit-latest.js]]
+  * [[nicedit_nicedit_js_n|nicEdit.js]]
+  * {{:software:development:web:docs:web:wysiwyg:nicediticons-latest.gif?|nicEditIcons-latest.gif}}
+  * {{:software:development:web:docs:web:wysiwyg:niceditoricons_1_.gif?|nicEditorIcons.gif}}