如何用Vue实现简易的富文本编辑器,并支持Markdown语法

简介: 前端开发经常会用到富文本编辑器,比如CKEditor,动不动一个库几十M的代码量,其中涉及许多你可能用不到的功能特性和相关设置,CKEditor最新版本的代码仓库就有接近2000个JS文件,300,000行代码。

前端开发经常会用到富文本编辑器,比如CKEditor,动不动一个库几十M的代码量,其中涉及许多你可能用不到的功能特性和相关设置,CKEditor最新版本的代码仓库就有接近2000个JS文件,300,000行代码。


可是如果你只需要一个简易版的编辑器,真的值得引入这么一个庞大的库吗?

今天我们从实现一个简易版的编辑器带大家了解一下其背后涉及到的原理。


开始


这个编辑器将要使用到markdown:一个简洁语法并且自带样式的语言,而且远比纯HTML的输入输出要安全得多。

首先,我们需要一些依赖包。 @ts-stack/markdownturndown@ts-stack/markdown是用来将markdown语法转化为HTML代码显示用的,而turndown是将HTML代码转化为markdown语言。

接下来,创建一个基础的Vue组件,命名为WysiwygEditor.vue,在组件中添加一个div元素,并且将它的contenteditable属性设置为true,然后添加一些Tailwind样式去美化一下。

<!-- WysiwygEditor.vue -->
<template>
  <div>
    <div
      @input="onInput"
      v-html="innerValue"
      contenteditable="true"
      class="wysiwyg-output outline-none border-2 p-4 rounded-lg border-gray-300 focus:border-green-300"
    />
  </div>
</template>
<script>
export default {
  name: 'WysiwygEditor',
  props: ['value'],
  data() {
    return {
      innerValue: this.value
    }
  },
  methods: {
    onInput(event) {
      this.$emit('input', event.target.innerHTML)
    }
  }
}
</script>

然后使用该组件:

<!-- Some other component -->
<template>
  <!-- ... -->
  <wysiwyg-editor v-model="someText" />
  <!-- ... -->
</template>
<!-- ... -->

看起来像这样


R%W8)]]`X{Y(~J$HO`H_18C.png

现在这个div元素的样式看起来像textarea 标签的效果了。


让文本变为富文本


在编辑器的上面会有一些带有bold,italic,underlined,headings,lists等文本的编辑按钮。并且上面会有对应功能的图标。可以通过安装fontawesome icon来实现。然后对按钮进行一些样式设置。

.button {
  @apply border-2;
  @apply border-gray-300;
  @apply rounded-lg;
  @apply px-3 py-1;
  @apply mb-3 mr-3;
}
.button:hover {
  @apply border-green-300;
}

先将这些按钮添加鼠标点击后的监听方法,后面我们会去实现每一个方法里的具体执行。

<!-- WysiwygEditor.vue -->
<template>
  <!-- ... -->
    <div class="flex flex-wrap">
      <button @click="applyBold" class="button">
        <font-awesome-icon :icon="['fas', 'bold']" />
      </button>
      <button @click="applyItalic" class="button">
        <font-awesome-icon :icon="['fas', 'italic']" />
      </button>
      <button @click="applyHeading" class="button">
        <font-awesome-icon :icon="['fas', 'heading']" />
      </button>
      <button @click="applyUl" class="button">
        <font-awesome-icon :icon="['fas', 'list-ul']" />
      </button>
      <button @click="applyOl" class="button">
        <font-awesome-icon :icon="['fas', 'list-ol']" />
      </button>
      <button @click="undo" class="button">
        <font-awesome-icon :icon="['fas', 'undo']" />
      </button>
      <button @click="redo" class="button">
        <font-awesome-icon :icon="['fas', 'redo']" />
      </button>
    </div>
  <!-- ... -->
</template>
<!-- ... -->

编辑器现在看起来是这样了


]2D]2P0S[{S1BM5@9D`QBKV.png

现在看起来是不是越来越接近了。还缺少按钮动作的执行方法。这里要用到document.execCommand,虽然MDN已经宣称将废弃该特性,但是大部分浏览器仍然支持。我们暂且还是使用它。

让我们通过它来实现applyBold方法

methods: {
  // ...
  applyBold() {
    document.execCommand('bold')
  },
  // ...
}

非常简洁明了,同样,我们来实现其它方法

// ...
  applyItalic() {
    document.execCommand('italic')
  },
  applyHeading() {
    document.execCommand('formatBlock', false, '<h1>')
  },
  applyUl() {
    document.execCommand('insertUnorderedList')
  },
  applyOl() {
    document.execCommand('insertOrderedList')
  },
  undo() {
    document.execCommand('undo')
  },
  redo() {
    document.execCommand('redo')
  }
  // ...

这里唯一需要说明的是applyHeading,因为我明确需要在此处指定所需的元素。使用这些命令后,可以预先对输出的元素标签进行一些样式设置

.wysiwyg-output h1 {
  @apply text-2xl;
  @apply font-bold;
  @apply pb-4;
}
.wysiwyg-output p {
  @apply pb-4;
}
.wysiwyg-output p {
  @apply pb-4;
}
.wysiwyg-output ul {
  @apply ml-6;
  @apply list-disc;
}
.wysiwyg-output ol {
  @apply ml-6;
  @apply list-decimal;
}

有了一定样式后,在输入框中输入一些内容


`BDP74DSY7PR0E6E2W{O$GU.png

为了使得更美观一点,把空行用空的段落标签代替,以回车结束的内容归为一个段落

// ...
  data() {
    return {
      innerValue: this.value || '<p><br></p>'
    }
  },
  mounted() {
    document.execCommand('defaultParagraphSeparator', false, 'p')
  },
  // ...


添加markdown支持


如果我想直接在编辑器里写markdown语法,暂时还不支持

# Hello, world!
**Lorem ipsum dolor** _sit amet_
* Some
* Unordered
* List
1. Some
1. Ordered
1. List

结果看起来是这样


TB[QI7N7HSGR{ZASIY`S{M2.png

完全没有任何样式。别忘了,前面我们安装了@ts-stack/markdown库,现在可以使用了

import { Marked } from '@ts-stack/markdown'
export default {
  name: 'WysiwygEditor',
  props: ['value'],
  data() {
    return {
      innerValue: Marked.parse(this.value) || '<p><br></p>'
    }
  },
// ...

我们把输入的内容markdown语法转化为HTML代码之后,看起就正常了


(B1SH3KBJ1BM$JSYTF~%D]N.png

同时还需要在组件传出本文编辑器数据的时候,进行转化,这里要用到前面安装的turndown

import TurndownService from 'turndown'
export default {
// ...
  methods: {
    onInput(event) {
      const turndown = new TurndownService({
        emDelimiter: '_',
        linkStyle: 'inlined',
        headingStyle: 'atx'
      })
      this.$emit('input', turndown.turndown(event.target.innerHTML))
    },
// ...

让我们把编辑器中输入的markdown语法文本在页面中通过模板输出后的效果

<!-- Some other component -->
<template>
  <!-- ... -->
  <wysiwyg-editor v-model="someText" />
  <pre class="p-4 bg-gray-300 mt-12">{{ someText }}</pre>
  <!-- ... -->
</template>

同步输入输出,内容是一致的,没有任何问题


3HK%{S~NT6}X9I{L}E3G~{F.png


看起来一切正常,达到了我们想要的效果。下面是全部的代码

<template>
  <div>
    <div class="flex flex-wrap">
      <button @click="applyBold" class="button">
        <font-awesome-icon :icon="['fas', 'bold']" />
      </button>
      <button @click="applyItalic" class="button">
        <font-awesome-icon :icon="['fas', 'italic']" />
      </button>
      <button @click="applyHeading" class="button">
        <font-awesome-icon :icon="['fas', 'heading']" />
      </button>
      <button @click="applyUl" class="button">
        <font-awesome-icon :icon="['fas', 'list-ul']" />
      </button>
      <button @click="applyOl" class="button">
        <font-awesome-icon :icon="['fas', 'list-ol']" />
      </button>
      <button @click="undo" class="button">
        <font-awesome-icon :icon="['fas', 'undo']" />
      </button>
      <button @click="redo" class="button">
        <font-awesome-icon :icon="['fas', 'redo']" />
      </button>
    </div>
    <div
      @input="onInput"
      v-html="innerValue"
      contenteditable="true"
      class="wysiwyg-output outline-none border-2 p-4 rounded-lg border-gray-300 focus:border-green-300"
    />
  </div>
</template>
<script>
import { Marked } from '@ts-stack/markdown'
import TurndownService from 'turndown'
export default {
  name: 'WysiwygEditor',
  props: ['value'],
  data() {
    return {
      innerValue: Marked.parse(this.value) || '<p><br></p>'
    }
  },
  mounted() {
    document.execCommand('defaultParagraphSeparator', false, 'p')
  },
  methods: {
    onInput(event) {
      const turndown = new TurndownService({
        emDelimiter: '_',
        linkStyle: 'inlined',
        headingStyle: 'atx'
      })
      this.$emit('input', turndown.turndown(event.target.innerHTML))
    },
    applyBold() {
      document.execCommand('bold')
    },
    applyItalic() {
      document.execCommand('italic')
    },
    applyHeading() {
      document.execCommand('formatBlock', false, '<h1>')
    },
    applyUl() {
      document.execCommand('insertUnorderedList')
    },
    applyOl() {
      document.execCommand('insertOrderedList')
    },
    undo() {
      document.execCommand('undo')
    },
    redo() {
      document.execCommand('redo')
    }
  }
}
</script>


结论


只需要87行代码便实现了一个简易的富文本编辑器。虽然功能还是太简单,但是最起码我们知道了实现一个富文本编辑器后面的原理。后面需要增加功能就不是什么难事了。




目录
相关文章
|
23天前
|
Ubuntu Linux 测试技术
Linux系统之部署轻量级Markdown文本编辑器
【10月更文挑战第6天】Linux系统之部署轻量级Markdown文本编辑器
70 1
Linux系统之部署轻量级Markdown文本编辑器
|
2月前
|
JavaScript
vue学习(3)模板语法
vue学习(3)模板语法
59 11
|
3月前
|
存储 安全 数据安全/隐私保护
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
124 0
|
2月前
|
JavaScript
Vue3中路由跳转的语法
Vue3中路由跳转的语法
124 58
|
2月前
|
JavaScript 前端开发 API
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
本文介绍了如何在Vue 3项目中使用v-md-editor组件库来创建markdown编辑器和预览组件。文章提供了安装步骤、如何在main.js中进行全局配置、以及如何在页面中使用VMdEditor和VMdPreview组件的示例代码。此外,还提供了一个完整示例的链接,包括编辑器和预览组件的使用效果和代码。
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
|
2月前
【LaTex、markdown】常用语法写出漂亮的blog
【9月更文挑战第9天】本文介绍了使用LaTeX和Markdown编写美观博客的方法。LaTeX方面,需定义文档类型、设置标题与作者,并利用特定命令处理文本格式、列表、数学公式、图片和超链接。Markdown则通过井号表示标题级别,使用星号或下划线标记文本,简化列表和公式的编写,并以直观方式插入图片和链接。两者均可通过合理布局提升博客的可读性和视觉效果。
|
3月前
|
JavaScript 开发工具 容器
初始Vue、Vue模板语法、数据绑定(2022/7/3)
这篇文章是关于Vue.js基础的介绍,包括Vue的简介、安装使用、开发工具、基础知识、模板语法和数据绑定。文中通过代码实例和页面效果展示了如何创建Vue实例、使用插值和指令语法、以及单向和双向数据绑定的方法。
初始Vue、Vue模板语法、数据绑定(2022/7/3)
|
3月前
Markdown使用HTML语法实现复杂表格
Markdown使用HTML语法实现复杂表格
129 1
|
3月前
|
资源调度
机器人学 markdown数学公式常用语法
本文提供了Markdown中数学公式的常用语法,包括行内公式、行间公式、基本运算、矩阵、微积分、大小比较、开根号、表格、角标、头顶标、空格、括号、特殊字符、分式、文字、希腊字母以及分类括号的详细使用方法和示例。
52 1
|
3月前
|
存储 JavaScript 前端开发
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】
文章展示了在Vue项目中通过集成Quill富文本编辑器实现公告功能的完整开发过程,包括前端的公告发布、修改、删除操作以及后端的数据存储和处理逻辑。
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】