diff --git a/README.md b/README.md index 6768119..5bce291 100644 --- a/README.md +++ b/README.md @@ -54,7 +54,10 @@ All keys are optional. }, // limit content height if you wish. If not set, editor size will grow with content. - maxHeight: "500px" + maxHeight: "500px", + + // set to 'true' this will insert plain text without styling when you paste something into the editor. + forcePlainTextOnPaste: true } ``` Available Modules: diff --git a/src/editor/Editr.vue b/src/editor/Editr.vue index 2a2a4af..4d17640 100644 --- a/src/editor/Editr.vue +++ b/src/editor/Editr.vue @@ -190,6 +190,16 @@ export default { this.selection = this.saveSelection(); }, + onPaste(e) { + e.preventDefault(); + + // get a plain representation of the clipboard + var text = e.clipboardData.getData("text/plain"); + + // insert that plain text text manually + document.execCommand("insertHTML", false, text); + }, + syncHTML () { if (this.html !== this.$refs.content.innerHTML) this.innerHTML = this.html; @@ -204,6 +214,11 @@ export default { this.$refs.content.addEventListener("focus", this.onFocus); this.$refs.content.addEventListener("input", this.onInput); this.$refs.content.addEventListener("blur", this.onContentBlur, { capture: true }); + + if (this.mergedOptions.forcePlainTextOnPaste === true) { + this.$refs.content.addEventListener("paste", this.onPaste); + } + this.$refs.content.style.maxHeight = this.mergedOptions.maxHeight; },