Commit | Line | Data |
---|---|---|
d45eaff6 MW |
1 | /** |
2 | * Provides custom buttons for CKEditor. | |
3 | * | |
4 | * In short we're applying a style element on the current selection which will be replaced | |
5 | * with the plain BBCode tag (e.g. [tt]) afterwards. Using insertText() or insertHtml() does | |
6 | * not work here as it discards the inline styles set for the selection. | |
7 | * | |
8 | * @author Alexander Ebert | |
ca4ba303 | 9 | * @copyright 2001-2014 WoltLab GmbH |
d45eaff6 MW |
10 | * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php> |
11 | */ | |
12 | (function() { | |
13 | /** | |
14 | * Transforms the BBCode span-element into a plain BBCode. | |
15 | * | |
16 | * @param CKEDITOR editor | |
17 | */ | |
18 | function transformBBCode(editor) { | |
f20c925c AE |
19 | editor.fire('lockSnapshot'); |
20 | ||
bbedab7f AE |
21 | var $markerID = null; |
22 | $(editor.container.$).find('span.wcfBBCode').removeClass('wcfBBCode').html(function() { | |
d45eaff6 | 23 | var $bbcode = $(this).data('bbcode'); |
bbedab7f AE |
24 | $markerID = WCF.getRandomID(); |
25 | return '[' + $bbcode + ']' + $(this).html() + '<span id="' + $markerID + '" />[/' + $bbcode + ']'; | |
d45eaff6 | 26 | }); |
bbedab7f AE |
27 | |
28 | if ($markerID !== null && typeof window.getSelection != "undefined") { | |
29 | var $marker = $('#' + $markerID).get(0); | |
30 | var $range = document.createRange(); | |
31 | $range.setStartAfter($marker); | |
32 | $range.collapse(true); | |
33 | var $selection = window.getSelection(); | |
34 | $selection.removeAllRanges(); | |
35 | $selection.addRange($range); | |
36 | ||
37 | $marker.remove(); | |
38 | } | |
f20c925c AE |
39 | |
40 | editor.fire('unlockSnapshot'); | |
d45eaff6 MW |
41 | } |
42 | ||
43 | // listens for 'afterCommandExec' to transform BBCodes into plain text | |
44 | CKEDITOR.on('instanceReady', function(event) { | |
45 | event.editor.on('afterCommandExec', function(ev) { | |
46 | if (ev.data.name.indexOf('__wcf_') == 0) { | |
47 | transformBBCode(ev.editor); | |
48 | } | |
49 | }); | |
50 | }); | |
51 | ||
52 | /** | |
53 | * Enables this plugin. | |
54 | */ | |
55 | CKEDITOR.plugins.add('wbutton', { | |
56 | /** | |
57 | * list of required plugins | |
58 | * @var array<string> | |
59 | */ | |
60 | requires: [ 'button' ], | |
61 | ||
62 | /** | |
63 | * Initializes the 'wbutton' plugin. | |
64 | * | |
65 | * @param CKEDITOR editor | |
66 | */ | |
67 | init: function(editor) { | |
68 | if (!__CKEDITOR_BUTTONS.length) { | |
69 | return; | |
70 | } | |
71 | ||
72 | for (var $i = 0, $length = __CKEDITOR_BUTTONS.length; $i < $length; $i++) { | |
73 | this._wcfAddButton(editor, __CKEDITOR_BUTTONS[$i]); | |
74 | } | |
75 | }, | |
76 | ||
77 | /** | |
78 | * Adds command and button for given BBCode. | |
79 | * | |
80 | * @param CKEDITOR editor | |
81 | * @param object button | |
82 | */ | |
83 | _wcfAddButton: function(editor, button) { | |
84 | var $style = new CKEDITOR.style({ | |
85 | element: 'span', | |
86 | attributes: { | |
87 | 'class': 'wcfBBCode', | |
88 | 'data-bbcode': button.name | |
89 | } | |
90 | }); | |
91 | editor.addCommand('__wcf_' + button.name, new CKEDITOR.styleCommand($style)); | |
92 | editor.ui.addButton('__wcf_' + button.name, { | |
93 | command: '__wcf_' + button.name, | |
94 | icon: button.icon, | |
95 | label: button.label | |
96 | }); | |
97 | } | |
98 | }); | |
99 | })(); |