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

Профессиональные препараты PLEX для химчисток и прачечных

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

Поделиться
  1162
Комментарии
1000
Комментирование доступно после авторизации на сайте
Регистрация
Войти с помощью:
Опрос
 2023-08-17  дата публикации   201  проголосовали Как заполняются договора (квитанции) на оказание услуг в Вашей химчистке-прачечной?
 
16.07
Гладильные столы со склада ВИТА-ПУЛ в Москве
Профессиональные гладильные столы китайского производства поступили на склад компании ВИТА-ПУЛ в Москве.
Гладильные столы со склада ВИТА-ПУЛ в Москве
07.07
15 лет Vortex. Празднуем юбилей вместе!

В 2025 году компания Vortex отмечает свой 15-летний юбилей! В честь юбилея компания подготовила для вас специальные подарки и бонусы!

15 лет Vortex. Празднуем юбилей вместе!
04.07
Профэквип на Всероссийском форуме «Здравница-2025» в Сколково

Компания ПРОФЭКВИП приняла участие в Всероссийском форуме «Здравница-2025», который состоялся 9-11 июня в Технопарке «Сколково». На стенде компании были представлены комплексные решения для оснащения санаториев и медицинских учреждений.

Профэквип на Всероссийском форуме «Здравница-2025» в Сколково
03.07
Новый GIRBAU COMPACT PRO в «Лавандерии»
В начале июня московская прачечная-химчистка «Лавандерия» установила у себя новый промышленный каландр со складывателем GIRBAU COMPACT PRO.
Новый GIRBAU COMPACT PRO в «Лавандерии»
30.06
Торговый Дизайн объявляет сезон скидок открытым! -3 % на гладильное оборудование GMP
До 30 сентября 2025 на все гладильные катки и каландры бренда GMP действует скидка – 3 %.
Торговый Дизайн объявляет сезон скидок открытым! -3 % на гладильное оборудование GMP
25.06
Квест-погружение в мир профессий от ВМЗ. А как Вы растите себе смену?
Для детей сотрудников завода с 16 по 22 июня организована смена в палаточном лагере «Чепчугово» в Смоленской области с погружением в мир профессий «Заводской гудок».
Квест-погружение в мир профессий от ВМЗ. А как Вы растите себе смену?
19.06
Повышение квалификации на благо рынка
В рамках планового повышения квалификации менеджеров-технологов АО «БиЭйч Сервис» 17 июня 2025 года был проведен тренинг по премиальной линейке профессиональных средств для стирки Viva производства компании SEITZ (Германия).
Повышение квалификации на благо рынка
11.06
«ВИТА-ПУЛ» оснастила прачечную для ГКБ им. С.С. Юдина

В Городской клинической больнице имени С.С. Юдина, одной из крупнейших многопрофильных клиник Москвы, в начале 2025 года пущена в эксплуатацию новая специализированная прачечная. Реализовала проект компания «ВИТА-ПУЛ».

«ВИТА-ПУЛ» оснастила прачечную для ГКБ им. С.С. Юдина
11.06
Спецпредложение на австрийскую упаковочную пленку
Компания «Текскепро» весь июнь предлагает австрийскую упаковочную пленку по выгодной цене. В наличии у поставщика есть пленка толщиной 15 или 20 микрон и длиной 500 или 1000 метров.
Спецпредложение на австрийскую упаковочную пленку
09.06
Итоги участия ОСХиП в выставке CleanExpo Казань

Профессионалы индустрии чистоты Татарстана 5 июня съехались в IT-Park им. Башира Рамеева в Казани принять участие в выставке и деловой программе CleanExpo Казань. Более 480 специалистов, 15 участников-экспонентов, 20 спикеров и 26 насыщенных выступлений сделали CleanExpo Казань по-настоящему знаковым событием отрасли.

Итоги участия ОСХиП в выставке CleanExpo Казань