如何用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行代码便实现了一个简易的富文本编辑器。虽然功能还是太简单,但是最起码我们知道了实现一个富文本编辑器后面的原理。后面需要增加功能就不是什么难事了。




目录
相关文章
|
10天前
markdown常用语法--花括号(超详细)
markdown常用语法--花括号(超详细)
|
10天前
|
JavaScript 前端开发
请详细解释一下Vue的模板语法中各个指令的具体用法。
请详细解释一下Vue的模板语法中各个指令的具体用法。
21 2
|
10天前
|
JavaScript
第2节:Vue3 模板语法
第2节:Vue3 模板语法
18 0
|
2天前
|
JavaScript API
Vue3 基础语法
该内容介绍了Vue项目的创建和Vue3的语法、响应式API、生命周期、组件通信及跨组件通信方法。包括使用`npm init vue@latest`创建项目,`npm install`初始化,Vue3的`setup`语法,`reactive`、`ref`、`computed`和`watch`的用法,生命周期图解,以及父子组件间的数据传递。此外,还提到了Vue3中使用`provide`和`inject`进行跨层数据传递,以及通过Pinia库进行状态管理。
16 0
Vue3 基础语法
|
10天前
Markdown基础语法详细版
Markdown基础语法详细版
|
10天前
|
安全 网络架构 Python
blog-engine-06-pelican 静态网站生成 支持 markdown 和 reST 语法
这篇内容介绍了多个静态博客引擎的对比及详细教程,包括 Jekyll、Hugo、Hexo、Pelican、Gatsby、VuePress、Nuxt.js 和 Middleman。重点讲述了 Pelican,一个Python编写的静态博客生成器,其特点是静态生成、Markdown写作、丰富的主题和插件系统,以及简单的部署。安装Pelican需要先安装Python,然后通过pip安装Pelican并使用pelican-quickstart初始化博客。文章还提到了Pelican的优点,如速度快、写作体验好、社区支持和高度可定制,但也指出其静态性质和学习曲线较陡峭的不足之处。
|
10天前
|
缓存 JavaScript 前端开发
vue核心语法2
vue核心语法2
|
10天前
|
JavaScript 前端开发 算法
vue核心语法1
vue核心语法1
|
10天前
|
缓存 JavaScript 前端开发
「Vue3系列」Vue3 模板语法
Vue 3 的模板语法允许你声明式地将数据绑定到 DOM(文档对象模型)。这意味着你可以控制哪些数据会在哪些元素中显示,以及如何根据用户交互或应用状态的变化来更新这些元素。
48 0
|
10天前
|
IDE 数据可视化 数据挖掘
Jupyter Notebook使用教程——从Anaconda环境构建到Markdown、LaTex语法介绍
Jupyter Notebook使用教程——从Anaconda环境构建到Markdown、LaTex语法介绍
88 2