开始

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

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

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

<!-- WysiwygEditor.vue -->
<template>
      @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"
</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>
  <!-- ... -->
</template>
<!-- ... -->

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

现在看起来是不是越来越接近了。还缺少按钮动作的执行方法。这里要用到 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;
}

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

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

// ...
  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

结果看起来是这样

完全没有任何样式。别忘了，前面我们安装了 @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代码之后，看起就正常了

同时还需要在组件传出本文编辑器数据的时候，进行转化，这里要用到前面安装的 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>

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

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

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

基于Vue+Nodejs实现宿舍管理系统
考虑到实用性，该系统需要拆分为两大子系统，一个是学生端系统，一个是后台管理端系统。学生端系统主要提供给学生使用，负责一些宿舍记录及个人信息记录的基本操作；后台管理模块则是主要负责对所有学生信息的整理，提供宿舍管理、楼层管理、数据查看等权限，提供给宿舍管理员使用的。
SpringCloud微服务实战——搭建企业级开发框架（四十一）：扩展JustAuth+SpringSecurity+Vue实现多租户系统微信扫码、钉钉扫码等第三方登录
如果我们自己的系统需要调用第三方登录，那么我们就需要实现单点登录客户端，然后跟需要对接的平台调试登录SDK。JustAuth是第三方授权登录的工具类库，对接了国外内数十家第三方登录的SDK，我们在需要实现第三方登录时，只需要集成JustAuth工具包，然后配置即可实现第三方登录，省去了需要对接不同SDK的麻烦。 JustAuth官方提供了多种入门指南，集成使用非常方便。但是如果要贴合我们自有开发框架的业务需求，还是需要进行整合优化。下面根据我们的系统需求，从两方面进行整合：一是支持多租户功能，二是和自有系统的用户进行匹配。
Springboot+Vue实现物业管理系统
使用SpringBoot+Mybatis+BootStrap+Layui+VUE制作的智慧小区物业管理系统。本系统采用了 B/S 架构，Java、Html、Css、Js 等技术，使用了主流的后台开发框架SpringBoot(SpringMVC+Spring+Mybatis)，前端开发框架使用了 LayUI、Vue、JQuery 以及 Vue的前端组件库 Element-UI，采用了开源的轻量级数据库 Mysql 进行开发。实现了小区管理、房产管理、设备管理、业主管理、服务管理、车位管理等主要功能。...