jquery vue3简单富文本编辑器实现

前端简单易懂的富文本编辑器开发 -vue3

• 实用 vue3+jquery 实现简单富文本编辑器
• • 编辑器封装
  • HOOKS 的实现
  • • 1 初始化界面功能：编辑器内部依赖了 jquery, 即都通过 jquery 操作 dom 实现。这里面初始化主要就是初始化，需要操作的主要 dom。以及需要给预览视图初始化的样式。
    • 视图切换，内部代码处理
    • 校验

实用 vue3+jquery 实现简单富文本编辑器

上篇文章我们讲了，如何实用 html+jquery 快速实现一个富文本编辑器，今天我们接着来讲在 vue3 中实现这个功能，主要思路还就是 vue3+jquery, 采用 hooks 实现。如果没有看过上一篇文档，请先看上一篇文章。

编辑器封装

我们在 vue 中封装富文本编辑器组件，该组件通过 v -model:value 实现向表单中绑定值，以及通过代码视图中的 textarea 的 blur 或者 change 事件实现校验。

div class="editor" :style="size">
    div class="tools">
      div class="action_button">
        div
          :class="{item: true, active: toolActive === item.key}"
          v-for="(item, index) in tools"
          :key="index"
        >
          Tooltip :title="item.title">
            div class="item-tool-button" @click="item.click(item)">
              SvgIcon size="22" :name="item.icon" prefix="editor" class="item-tool-icon" />
              {{ item.title }}
            /div>
          /Tooltip>
        /div>
      /div>
    /div>
    div class="content" ref="editorRef">
      iframe class="contentiframe" frameborder="0">/iframe>
      textarea class="contentCode" contenteditable="true" @blur="blur">/textarea>
      div class="empty">请输入{{ props.placeholder }}/div>
    /div>
  /div>

工具栏位置，可以自行定义和修改，注意判断逻辑就行。这个可以根据自己的需求自行处理。
注意 content 部分，这里就是主要的编辑器事件。
代码结构：
editorRef 这是主要内容部分的 ref，hooks 中通过这个 ref 去处理内部的内容和代码。
iframe 是预览视图。
textarea 是代码视图。这个一定要注意，textarea 是触发表单校验的所在，这里有处理技巧。后面会讲校验的实现。
empty 这个是通过定位, 在 textarea 和 iframe 下面，来实现没有内容的时候展示为空的提示。

下面关键是这个 hooks 如何实现的问题。

const { toolActive, showView, showCode, showEmpty, setMenuActive, initVal } = useEditor(
    editorRef,
    change
  );

这里就是这个 hooks 向外暴露的主要方法。当然需要传递参数进去。第一个就是上面提到的 ref, 第二个就是内部内容变化，触发的外层组件向 form 表单更新数据的方法。通过 v -model:value 绑定的值，实际上我们通过 Emits(“update:value”, htmlString)事件 emits 上去就能实现数据的绑定。
toolActive: 这个数一个属性，主要用来控制默认显示那个 tools 按钮以及，工具栏变化，想要向 hooks 内部传递的工具选项。
showView: 展示可视化视图的方法
showCode: 展示代码视图的方法
showEmpty: 展示空提示的方法
setMenuActive: 设置同居激活状态的方法
initVal: 这个方法很重要，主要是实现编辑器的初始化，也就是做数据回显的时候，需要对编辑器内部初始化的方法。
说到这里这个编辑器就可以正常使用了。
下面我们主要讲一下这个 hooks 的基本实现思路：

HOOKS 的实现

1 初始化界面功能：编辑器内部依赖了 jquery, 即都通过 jquery 操作 dom 实现。这里面初始化主要就是初始化，需要操作的主要 dom。以及需要给预览视图初始化的样式。

视图切换，内部代码处理

这一块，之前已经经过主要的逻辑，就是通过给文本元素增减 contentEditable 属性来实现可编辑，切换到代码视图，将该属性去掉即可，恢复即可。具体可以看上一篇文章。

校验

这块我们重点讲一下校验，因为我们时封装的表单项组件，我们必须依赖其内部校验规则不变的情况下，我们扩展。所以我们这里放了一个 textarea，他就是触发表单校验的主要方法。
这里必须要讲一下，因为 textarea 的 blur 或者 change 事件的触发，是我们组件内部无法阻止和控制的，所以这里面就存在一个触发前后的问题。
我们是通过 jquery 的在 textarea 的 change 事件中或者 blur 事件中通过触发给 hooks 中传递的 change 方法向表单 emits 事件来实现的更新数据。这个时候实际上 textarea 的 blur 事件或者 blur 事件已经触发，也就是校验已经弹出提示了，校验确实时为空的。必须通过我们第二次触发事件，才会校验上一次的结果。所以这里最好的处理办法就是利用 textarea 的 change 事件去多次触发提交数据，这样才能保证校验比较正常。（这里不需要考虑性能问题）

后续该编辑器还会继续完善。