Permalink
Browse files

feature(ckeditor): improved elgg/ckeditor AMD module

elgg/ckeditor/insert has been deprecated and the hook registration was moved
to elgg/ckeditor module.

elgg/ckeditor module now triggers "prepare, ckeditor" hook, which can be used
to decorate the CKEDITOR global, as well as to register new plugins and event handlers.

Adds elgg/ckeditor#bind method to simplify bootstrapping.
  • Loading branch information...
hypeJunction committed Apr 14, 2016
1 parent b8e4ee5 commit a0ff70ec3af2c784054e1e2f328c4504458b8978
View
@@ -602,6 +602,18 @@ To support gallery sets (via ``rel`` attribute), you need to bind colorbox direc
lightbox.bind('a[rel="my-gallery"]', options, false); // 3rd attribute ensures binding is done without proxies
});
+Module ``elgg/ckeditor``
+------------------------
+
+This module can be used to add WYSIWYG editor to a textarea (requires ``ckeditor`` plugin to be enabled).
+Note that WYSIWYG will be automatically attached to all instances of ``.elgg-input-longtext``.
+
+.. code:: js
+
+ require(['elgg/ckeditor'], function (editor) {
+ editor.bind('.my-text-area');
+ });
+
Traditional scripts
===================
@@ -705,6 +717,9 @@ Available hooks
**config, ckeditor**
This filters the CKEditor config object. Register for this hook in a plugin boot module. The defaults can be seen in the module ``elgg/ckeditor/config``.
+**prepare, ckeditor**
+ This hook can be used to decorate ``CKEDITOR`` global. You can use this hook to register new CKEditor plugins and add event bindings.
+
**ajax_request_data, \***
This filters request data sent by the ``elgg/Ajax`` module. See :doc:`ajax` for details.
@@ -26,6 +26,7 @@ Deprecated Views
* ``elgg/ui.river.js`` is deprecated: Do not rely on simplecache URLs to work.
* ``lightbox/settings.js`` is deprecated: Use ``getOptions, ui.lightbox`` JS plugin hook or ``data-colorbox-opts`` attribute.
+ * ``elgg/ckeditor/insert.js`` is deprecated: You no longer need to include it, hook registration takes place in ``elgg/ckeditor`` module
Added ``elgg/popup`` module
---------------------------
@@ -55,6 +56,11 @@ Removed APIs
Just a warning that the private entity cache functions (e.g. ``_elgg_retrieve_cached_entity``) have been removed. Some plugins may have been using them. Plugins should not use private APIs as they will more often be removed without notice.
+Improved ``elgg/ckeditor`` module
+-----------------------------------
+
+:doc:`elgg/ckeditor module <javascript>` can now be used to add WYSIWYG to a textarea programmatically with ``elgg/ckeditor#bind``.
+
From 2.0 to 2.1
===============
View
@@ -1636,7 +1636,7 @@ function _elgg_view_may_be_altered($view, $path) {
}
$view_path = $views->findViewFile($view, $viewtype);
-
+
return realpath($view_path) !== realpath($expected_path);
}
View
@@ -24,11 +24,9 @@ function ckeditor_init() {
// need to set basepath early
elgg_extend_view('elgg.js', 'elgg/ckeditor/set-basepath.js');
-
+
elgg_extend_view('input/longtext', 'ckeditor/init');
- elgg_extend_view('embed/embed.js', 'elgg/ckeditor/insert.js');
-
elgg_register_plugin_hook_handler('register', 'menu:longtext', 'ckeditor_longtext_menu');
}
@@ -4,17 +4,9 @@
*
* Doing this inline enables the editor to initialize textareas loaded through ajax
*/
-
?>
<script>
-require(['elgg'], function (elgg) {
- // This global variable must be set before the editor script loading.
- CKEDITOR_BASEPATH = elgg.get_simplecache_url('ckeditor/');
-
- require(['elgg/ckeditor', 'jquery', 'jquery.ckeditor'], function(elggCKEditor, $) {
- $('.elgg-input-longtext:not([data-cke-init])')
- .attr('data-cke-init', true)
- .ckeditor(elggCKEditor.init, elggCKEditor.config);
+ require(['elgg/ckeditor'], function (elggCKEditor) {
+ elggCKEditor.bind('.elgg-input-longtext');
});
-});
</script>
@@ -1,25 +1,75 @@
-define(function(require) {
+/**
+ * This module can be used to bind CKEditor to a textarea
+ * <code>
+ * require(['elgg/ckeditor'], function(editor) {
+ * editor.bind('textarea');
+ * });
+ * </code>
+ *
+ * @module elgg/ckeditor
+ */
+define(function (require) {
var elgg = require('elgg');
+ require('elgg/init');
var $ = require('jquery');
require('jquery.ckeditor');
var CKEDITOR = require('ckeditor');
var config = require('elgg/ckeditor/config');
- CKEDITOR.plugins.addExternal('blockimagepaste', elgg.get_simplecache_url('elgg/ckeditor/blockimagepaste.js'), '');
-
var elggCKEditor = {
-
+ /**
+ * A flag that indicates whether handlers were registered
+ */
+ ready: false,
+ bind: function (selector) {
+ elggCKEditor.registerHandlers();
+ CKEDITOR = elgg.trigger_hook('prepare', 'ckeditor', null, CKEDITOR);
+ selector = selector || '.elgg-input-longtext';
+ if ($(selector).length === 0) {
+ return;
+ }
+ $(selector)
+ .not('[data-cke-init]')
+ .attr('data-cke-init', true)
+ .ckeditor(elggCKEditor.init, elggCKEditor.config);
+ },
+ /**
+ * Register event and hook handlers
+ * @return void
+ */
+ registerHandlers: function () {
+ if (elggCKEditor.ready) {
+ return;
+ }
+ elgg.register_hook_handler('prepare', 'ckeditor', function (hook, type, params, CKEDITOR) {
+ CKEDITOR.plugins.addExternal('blockimagepaste', elgg.get_simplecache_url('elgg/ckeditor/blockimagepaste.js'), '');
+ CKEDITOR.on('instanceReady', elggCKEditor.fixImageAttributes);
+ return CKEDITOR;
+ });
+ elgg.register_hook_handler('embed', 'editor', function (hook, type, params, value) {
+ var textArea = $('#' + params.textAreaId);
+ var content = params.content;
+ if ($.fn.ckeditorGet) {
+ try {
+ var editor = textArea.ckeditorGet();
+ editor.insertHtml(content);
+ return false;
+ } catch (e) {
+ // do nothing.
+ }
+ }
+ });
+ elggCKEditor.ready = true;
+ },
/**
* Toggles the CKEditor
*
* @param {Object} event
* @return void
*/
- toggleEditor: function(event) {
+ toggleEditor: function (event) {
event.preventDefault();
-
var target = $(this).attr('href');
-
if (!$(target).data('ckeditorInstance')) {
$(target).ckeditor(elggCKEditor.init, elggCKEditor.config);
$(this).html(elgg.echo('ckeditor:html'));
@@ -28,29 +78,28 @@ define(function(require) {
$(this).html(elgg.echo('ckeditor:visual'));
}
},
-
/**
* Initializes the ckeditor module
*
+ * @param {Object} textarea DOM element passed by ckeditor on init
* @return void
*/
- init: function(textarea) {
+ init: function (textarea) {
// show the toggle-editor link which is hidden by default, so it will only show up if the editor is correctly loaded
$('.ckeditor-toggle-editor[href="#' + textarea.id + '"]').show();
},
-
/**
* CKEditor has decided using width and height as attributes on images isn't
* kosher and puts that in the style. This adds those back as attributes.
* This is from this patch: http://dev.ckeditor.com/attachment/ticket/5024/5024_5.patch
- *
+ *
* @param {Object} event
* @return void
*/
- fixImageAttributes: function(event) {
+ fixImageAttributes: function (event) {
event.editor.dataProcessor.htmlFilter.addRules({
elements: {
- img: function(element) {
+ img: function (element) {
var style = element.attributes.style;
if (style) {
var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec(style);
@@ -68,7 +117,6 @@ define(function(require) {
}
});
},
-
/**
* CKEditor configuration
*
@@ -77,10 +125,6 @@ define(function(require) {
*/
config: config
};
-
- CKEDITOR.on('instanceReady', elggCKEditor.fixImageAttributes);
-
- $(document).on('click', '.ckeditor-toggle-editor', elggCKEditor.toggleEditor);
-
+ elggCKEditor.bind('.elgg-input-longtext');
return elggCKEditor;
});
@@ -2,18 +2,10 @@
* Insert embed media from embed plugin
*
* This JavaScript view is extending the view embed/embed.js
+ *
+ * @deprecated 2.2
*/
-
-elgg.register_hook_handler('embed', 'editor', function(hook, type, params, value) {
- var textArea = $('#' + params.textAreaId);
- var content = params.content;
- if ($.fn.ckeditorGet) {
- try {
- var editor = textArea.ckeditorGet();
- editor.insertHtml(content);
- return false;
- } catch (e) {
- // do nothing.
- }
- }
+require(['elgg', 'elgg/ckeditor'], function(elgg, elggCKEditor) {
+ elgg.deprecated_notice('elgg/ckeditor/insert.js view has been deprecated. You should not need to use it. The handlers are now registered by elgg/ckeditor module', '2.2');
+ elggCKEditor.registerHandlers();
});
@@ -1,2 +1,7 @@
-// This global variable must be set before the editor script loading.
-CKEDITOR_BASEPATH = elgg.config.wwwroot + 'mod/ckeditor/vendors/ckeditor/';
+/**
+ * This view extends elgg.js and sets ckeditor basepath before jquery.ckeditor is loaded
+ */
+require(['elgg'], function(elgg) {
+ // This global variable must be set before the editor script loading.
+ CKEDITOR_BASEPATH = elgg.get_simplecache_url('ckeditor/');
+});

0 comments on commit a0ff70e

Please sign in to comment.