diff --git a/dist/content-kit-editor.css b/dist/content-kit-editor.css index 3daa6e2a1..63bfc95f7 100755 --- a/dist/content-kit-editor.css +++ b/dist/content-kit-editor.css @@ -30,7 +30,11 @@ padding-left: 1.05em; color: #a0a0a0; } - +.ck-editor img { + display: block; + max-width: 100%; + margin: 0 auto; +} /** * Toolbar */ @@ -259,6 +263,10 @@ transform: rotate(-135deg); } +.ck-file-input { + display:none; +} + /** * Icons */ diff --git a/dist/content-kit-editor.js b/dist/content-kit-editor.js index 44b8c632a..826ddddd4 100644 --- a/dist/content-kit-editor.js +++ b/dist/content-kit-editor.js @@ -507,7 +507,7 @@ function EmbedCommand(options) { Command.call(this, options); } inherits(EmbedCommand, Command); -EmbedCommand.prototype.exec = function(value) { +EmbedCommand.prototype.exec = function() { alert(this.name); }; @@ -516,13 +516,49 @@ function ImageEmbedCommand(options) { name: 'image', button: '' }); + + var fileBrowser = document.createElement('input'); + fileBrowser.type = 'file'; + fileBrowser.accept = 'image/*'; + fileBrowser.className = 'ck-file-input'; + fileBrowser.addEventListener('change', this.handleFile); + document.body.appendChild(fileBrowser); + this.fileBrowser = fileBrowser; } inherits(ImageEmbedCommand, EmbedCommand); +ImageEmbedCommand.prototype = { + exec: function() { + var clickEvent = new MouseEvent('click', { bubbles: false }); + this.fileBrowser.dispatchEvent(clickEvent); + }, + handleFile: function(e) { + var target = e.target; + var file = target && target.files[0]; + var reader = new FileReader(); + reader.onload = function(event) { + var base64File = event.target.result; + var selectionRoot = getCurrentSelectionRootNode(); + var image = document.createElement('img'); + image.src = base64File; + + // image needs to be placed outside of the current empty paragraph + var editorNode = selectionRoot.parentNode; + editorNode.insertBefore(image, selectionRoot); + editorNode.removeChild(selectionRoot); + }; + reader.readAsDataURL(file); + target.value = null; // reset + } +}; function MediaEmbedCommand(options) { EmbedCommand.call(this, { name: 'media', - button: '' + button: '', + prompt: new Prompt({ + command: this, + placeholder: 'Enter a twitter, or youtube url...' + }) }); } inherits(MediaEmbedCommand, EmbedCommand); @@ -813,9 +849,13 @@ var Toolbar = (function() { }, updateForSelection: function(selection) { var toolbar = this; - toolbar.show(); - toolbar.positionToContent(selection.getRangeAt(0)); - updateButtonsForSelection(toolbar.buttons, selection); + if (selection.isCollapsed) { + toolbar.hide(); + } else { + toolbar.show(); + toolbar.positionToContent(selection.getRangeAt(0)); + updateButtonsForSelection(toolbar.buttons, selection); + } }, positionToContent: function(content) { var directions = ToolbarDirection; @@ -999,7 +1039,7 @@ var EmbedIntent = (function() { embedIntent.isShowing = false; embedIntent.isActive = false; - function embedIntentHandler() { + function embedIntentHandler(e) { var currentNode = getCurrentSelectionRootNode(); var currentNodeHTML = currentNode.innerHTML; if (currentNodeHTML === '' || currentNodeHTML === '
') { @@ -1007,6 +1047,7 @@ var EmbedIntent = (function() { } else { embedIntent.hide(); } + e.stopPropagation(); } rootElement.addEventListener('keyup', embedIntentHandler); diff --git a/src/css/editor.css b/src/css/editor.css index 3a4639f5c..f3806194f 100644 --- a/src/css/editor.css +++ b/src/css/editor.css @@ -30,3 +30,8 @@ padding-left: 1.05em; color: #a0a0a0; } +.ck-editor img { + display: block; + max-width: 100%; + margin: 0 auto; +} \ No newline at end of file diff --git a/src/css/embeds.css b/src/css/embeds.css index a2c84facc..f2dc9b7d4 100644 --- a/src/css/embeds.css +++ b/src/css/embeds.css @@ -44,3 +44,7 @@ -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } + +.ck-file-input { + display:none; +} diff --git a/src/js/commands.js b/src/js/commands.js index 04d8df548..03594acdd 100644 --- a/src/js/commands.js +++ b/src/js/commands.js @@ -188,7 +188,7 @@ function EmbedCommand(options) { Command.call(this, options); } inherits(EmbedCommand, Command); -EmbedCommand.prototype.exec = function(value) { +EmbedCommand.prototype.exec = function() { alert(this.name); }; @@ -197,13 +197,49 @@ function ImageEmbedCommand(options) { name: 'image', button: '' }); + + var fileBrowser = document.createElement('input'); + fileBrowser.type = 'file'; + fileBrowser.accept = 'image/*'; + fileBrowser.className = 'ck-file-input'; + fileBrowser.addEventListener('change', this.handleFile); + document.body.appendChild(fileBrowser); + this.fileBrowser = fileBrowser; } inherits(ImageEmbedCommand, EmbedCommand); +ImageEmbedCommand.prototype = { + exec: function() { + var clickEvent = new MouseEvent('click', { bubbles: false }); + this.fileBrowser.dispatchEvent(clickEvent); + }, + handleFile: function(e) { + var target = e.target; + var file = target && target.files[0]; + var reader = new FileReader(); + reader.onload = function(event) { + var base64File = event.target.result; + var selectionRoot = getCurrentSelectionRootNode(); + var image = document.createElement('img'); + image.src = base64File; + + // image needs to be placed outside of the current empty paragraph + var editorNode = selectionRoot.parentNode; + editorNode.insertBefore(image, selectionRoot); + editorNode.removeChild(selectionRoot); + }; + reader.readAsDataURL(file); + target.value = null; // reset + } +}; function MediaEmbedCommand(options) { EmbedCommand.call(this, { name: 'media', - button: '' + button: '', + prompt: new Prompt({ + command: this, + placeholder: 'Enter a twitter, or youtube url...' + }) }); } inherits(MediaEmbedCommand, EmbedCommand); diff --git a/src/js/embed-intent.js b/src/js/embed-intent.js index 7bfd83090..0deb1c4bd 100644 --- a/src/js/embed-intent.js +++ b/src/js/embed-intent.js @@ -22,7 +22,7 @@ var EmbedIntent = (function() { embedIntent.isShowing = false; embedIntent.isActive = false; - function embedIntentHandler() { + function embedIntentHandler(e) { var currentNode = getCurrentSelectionRootNode(); var currentNodeHTML = currentNode.innerHTML; if (currentNodeHTML === '' || currentNodeHTML === '
') { @@ -30,6 +30,7 @@ var EmbedIntent = (function() { } else { embedIntent.hide(); } + e.stopPropagation(); } rootElement.addEventListener('keyup', embedIntentHandler); diff --git a/src/js/toolbar.js b/src/js/toolbar.js index 44ad2a237..3a0e174fe 100644 --- a/src/js/toolbar.js +++ b/src/js/toolbar.js @@ -71,9 +71,13 @@ var Toolbar = (function() { }, updateForSelection: function(selection) { var toolbar = this; - toolbar.show(); - toolbar.positionToContent(selection.getRangeAt(0)); - updateButtonsForSelection(toolbar.buttons, selection); + if (selection.isCollapsed) { + toolbar.hide(); + } else { + toolbar.show(); + toolbar.positionToContent(selection.getRangeAt(0)); + updateButtonsForSelection(toolbar.buttons, selection); + } }, positionToContent: function(content) { var directions = ToolbarDirection;