So verwenden Sie die Markdown-Editor-Komponente in Vue3

# Verwenden von npm
npm ich @kangc/v-md-editor@next -S

# Garn verwenden
Garn hinzufügen @kangc/v-md-editor@next

importiere { creatApp } von „vue“;
importiere VMdEditor von „@kangc/v-md-editor“;
importiere '@kangc/v-md-editor/lib/style/base-editor.css';
importiere githubTheme aus „@kangc/v-md-editor/lib/theme/github.js“;
importiere '@kangc/v-md-editor/lib/theme/style/github.css';

VMdEditor.use(githubTheme);

const app = creatApp(/*...*/);

app.verwenden(VMdEditor);

<Vorlage>
  <v-md-editor v-model="text" height="400px"></v-md-editor>
</Vorlage>

<Skript>
importiere { ref } von 'vue';

Standard exportieren {
  aufstellen () {
    const text = ref('');
    
    zurückkehren {
      Text
    }
  }
}
</Skript>

<Vorlage>
  <v-md-editor :value="markdown" mode="vorschau"></v-md-editor>
</Vorlage>

<Skript>
importiere { ref } von 'vue';

Standard exportieren {
  aufstellen () {
    Konstante Markdown-Werte = ref('');
    
    zurückkehren {
      Markdown
    }
  }
}
</Skript>

// Haupt.js
importiere { creatApp } von „vue“;
importiere VMdPreview aus „@kangc/v-md-editor/lib/preview“;
importiere '@kangc/v-md-editor/lib/style/preview.css';
// Importieren Sie das von Ihnen verwendete Design. Hier nehmen wir das GitHub-Design als Beispiel. importiere githubTheme von '@kangc/v-md-editor/lib/theme/github';
importiere '@kangc/v-md-editor/lib/theme/style/github.css';

VMdPreview.use(githubTheme);

const app = creatApp(/*...*/);

app.use(VMdPreview);

<Vorlage>
  <v-md-Vorschau :text="Markdown"></v-md-Vorschau>
</Vorlage>

<Skript>
importiere { ref } von 'vue';

Standard exportieren {
  aufstellen () {
    Konstante Markdown-Werte = ref('');
    
    zurückkehren {
      Markdown
    }
  }
}
</Skript>

// Haupt.js
importiere { creatApp } von „vue“;
importiere VMdPreviewHtml aus „@kangc/v-md-editor/lib/preview-html“;
importiere '@kangc/v-md-editor/lib/style/preview-html.css';

// Importieren Sie den Stil des Designs. Importieren Sie '@kangc/v-md-editor/lib/theme/style/vuepress'.

const app = creatApp(/*...*/);

app.use(VMdPreviewHtml);

<Vorlage>
  <!-- preview-class ist der Stilklassenname des Designs, z. B. ist vuepress vuepress-markdown-body -->
  <v-md-preview-html :html="html" Vorschau-Klasse="vuepress-markdown-body"></v-md-preview-html>
</Vorlage>

<Skript>
importiere { ref } von 'vue';

Standard exportieren {
  aufstellen () {
    const html = ref('<div data-v-md-line="1"><h1 align="center">Auf Vue basierender Markdown-Editor</h1>');
    
    zurückkehren {
      html
    }
  },
};
</Skript>