imzbf / md-editor-v3

Markdown editor for vue3, developed in jsx and typescript, dark theme、beautify content by prettier、render articles directly、paste or clip the picture and upload it...
https://imzbf.github.io/md-editor-v3
MIT License
1.69k stars 162 forks source link

Slot inside the actual editor #725

Open DerSimeon opened 1 day ago

DerSimeon commented 1 day ago

A great idea

It would be good to have a slot inside the editor, so we make changes to the actual text-input. something like:


<template #editor class="bg-gray-600">
</editor>```

In my use-case we need to add a custom context menu that is only available inside the editor.
imzbf commented 17 hours ago

The editing area is created using CodeMirror, and it's not possible to embed HTML into it via slots. The content area of the editor is managed by CodeMirror, so any custom HTML elements, such as a context menu, should be defined outside of the editor in other locations. You can adjust the position of your menu according to the following example to ensure it displays correctly where you need it.

editorRef.value?.domEventHandlers({
  contextmenu(e) {
    // Consider displaying the menu or adjusting its position here.
    console.log('===', e);
  },
});