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.

Поделиться
  421
Комментарии
1000
Комментирование доступно после авторизации на сайте
Регистрация
Войти с помощью:
Опрос
 2021-12-28  дата публикации   26  проголосовали Как отразилась эпидемиологическая обстановка в 2021 году на результатах работы Вашей компании (в сравнении с 2020 годом)?
 
28.01
Прачечные Великобритании просят государственной поддержки по ценам на энергоносители
Коммерческие прачечные Великобритании думают, что видят свет в конце туннеля пандемии, однако они сталкиваются с еще одним кризисом, на этот раз из-за массового и беспрецедентного роста цен на энергоносители.
 
Прачечные Великобритании просят государственной поддержки по ценам на энергоносители
28.01
Ткань-дисплей
Ученым удалось создать и протестировать в реальных условиях ткань, которая работает как достаточно яркий дисплей и тачскрин одновременно.
 
Ткань-дисплей
28.01
Коронавирус! Что делать?!
Минздрав выпустил памятку для граждан о действиях в случае бессимптомного или легкого течения новой коронавирусной инфекции
 
Коронавирус! Что делать?!
27.01
Госстандарт Белоруссии выявил еще три небезопасных моющих средства
Госстандарт Белоруссии обнаружил нарушения норм еще в трех видах моющих средств.
 
Госстандарт Белоруссии выявил еще три небезопасных моющих средства
27.01
Срок карантина сокращен вдвое
С 26 января вдвое, с 14 до 7 календарных дней, сокращен срок обязательного карантина для тех граждан, которые контактировали с больными коронавирусом.
Срок карантина сокращен вдвое
26.01
Агбис.Подпись - больше, чем удобство!
Электронная подпись - один из современных подходов к документообороту (не путать с цифровой подписью)
 
Агбис.Подпись - больше, чем удобство!
26.01
Lamoda предлагает услуги химчистки
Российский маркетплейс Lamoda запустил в тестовом режиме для своих пользователей услугу химчистки
 
Lamoda предлагает услуги химчистки
26.01
Роспотребнадзор предлагает тестировать сотрудников на коронавирус дважды в неделю
Роспотребнадзор подготовил проект рекомендаций для работодателей по тестированию сотрудников на COVID-19. За чей счет тестировать – не уточняется.
 
Роспотребнадзор предлагает тестировать сотрудников на коронавирус дважды в неделю
25.01
Академия чистого белья: Уход за текстилем в отеле
Журнал «Все для химчистки и прачечной» при поддержке компаний Electrolux Professional, BurnusHychem и «Диметра» приглашает заведующих прачечными, управляющих номерным фондом и других руководителей, интересующихся вопросами ухода за текстилем, в АКАДЕМИЮ ЧИСТОГО БЕЛЬЯ.
Академия чистого белья: Уход за текстилем в отеле
25.01
Сообщения о массовых жалобах московских медработников на качество новой формы опровергнуты
В столичном департаменте здравоохранения опровергли информацию о массовых жалобах  медиков на качество новой униформы
Сообщения о массовых жалобах московских медработников на качество новой формы опровергнуты