vue-medium-editor: Error in event handler when creating anchor links

When I use regular toolbar buttons it formats the text correctly without an error. However, when I use the anchor popup, load in a link then confirm I get the following error:

[Vue warn]: Error in event handler for "edit": "TypeError: Cannot read property 'innerHTML' of undefined"

This is the code I am using as a method:

processEditOperation (operation) {
	this.text = operation.event.srcElement.innerHTML
}

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 15 (8 by maintainers)

Most upvoted comments

I found a fix that seems to work for now. What I’ve noticed is that the event property is an empty object when we are trying to insert a link. So it makes sense that the error happens: that it could not find the innerHtml.

But the api property is not empty and it leads to the innerHTML property. Below is what I’ve done for the applyTextEdit(). I’ve clicked all the buttons and the buttons still work along with the anchor button.

<template>

<medium-editor
   :text='text'
   :options="editorOpts"
   :custom-tag="div"
   v-on:edit='applyTextEdit' 
   :reuse-medium-editor-instance="false"/>

<code>{{ text }}</code>
</template>

<script>
import editor from "vue2-medium-editor";

export default {
  components: {
    'medium-editor': editor
  },
  data() {
    return {
       text: '',
       editorOpts: {
          toolbar: {
            buttons: ['bold', 'italic', 'unorderedlist','orderedlist', 'anchor'],
            diffLeft: 0,
            diffTop: -15,
          },
          placeholder: false
       }
    }
  },
  methods: {
     applyTextEdit: function (operator) {
        console.log(operator);

        this.text = operator.api.origElements.innerHTML;
     }
}
</script>

junerockwell on Sep 27, 2017

This is helpful. We should reference this in the readme.

janwirth on Sep 29, 2017

So what happens when you click ‘save link’ is that a few different events are triggered. The event that we listen to in the vue-medium-editor bridge is the editableInput event.

Apparently, when you click ‘save link’ some of the information is lost and unlike the keyup event it does not trigger editableInput with the correct data in the arguments. In the playground you might use your browser debugger to set a breakpoint on that line and check if that is the case. If so, the error should be traced back.

I will not invest any further time doing the research but if you need any hints or have any question or your app comes closer to 1.0 feel free to reach out.

janwirth on Aug 11, 2017

I wanted to give you more but I had a call coming in right at this second 😃 Did not plan to leave you alone on that one.

You can use this here to trigger the editableContent event. https://github.com/yabwe/medium-editor/blob/master/API.md#triggername-data-editable

if (operation.event.srcElement === undefined) {
  operation.event.api.elements( el => operation.event.api.trigger('editableContent', ???, el)
}

But I just tried this out and I can not get the result I expected.

We will have to dig through the medium editor source code.

janwirth on Aug 11, 2017