cleanprice
Loading...
Журнал «Все для химчистки и прачечной»
Поиск
Language
Вопросы
Регистрация
Вход
Журнал
Пособия
Журнал
Пособия
Вход
Регистрация
Поиск
Вопросы
Language
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.

Поделиться
  339
Комментарии
1000
Комментирование доступно после авторизации на сайте
Регистрация
Войти с помощью:

Начните использовать в прачечной моющие средства от P&G Professional.

Опрос
 2021-06-17  дата публикации   91  проголосовали Какова ситуация с вакцинацией от коронавирусной инфекции на Вашем предприятии химчистки и прачечной?
 
17.09
На Украине в роддоме новорожденных начали помечать этикетками по уходу
В роддоме украинского города Нововолынск новорожденных начали помечать бирками, стилизованными под этикетки по уходу за текстилем.
На Украине в роддоме новорожденных начали помечать этикетками по уходу
17.09
WCL организует корпоратив, чтобы отпраздновать близкое возвращение к нормальной жизни
Лондонская Благочестивая компания прачечных организует уик-энд в Блэкпуле с однодневным визитом на автобусе на озеро Уиндермир - прекрасная возможность встретиться с друзьями и коллегами по отрасли после столь долгого времени ковидной разлуки
WCL организует корпоратив, чтобы отпраздновать близкое возвращение к нормальной жизни
17.09
В индейской резервации открылась Центральная прачечная народа Чокто
В индейской резервации Оклахомы (США) открылась Центральная прачечная народа Чокто
В индейской резервации открылась Центральная прачечная народа Чокто
16.09
Немецкие прачечные испытывают трудности из-за нехватки персонала
В Германии прачечные, обслуживающие предприятия и организации, с трудом удовлетворяют потребности клиентов из-за нехватки персонала. 
Немецкие прачечные испытывают трудности из-за нехватки персонала
16.09
Bosch выпустила портативный гаджет для удаления неприятных запахов с одежды
Компания Bosch, заботясь об экологии, создала портативное устройство FreshUp, позволяющее удалить неприятные запахи с одежды, не загружая ее в стиральную машину.
 
Bosch выпустила портативный гаджет для удаления неприятных запахов с одежды
16.09
Правительство запустило новую меру поддержки для МСБ
Правительство запустило новый финансовый инструмент поддержки предпринимателей – «зонтичный» механизм предоставления поручительств, который откроет для МСБ расширенные возможности для получения заёмного финансирования
 
Правительство запустило новую меру поддержки для МСБ
15.09
Международная выставка Expo Detergo пройдет 21-24 октября 2022 года
EXPO Detergo International 2022, одна из ведущих в Европе и во всем мире выставок, посвященных машинам для стирки, глажки и химчистки текстиля, технологиям, продуктам и услугам, пройдет в Фиера Милано (Италия) с 21 по 24 октября 2022 года.
 
Международная выставка Expo Detergo пройдет 21-24 октября 2022 года
15.09
Универсальные постаматы начинают устанавливать в подъездах жилых комплексов
Российский производитель автоматических систем хранения - компания LockerBox - приняла участие в реализации проекта по установке универсального постамата в жилом комплексе Forum City в Екатеринбурге.
 
Универсальные постаматы начинают устанавливать в подъездах жилых комплексов
15.09
Нэфис Косметикс приступил к выпуску капсул для стирки
Нэфис Косметикс начал производство капсул для стирки BiMAX IQ Caps. Это средство, которое содержит высокоактивный комплекс энзимов, благодаря чему тщательно удаляет загрязнения, не повреждая волокон и красящего пигмента ткани.
 
Нэфис Косметикс приступил к выпуску капсул для стирки
14.09
Растворитель для химической чистки SENSENE™ сертифицирован по стандарту GOTS
Сертификационный орган ECOCERT Greenlife положительно оценил SENSENE™ в соответствии с критериями Глобального стандарта органического текстиля (Global Organic Textile Standard, GOTS) - версия 6.0.
 
Растворитель для химической чистки SENSENE™ сертифицирован по стандарту GOTS