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.

Поделиться
  522
Комментарии
1000
Комментирование доступно после авторизации на сайте
Регистрация
Войти с помощью:
Опрос
 2021-12-28  дата публикации   96  проголосовали Как отразилась эпидемиологическая обстановка в 2021 году на результатах работы Вашей компании (в сравнении с 2020 годом)?
 
06.07
Автоматизация обувной мастерской
Обувная мастерская или обувное ателье - это предприятие с довольно сложной структурой: рабочие места с разными этапами обработки обуви, приёмка и выдача изделий, курьерская доставка
Автоматизация обувной мастерской
06.07
Параметры экономических статей УК пересмотрят
В Госдуме решили пересмотреть размеры крупного и особо крупного ущерба при уклонении от уплаты налогов и сборов, которые являются основанием для привлечения к уголовной ответственности по ст. 198 и ст. 199 УК РФ.
Параметры экономических статей УК пересмотрят
05.07
Обучающий вебинар для приемщиков пунктов приема химчистки
Преподаватель Центра обучения им. А.А.Парфеньева Марина Александровна Гейнц проведет онлайн обучение приемщиц. Лекции пройдут со вторника по пятницу - 12, 13, 14 и 15 июля с 10:00 до 13:00 по Москве (4 занятия по 3 часа)
Обучающий вебинар для приемщиков пунктов приема химчистки
05.07
Оплата покупки касанием двух смартфонов - продавца и покупателя
В Системе быстрых платежей (СБП) тестируют новый способ приема платежей. Для оплаты покупки или услуги покупателю достаточно приложить свой смартфон к смартфону продавца, который используется как терминал.
Оплата покупки касанием двух смартфонов - продавца и покупателя
04.07
«Меняйте постельное белье только в случае острой необходимости»
Национальная служба здравоохранения Великобритании сталкивается с дефицитом постельного белья и нехваткой рабочих рук в прачечных. В больницы направлено предписание менять белье только в случае острой необходимости.
«Меняйте постельное белье только в случае острой необходимости»
04.07
Калужский Samsung начнёт поставлять свою продукцию на российский рынок по параллельному импорту
Зарубежные компании, которые продолжают производить технику в России, планируют вывозить её в страны ЕАЭС, чтобы снять риск вторичных санкций. Затем технику вернут в Россию для продажи по параллельному импорту.
 
Калужский Samsung начнёт поставлять свою продукцию на российский рынок по параллельному импорту
01.07
На этикетках по уходу обнаружили скрытые призывы о помощи
Вокруг одного из известных китайских интернет-магазинов Shein разыгрался скандал. Покупатели одежды обнаружили на этикетках по уходу скрытые призывы о помощи «NEED YOUR HELP» («НУЖНА ВАША ПОМОЩЬ»).
 
На этикетках по уходу обнаружили скрытые призывы о помощи
01.07
С 1 июля увеличен размер выплат на развитие своего дела
С 1 июля увеличены на 100 тыс. рублей единовременные выплаты по социальному контракту, которые можно получить на развитие своего дела и ведение личного подсобного хозяйства. Необходимые для этого изменения утверждены постановлением правительства.
С 1 июля увеличен размер выплат на развитие своего дела
30.06
Иностранные компании продают свои российские активы со скидкой не менее 50%
Министр финансов Антон Силуанов на съезде Российского союза промышленников и предпринимателей назвал условия, на которых иностранные компании, покидающие Россию, передают свои активы российскому бизнесу
 
Иностранные компании продают свои российские активы со скидкой не менее 50%
30.06
Новая форма инспекторов ГИБДД
Инспекторы ГИБДД переходят на новую форму. Разрешены легкие футболки и даже кепки-бейсболки. При стирке погоны можно не снимать.
Новая форма инспекторов ГИБДД