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

Торговый дизайн – проектирование, оснащение и сервис для прачечных и химчисток. 30 лет создаем Ваш успешный бизнес!

Журнал
Пособия
Вход
Поиск
Вопросы
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.

Поделиться
  937
Комментарии
1000
Комментирование доступно после авторизации на сайте
Регистрация
Войти с помощью:
Опрос
 2023-08-17  дата публикации   82  проголосовали Как заполняются договора (квитанции) на оказание услуг в Вашей химчистке-прачечной?
 
23.05
Вебинар по стирке гостиничного текстиля
Наталия Михайловна Лонгинова 28 и 28 мая проводит вебинар «Технология стирки текстильных изделий сферы гостеприимства».  Приглашаем к участию прачечные России.
Вебинар по стирке гостиничного текстиля
16.05
«Интер-Бизнес» выходит на cleanprice.ru с технологией автоматизации процесса стирки

К сообществу Cleanprice.ru присоединилась компания «Интер-Бизнес» из Санкт-Петербурга - успешный оператор рынка аренды спецодежды полного цикла (пошив, стирка, ремонт). Компания также оказывает услуги профессиональной стирки и чистки для юридических и физических лиц.

«Интер-Бизнес» выходит на cleanprice.ru с технологией автоматизации процесса стирки
16.05
Комиссиям по противодействию нелегальной занятости быть
Согласно Постановлению Правительства РФ от 3 мая 2024 г. № 571 в каждом отдельном регионе будут созданы межведомственные комиссии по противодействию нелегальной занятости.
Комиссиям по противодействию нелегальной занятости быть
16.05
Система для сортировки белья на базе искусственного интеллекта
Научные сотрудники Университета Билефельда (Германия) выпустили отчет о проделанной работе по разработке системы классификации текстильных изделий с помощью возможностей искусственного интеллекта.
Система для сортировки белья на базе искусственного интеллекта
14.05
Дмитрий Колесников возглавит Петербургский филиал компании «ТЕКСКЕПРО»

Компания «Текскепро» объявила об открытии филиала в городе на Неве. Планируется организация полноценного склада и офиса продаж под руководством Дмитрия Колесникова.

Дмитрий Колесников возглавит Петербургский филиал компании «ТЕКСКЕПРО»
14.05
Интеграция роботов в Нидерландской прачечной Rentex

Одна из крупнейших частных прачечных в Нидерландах Rentex оборудована роботизированными системами, которые позволяют справиться с огромным потоком белья на производстве. Специально для прачечной был спроектирован робот, который способен повесить в контейнер несколько десятков вещей за раз.

Интеграция роботов в Нидерландской прачечной Rentex
13.05
Химчистка «Диана» участвует в акции «День без турникетов»

С 20 по 26 мая в Москве пройдет очередная акция «День без турникетов». Последние 4 года сеть химчисток «Диана» участвует в данной акции. А что Вы делаете для популяризации отрасли?

Химчистка «Диана» участвует в акции «День без турникетов»
13.05
Законодательная инициатива по ограничению максимальных выплат потребительского штрафа

Предлагается ввести предельную сумму штрафа, ограниченную размером цены товара (работы, услуги), установленной в договоре. Изменения коснутся п. 6 ст. 13 Закона РФ от 7 февраля 1992 г. № 2300-I «О защите прав потребителей».

Законодательная инициатива по ограничению максимальных выплат потребительского штрафа
13.05
О новых нормах выплаты за сверхурочную работу
Федеральный закон N 91-ФЗ «О внесении изменения в статью 152 Трудового кодекса Российской Федерации» был официально одобрен Советом Федерации 22 апреля  и вступит в силу с 1 сентября 2024 года. 
О новых нормах выплаты за сверхурочную работу
03.05
Обновление программы «Агбис»

Вышла версия «Агбис 24.2». Разработчик представил обзор внедренных изменений, повышающих надёжность, стабильность и удобство работы всей системы.

Обновление программы «Агбис»