cleanprice
Loading...
Журнал «Все для химчистки и прачечной»
Поиск
Вопросы
Вход
Журнал
Пособия

Журнал
Пособия
Вход
Поиск
Вопросы
22.04.2021

Extends plugins for adding CKFinder 3 to Summernote WYSIWYG editor

Extends plugins for adding CKFinder 3 to Summernote WYSIWYG editor

The example below shows the Summernote-ext-CKfinder plugin for integrating CKFinder into Summernote WYSIWYG editor. All you have to do is adding some additional configuration options to CKEditor and Summernote. Please, have a look at software documentation.

The plugin for the Summernote WYSIWYG editor.

  1. (function(factory) {
  2.   if (typeof define === 'function' && define.amd) {
  3.     // AMD. Register as an anonymous module.
  4.     define(['jquery'], factory);
  5.   } else if (typeof module === 'object' && module.exports) {
  6.     // Node/CommonJS
  7.     module.exports = factory(require('jquery'));
  8.   } else {
  9.     // Browser globals
  10.     factory(window.jQuery);
  11.   }
  12. }(function($) {
  13.   // Extends plugins for adding CKFinder 3.
  14.   //  - plugin is external module for customizing.
  15.   $.extend($.summernote.plugins, {
  16.     /**
  17.      * @param {Object} context - context object has status of editor.
  18.      */
  19.     'CKFinder': function(context) {
  20.       var self = this;
  21.  
  22.       // ui has renders to build ui elements.
  23.       //  - you can create a button with `ui.button`
  24.       var ui = $.summernote.ui;
  25.  
  26.       // add CKFinder button
  27.       context.memo('button.CKFinder', function() {
  28.         // create button
  29.         var button = ui.button({
  30.           contents: '  CKFinder',
  31.           tooltip: 'CKFinder',
  32.           click: function() {
  33.              CKFinder.modal( {
  34.         //   Full location of the plugins file.             
  35.         //   plugins: [
  36.         //  'https://example.com/ckfinder/plugins/StatusBarInfo/StatusBarInfo.js',
  37.         //  'https://example.com/ckfinder/plugins/ImageInfo/ImageInfo.js',
  38.         //  'https://example.com/ckfinder/plugins/CustomButton/CustomButton.js'
  39.         //  ],
  40.                  chooseFiles: true,
  41.                  //displayFoldersPanel: false,
  42.                  //startupPath: 'Images:/' + YourFolder + '/',
  43.                  //rememberLastFolder: false,
  44.                  onInit: function( finder ) {
  45.                      finder.on( 'files:choose', function( evt ) {
  46.                          var file = evt.data.files.first();
  47.                          var url = file.getUrl();
  48.                          //url = location.origin + url; // full url
  49.                          console.log(url);
  50.                          context.invoke('editor.insertImage', url);
  51.                      } );
  52.                          finder.on( 'file:choose:resizedImage', function( evt ) {
  53.                          var url_resizedUrl = evt.data.resizedUrl;  
  54.                          //url_resizedUrl = location.origin + url_resizedUrl; // full url   
  55.                          context.invoke('editor.insertImage', url_resizedUrl);
  56.                      } );
  57.                  }
  58.              } );
  59.           },
  60.         });
  61.  
  62.         // create jQuery object from button instance.
  63.         var $CKFinder = button.render();
  64.         return $CKFinder;
  65.       });
  66.     },
  67.   });
  68. }));

 

Installation

1. Download CKFinder for PHP.

Install, integrate, configure and develop CKFinder.

Вrowse through documentation.

All downloads are full versions with just a few features locked. Use your license key to unlock complete CKFinder functionality, with no need to download a separate package. Try it for a limited period of time and buy it when you are ready. CKFinder prepared easy licensing options for your development purposes.
View license options

2. Include JS

Include the following code after Summernote:

  • <script src="ckfinder.js"></script>
  • <script src="summernote-ext-ckfinder.js"></script>

3. Summernote options:

  • $('.summernote').summernote({
  •   height: 150,   //set editable area's height
  •     toolbar:[
  •         ['CKFinder', ['CKFinder']], // The Button
  •         ['style',['style']],
  •         ['font',['bold','italic','underline','clear']],
  •         ['fontname',['fontname']],
  •         ['color',['color']],
  •         ['para',['ul','ol','paragraph']],
  •         ['height',['height']],
  •         ['table',['table']],
  •         ['insert',['media','link','hr']],
  •         ['view',['fullscreen','codeview']],
  •         ['help',['help']]
  •     ],
  •   }
  • });

Tested v0.8.12 - v0.8.18

Summernote-ext-CKFinder provides configuration options that can be changed to customize the plugin.

In the example the commented out code options:

Plugins for CKFinder.

displayFoldersPanel - changes the folders display mode. When set to true, folders are displayed as a tree in the primary panel. When set to false, folders are displayed inline with files, there is no folders tree, and breadcrumbs are displayed.

startupPath - The resource type and name of the startup folder, separated with a colon. If defined, on startup CKFinder will open the given folder and will list its contents.

rememberLastFolder - whether CKFinder should remember the last used folder in the local storage and open it automatically next time.

Can be also set to an absolute URL (now relative).

Extends plugins for adding CKFinder 3 to Summernote WYSIWYG editor

Extends plugins for adding CKFinder 3 to Summernote WYSIWYG editor

summernote-ext-ckfinder.js distributed under the MIT license.

Поделиться
  699
Комментарии
1000
Комментирование доступно после авторизации на сайте
Регистрация
Войти с помощью:
Опрос
 2021-12-28  дата публикации   176  проголосовали Как отразилась эпидемиологическая обстановка в 2021 году на результатах работы Вашей компании (в сравнении с 2020 годом)?
 
29.03
Выходит из печати журнал «Все для химчистки и прачечной» 3-2022
Это последний, давно обещанный номер за прошлый год. С мая начнем 2023. Номер получился толстым  - 86 полос – наполненным как статьями, посвященными азам технологии стирки, так и узкоспециализированными темами для мастеров своего дела. Благодарим такие компании, как «Вязьма» и ТФ «Нива», за поддержку нашего образовательного проекта
Выходит из печати журнал «Все для химчистки и прачечной» 3-2022
29.03
За испорченный персидский ковёр суд взыскал почти три миллиона
Пролетарский районный суд города Твери рассмотрел гражданское дело по иску Костюченкова Алексея Алексеевича к индивидуальному предпринимателю Казачкову Олегу Евгеньевичу о защите прав потребителя
За испорченный персидский ковёр суд взыскал почти три миллиона
28.03
Представляем докладчика Академии Cleanprice
Отделка швейных изделий – неотъемлемая часть моды и постоянный источник «головной боли» предприятий химчистки и прачечных
Представляем докладчика Академии Cleanprice
24.03
Представляем докладчика Академии Cleanprice
Волокнистый состав текстиля диктует прачечной режимы его обработки. Для такого сильнозагрязненного ассортимента как ресторанный и кухонный текстиль – это критичная информация, так как не всякий материал способен выдержать промышленную обработку
Представляем докладчика Академии Cleanprice
24.03
Насколько опасна стирка в домашних условиях?
Исследование британских ученых доказывает, что бытовые стиральные машины не подходят для обеззараживания
Насколько опасна стирка в домашних условиях?
23.03
«ТЕКСКЕПРО»: “Перхлорэтилен? Конечно он есть у нас. Итальянский и немецкий. По 396 руб/кг!”
Компания «ТЕКСКЕПРО» предлагает качественный "перхлорэтилен стабилизированный для химической чистки текстиля и кожи", производства Италии и Германии
«ТЕКСКЕПРО»: “Перхлорэтилен? Конечно он есть у нас. Итальянский и немецкий. По 396 руб/кг!”
22.03
Представляем докладчика Академии Cleanprice
Сегодня на большей части швейных изделий информация о волокнистом составе и способам ухода является неполной, недостоверной либо отсутствует. Елена Владиславовна Бызова, преподаватель СПбГУПТД, на весенней сессии Академии Cleanprice выступит с докладом на тему «Информационная идентификация швейного изделия»
Представляем докладчика Академии Cleanprice
22.03
Усилитель КЛИП КОМБИ по фиксированной цене
По Вашим просьбам ТЕКСКЕПРО продлевает акцию на комплексный антистатический усилитель химчистки КЛИП КОМБИ (КРОЙСЛЕР, Германия). Теперь - всего по 700 рублей за килограмм!
Усилитель КЛИП КОМБИ по фиксированной цене
21.03
Представляем докладчика Академии Cleanprice
Далеко не все аппаратчики используют потенциал машин химчистки в полной мере по причине недостаточных знаний. Виолетта Андреевна Луценко, действующий эксперт «Петроэксперта», в своем докладе на Академии Cleanprice расскажет о фильтрах в машине химчистки.
Представляем докладчика Академии Cleanprice
21.03
Озоновые шкафы Battistella в ТФ НИВА
Компания ТФ НИВА - Nuova Martini стала представителем итальянского завода Battistella на территории России и стран СНГ
Озоновые шкафы Battistella в ТФ НИВА