1-添加编辑和删除区域

10-5modal组件编码

modal title="删除文章"

hildeAndDelete

store..dispatch('deletePost',currentId0).tehn({rawData

10-7集成Easymode

const easgMDE=new EasyMDE({element:doucment.getElementById

单独提取成为一个组件

初步组件化

<template>
  <div class="vue-easymde-editor">
    <textarea ref="textArea"></textarea>
  </div>
</template>
<script lang="ts" setup>
import { defineProps, defineEmits, ref, onMounted, onUnmounted, defineExpose, watch } from 'vue'
import EasyMDE, { Options } from 'easymde'
// 类型，属性以及事件
interface EditorProps {
  modelValue?: string;
  options?: Options;
}
interface EditorEvents {
  (type: 'update:modelValue', value: string): void;
  (type: 'change', value: string): void;
  (type: 'blur'): void;
}
const props = defineProps<EditorProps>()
const emit = defineEmits<EditorEvents>()
// 有了模版我们需要一些初始的数据
// 1 暴露对应的方法
// 2 结合页面实现验证功能
const textArea = ref<null | HTMLTextAreaElement>(null)
let easyMDEInstance: EasyMDE | null = null
const innerValue = ref(props.modelValue || '')
watch(() => props.modelValue, (newValue) => {
  if (easyMDEInstance) {
    if (newValue !== innerValue.value) {
      easyMDEInstance.value(newValue || '')
    }
  }
})
onMounted(() => {
  if (textArea.value) {
    // 组装 options
    const config: Options = {
      ...(props.options || {}),
      element: textArea.value,
      initialValue: innerValue.value
    }
    easyMDEInstance = new EasyMDE(config)
    // 监控对应的事件
    easyMDEInstance.codemirror.on('change', () => {
      if (easyMDEInstance) {
        // 拿到当前的值
        const updatedValue = easyMDEInstance.value()
        innerValue.value = updatedValue
        emit('update:modelValue', updatedValue)
        emit('change', updatedValue)
      }
    })
    easyMDEInstance.codemirror.on('blur', () => {
      if (easyMDEInstance) {
        emit('blur')
      }
    })
  }
})
// 销毁对应的实例
onUnmounted(() => {
  if (easyMDEInstance) {
    easyMDEInstance.cleanup()
  }
  easyMDEInstance = null
})
const clear = () => {
  if (easyMDEInstance) {
    easyMDEInstance.value('')
  }
}
const getMDEInstance = () => {
  return easyMDEInstance
}
defineExpose({
  clear,
  getMDEInstance
})
</script>
<style>
.vue-easymde-editor.is-invalid {
  border: 1px solid #dc3545;
}
</style>

第10章 最终的功能 - 编辑和删除文章

前半部分本章代码操作为主，没有特殊的文档，代码提交如下

#10-1 添加编辑和删除区域

代码提交:git.imooc.com/coding-449/…

#10-2 修改文章编码 第一部分 - 改进 Uploader 组件

代码提交:git.imooc.com/coding-449/…

#10-3 修改文章编码 第二部分 - 改进 ValidateInput 组件

代码提交:git.imooc.com/coding-449/…

#10-4 修改文章编码 第三部分 - 完成编辑功能

代码提交:git.imooc.com/coding-449/…

#10-5 Modal组件编码

Bootstrap Modal 文档地址：getbootstrap.com/docs/5.1/co…

代码提交:git.imooc.com/coding-449/…

#改造 markdown 编辑器

#目前流行的 markdown 编辑器

• SimpleMDE - simplemde.com/ （六年没有更新，不维护了）
• EasyMDE - github.com/Ionaru/easy… （SimpleMDE 的 fork，现在最流行的方案）
• cherry-markdown - github.com/Tencent/che… （腾讯的开源产品，大家可以自己去了解下）

#开源库的查找以及选择标准

• 使用英文搜索（google 或者 github）
• Star 数目
• 更新时间以及频率
• 提供 Demo

EasyMDE 的所有的选项： github.com/Ionaru/easy…

EasyMDE 的事件列表： ****github.com/Ionaru/easy…

我开源的 Vue3-EasyMDE 的项目地址: github.com/vikingmute/…