diff --git a/src/core/view/components/editor/formats/image.js b/src/core/view/components/editor/formats/image.js index 92adcde215ffd60d9c92f1c5496e3bb7c1e9dbbb..e332fe54b496ff88892ae46b59e6ad60d094b666 100644 --- a/src/core/view/components/editor/formats/image.js +++ b/src/core/view/components/editor/formats/image.js @@ -1,4 +1,32 @@ export default function (Quill) { const Image = Quill.import('formats/image') + const ATTRIBUTES = [ + 'alt', + 'height', + 'width', + 'data-custom', + 'class', + 'data-local' + ] Image.sanitize = url => url + Image.formats = function formats (domNode) { + return ATTRIBUTES.reduce(function (formats, attribute) { + if (domNode.hasAttribute(attribute)) { + formats[attribute] = domNode.getAttribute(attribute) + } + return formats + }, {}) + } + const format = Image.prototype.format + Image.prototype.format = function (name, value) { + if (ATTRIBUTES.indexOf(name) > -1) { + if (value) { + this.domNode.setAttribute(name, value) + } else { + this.domNode.removeAttribute(name) + } + } else { + format.call(this, name, value) + } + } } diff --git a/src/core/view/components/editor/index.vue b/src/core/view/components/editor/index.vue index 8888b4ed62c002bc4ab8ee426e955ac2923f8f0f..1ab5389253bcba62001c82a31200b4e5106de270 100644 --- a/src/core/view/components/editor/index.vue +++ b/src/core/view/components/editor/index.vue @@ -142,9 +142,15 @@ export default { case 'insertImage': { range = quill.getSelection(true) - const { src = '', alt = '', data = {} } = options - quill.insertEmbed(range.index, 'image', this.$getRealPath(src), Quill.sources.USER) + const { src = '', alt = '', width = '', height = '', extClass = '', data = {} } = options + const path = this.$getRealPath(src) + quill.insertEmbed(range.index, 'image', path, Quill.sources.USER) + const local = /^(file|blob):/.test(path) ? path : false + quill.formatText(range.index, 1, 'data-local', local) quill.formatText(range.index, 1, 'alt', alt) + quill.formatText(range.index, 1, 'width', width) + quill.formatText(range.index, 1, 'height', height) + quill.formatText(range.index, 1, 'class', extClass) quill.formatText(range.index, 1, 'data-custom', Object.keys(data).map(key => `${key}=${data[key]}`).join('&')) quill.setSelection(range.index + 1, Quill.sources.SILENT) }