Permalink
Browse files

now integrated with tinymce

  • Loading branch information...
1 parent e62ee64 commit 03a075876e1243d0af26a535b808e48cac73b2a3 @victorjonsson committed Feb 22, 2013
Showing with 181 additions and 63 deletions.
  1. +28 −1 README.md
  2. +1 −1 editable.jquery.json
  3. +1 −1 index.html
  4. +142 −51 jquery.editable.js
  5. +9 −9 jquery.editable.min.js
View
@@ -9,7 +9,8 @@ This plugin makes it possible to edit the content of an element simply by double
Double click on an element and it turns into a textarea. The content of the element is now displayed in the textarea.
When you're done editing all you have to do is to click some where outside the textarea and the content will
be added to the DOM. You can toggle the size of the font by pressing the keys cmd + ↑ or cmd + ↓ while editing the content
-(ctrl-key instead of cmd if you're on windows).
+(ctrl-key instead of cmd if you're on windows). If you don't want to use a plain textarea as editor you can [integrate jQuery editable
+with tinyMCE](#tinymce-integration).
#### Code examples
@@ -27,6 +28,7 @@ $('#some-element').editable({
toggleFontSize : true, // Whether or not it should be possible to change font size (default true),
closeOnEnter : false, // Whether or not pressing the enter key should close the editor (default false)
event : 'click', // The event that triggers the editor (default dblclick)
+ tinyMCE : false, // Integrate with tinyMCE by settings this option to true or an object containing your tinyMCE configuration
callback : function( data ) {
// Callback that will be called once the editor is blurred
if( data.content ) {
@@ -89,3 +91,28 @@ $('.editable-area').editable(function(data) {
}
});
```
+
+<h2 id="tinymce-integration">Integrate plugin with tinyMCE</h2>
+
+Since version 1.3.1 it's possible to integrate this plugin with [tinyMCE](http://www.tinymce.com/).
+
+```html
+<div id="my-editable">
+ <p>Lorem te ipsum...</p>
+</div>
+<script src="tinymce/jscript/tinymce.js"><script>
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
+<script src="js/jquery.editable.min.js"></script>
+<script>
+ $('#my-ediable').editable({
+ tinyMCE : {
+ plugins : 'autolink,lists,spellchecker',
+ skin : 'o2k7'
+ // what ever tinyMCE configuration that you want
+ },
+ callback : function(data) {
+ // ...
+ }
+ });
+</script>
+```
View
@@ -8,7 +8,7 @@
"wysiwyg",
"input"
],
- "version" : "1.2.3",
+ "version" : "1.3.1",
"author" : {
"name": "Victor Jonsson",
"url": "http://victorjonsson.se/",
View
@@ -94,7 +94,7 @@ <h2 class="editable">Lorem te ipsum del tara sinco</h2>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
- <script src="jquery.editable.js"></script>
+ <script src="jquery.editable.min.js"></script>
<script>
// Define our elements
View
@@ -4,10 +4,10 @@
* @author Victor Jonsson (http://victorjonsson.se/)
* @website https://github.com/victorjonsson/jquery-editable/
* @license GPLv2 http://www.gnu.org/licenses/gpl-2.0.html
-* @version 1.2.3
+* @version 1.3.1
* @donations http://victorjonsson.se/donations/
*/
-(function($) {
+(function($, window) {
'use strict';
@@ -24,6 +24,7 @@
IS_EDITING_ATTR = 'data-is-editing',
DBL_TAP_EVENT = 'dbltap',
SUPPORTS_TOUCH = 'ontouchend' in window,
+ TINYMCE_INSTALLED = 'tinyMCE' in window && typeof window.tinyMCE.init == 'function',
// reference to old is function
oldjQueryIs = $.fn.is,
@@ -67,6 +68,17 @@
},
/**
+ * @param {jQuery} $el
+ * @param {String} newText
+ */
+ resetElement = function($el, newText) {
+ $el.removeAttr('data-is-editing');
+ $el.html( newText );
+ $textArea.remove();
+ },
+
+
+ /**
* Function creating editor
*/
elementEditor = function($el, opts) {
@@ -95,59 +107,132 @@
textareaStyle = document.defaultView.getComputedStyle($el.get(0), "").cssText;
}
- if( opts.toggleFontSize || opts.closeOnEnter ) {
- $win.bind('keydown', opts, keyHandler);
+ /*
+ TINYMCE EDITOR
+ */
+ if( opts.tinyMCE !== false ) {
+ var id = 'editable-area-'+(new Date().getTime());
+ $textArea
+ .val(defaultText)
+ .appendTo($el)
+ .attr('id', id);
+
+ if( typeof opts.tinyMCE != 'object' )
+ opts.tinyMCE = {};
+
+ opts.tinyMCE.mode = 'exact';
+ opts.tinyMCE.elements = id;
+ opts.tinyMCE.width = $el.innerWidth();
+ opts.tinyMCE.height = $el.height() + 200;
+ opts.tinyMCE.theme_advanced_resize_vertical = true;
+
+ opts.tinyMCE.setup = function (ed) {
+ ed.onInit.add(function(editor, evt) {
+ var editorWindow = editor.getWin();
+ var hasPressedKey = false;
+ var editorBlur = function() {
+
+ var newText = $(editor.getDoc()).find('body').html();
+ if( $(newText).get(0).nodeName == $el.get(0).nodeName ) {
+ newText = $(newText).html();
+ }
+
+ // Update element and remove editor
+ resetElement($el, newText);
+ editor.remove();
+ $textArea = false;
+ $win.unbind('click', editorBlur);
+ $currentlyEdited = false;
+
+ // Run callback
+ if( typeof opts.callback == 'function' ) {
+ opts.callback({
+ content : newText == defaultText || !hasPressedKey ? false : newText,
+ fontSize : false,
+ $el : $el
+ });
+ }
+ };
+
+ // Blur editor when user clicks outside the editor
+ setTimeout(function() {
+ $win.bind('click', editorBlur);
+ }, 500);
+
+ // Create a dummy textarea that will called upon when
+ // programmatically interacting with the editor
+ $textArea = $('<textarea></textarea>');
+ $textArea.bind('blur', editorBlur);
+
+ editorWindow.onkeydown = function() {
+ hasPressedKey = true;
+ };
+
+ editorWindow.focus();
+ });
+ };
+
+ tinyMCE.init(opts.tinyMCE);
}
- $win.bind('keyup', adjustTextAreaHeight);
-
- $textArea
- .val(defaultText)
- .blur(function() {
-
- $currentlyEdited = false;
-
- // Get new text and font size
- var newText = $.trim( $textArea.val() ),
- newFontSize = $textArea.css('font-size');
- if( opts.lineBreaks ) {
- newText = newText.replace(new RegExp('\n','g'), '<br />');
- }
- // Update element
- $el.html( newText );
- $el.removeAttr('data-is-editing');
- if( newFontSize != defaultFontSize ) {
- $el.css('font-size', newFontSize);
- }
+ /*
+ TEXTAREA EDITOR
+ */
+ else {
- // remove textarea and size toggles
- $textArea.remove();
- $win.unbind('keydown', keyHandler);
- $win.unbind('keyup', adjustTextAreaHeight);
-
- // Run callback
- if( typeof opts.callback == 'function' ) {
- opts.callback({
- content : newText == defaultText ? false : newText,
- fontSize : newFontSize == defaultFontSize ? false : newFontSize,
- $el : $el
- });
- }
- })
- .attr('style', textareaStyle)
- .appendTo($el)
- .css({
- margin: 0,
- padding: 0,
- height : elementHeight +'px',
- overflow : 'hidden'
- })
- .focus()
- .get(0).select();
+ if( opts.toggleFontSize || opts.closeOnEnter ) {
+ $win.bind('keydown', opts, keyHandler);
+ }
+ $win.bind('keyup', adjustTextAreaHeight);
+
+ $textArea
+ .val(defaultText)
+ .blur(function() {
+
+ $currentlyEdited = false;
+
+ // Get new text and font size
+ var newText = $.trim( $textArea.val() ),
+ newFontSize = $textArea.css('font-size');
+ if( opts.lineBreaks ) {
+ newText = newText.replace(new RegExp('\n','g'), '<br />');
+ }
+
+ // Update element
+ resetElement($el, newText);
+ if( newFontSize != defaultFontSize ) {
+ $el.css('font-size', newFontSize);
+ }
+
+ // remove textarea and size toggles
+ $win.unbind('keydown', keyHandler);
+ $win.unbind('keyup', adjustTextAreaHeight);
+
+ // Run callback
+ if( typeof opts.callback == 'function' ) {
+ opts.callback({
+ content : newText == defaultText ? false : newText,
+ fontSize : newFontSize == defaultFontSize ? false : newFontSize,
+ $el : $el
+ });
+ }
+ })
+ .attr('style', textareaStyle)
+ .appendTo($el)
+ .css({
+ margin: 0,
+ padding: 0,
+ height : elementHeight +'px',
+ overflow : 'hidden'
+ })
+ .focus()
+ .get(0).select();
adjustTextAreaHeight();
- $el.trigger('edit', [$textArea]);
+ }
+
+ $el.trigger('edit', [$textArea]);
},
/**
@@ -216,9 +301,15 @@
touch : true,
lineBreaks : true,
toggleFontSize : true,
- closeOnEnter : false
+ closeOnEnter : false,
+ tinyMCE : false
}, opts);
+ if( opts.tinyMCE !== false && !TINYMCE_INSTALLED ) {
+ console.warn('Trying to use tinyMCE as editor but id does not seem to be installed');
+ opts.tinyMCE = false;
+ }
+
if( SUPPORTS_TOUCH && opts.touch ) {
opts.event = DBL_TAP_EVENT;
this.unbind('touchend', tapper);
@@ -251,4 +342,4 @@
return oldjQueryIs.apply(this, arguments);
}
-})(jQuery);
+})(jQuery, window);
Oops, something went wrong.

0 comments on commit 03a0758

Please sign in to comment.