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;