开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第24天，点击查看活动详情

前言

在学习中有创建文章这个模块，中间需要使用到markdown写入内容

记录一下该功能的实现过程

markdown

需要使用tui.editor这个库

安装tui.editor

npm i @toast-ui/editor@3.0.2

渲染基本的结构，视图上方是markdown区域，下方是提交按钮,markdown区域暂时为空

<template>
  <div class="markdown-container">
    <!-- markdown -->
    <div id="markdown-box"></div>
    <!-- 按钮 -->
    <div class="bottom">
      <el-button type="primary" @click="onSubmitClick">{{
        $t('msg.article.commit')
      }}</el-button>
    </div>
  </div>
</template>

接下来去做初始化markdown前的准备，需要引入MKEditor用来创建markdown实例，还需要引入css样式和国际化内容

import MkEditor from '@toast-ui/editor'
import '@toast-ui/editor/dist/toastui-editor.css'
import '@toast-ui/editor/dist/i18n/zh-cn'

准备完成后，初始化markdown，首先声明markdown实例，创建一个方法initEditor用来初始化

let mkEditor

const initEditor = () => {}

在initEditor方法中，使用导入的MKEditor创建markdown实例，其中需要传入配置对象，指定几项内容

el：markdown渲染的区域
height：高度
previewStyle：样式 'vertivcal'为竖向展示
language：国际化

const initEditor = () => {
  mkEditor = new MKEditor({
    el,
    height: '500px',
    previewStyle: 'vertical',
    language:  'en'
  })
  mkEditor.getMarkdown()
}

在onMounted中获取markdown区域节点后，调用初始化方法即可

let el

onMounted(() => {
  el = document.querySelector('#markdown-box')
  
  initEditor()
})

这样基本的markdown就完成了，下面还需要处理国际化问题

国际化

我们知道国际化是取决于配置项的language的值，所以需要根据当前的语言去决定markdown的语言，而不是写死为'en',我们获取当前国际化语言去判断即可

const initEditor = () => {
  mkEditor = new MKEditor({
    ···
    language: store.getters.language === 'zh' ? 'zh-CN' : 'en'
  })
  mkEditor.getMarkdown()
}

监听到语言变化后，需要重新调用initEditor方法，才能获取最新的语言。

下面是监听语言变化的方法，传入一个函数，监听到语言变化后执行

// 监听语言变化
export function watchSwitchLang(...cbs) {
  watch(
    () => store.getters.language,
    () => {
      cbs.forEach((cb) => cb())
    }
  )
}

导入并调用该方法

watchSwitchLang(() => {})

想想回调函数里面要写什么？

如果用户在编辑区写入了内容，再切换国际化，那么内容不能消失，所以应该先获取内容，接着去销毁当前的markdown实例，再初始化markdown实例，把内容写入即可

watchSwitchLang(() => {
  if (!el) {
    return
  }
  // 获取内容
  const htmlStr = mkEditor.getHTML()
  // 销毁
  mkEditor.destroy()
  // 初始化
  initEditor()
  // 写入内容
  mkEditor.setHTML(htmlStr)
})

这样国际化也处理完成了

markdown与其国际化实现

前言

markdown

国际化