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

实用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事件去多次触发提交数据，这样才能保证校验比较正常。（这里不需要考虑性能问题）

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