首页 前端知识 jquery vue3简单富文本编辑器实现

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

2024-05-06 09:05:58 前端知识 前端哥 788 883 我要收藏

前端简单易懂的富文本编辑器开发-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。以及需要给预览视图初始化的样式。

初始化主要dom

视图切换,内部代码处理

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

校验

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7181.html
标签
低代码
评论
发布的文章

exceljs

2024-05-11 10:05:00

Java研学-JSON与AJAX

2024-05-10 22:05:37

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!