Различия

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

--- software:development:web:docs:web:wysiwyg:nicedit [2026/01/07 15:08] – [Developing with NicEdit] VladPolskiy
+++ software:development:web:docs:web:wysiwyg:nicedit [2026/01/07 16:02] (текущий) – [Дополнения и Файлы] VladPolskiy
@@ Строка 206: / Строка 206: @@
 </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}}