已实现:关于富文本组件库vue2-editor的使用方法以及一些必要的注意事项,特别是设置完富文本以后的回显问题。以及在光标位置插入字符串等

前言

目前常见的基于vue的富文本编辑器有两个:“vue2-editor” 和 “vue-quill-editor”
都是用于Vue.js的富文本编辑器组件,它们具有一些共同的特点,但也有一些区别。

共同点:

1、富文本编辑功能: 两者都提供了富文本编辑功能,允许用户创建、编辑和格式化文本内容,包括加粗、斜体、链接、列表等功能,js还支持了光标位置获取以及在指定位置插入字符串功能。

2、支持Vue.js: “vue2-editor” 和 “vue-quill-editor” 都是为Vue.js框架设计的组件,可以轻松与Vue项目集成。

3、可自定义配置: 你可以根据自己的需求配置和自定义这两个编辑器的外观和功能,包括设置工具栏、上传图片、自定义样式等。

区别:

1、底层编辑器引擎不同: 最大的区别在于它们使用不同的底层编辑器引擎。 “vue2-editor” 使用了基于slate的编辑器引擎,而 “vue-quill-editor” 使用了Quill编辑器引擎。这意味着它们在底层实现和支持的功能上有所不同。

2、体积和性能: “vue2-editor” 更轻量,因为它使用了较小的编辑器引擎。这可能使它在性能方面更具优势,尤其是对于需要快速加载的应用。

3、生态系统和插件: “vue-quill-editor” 有一个较大的生态系统,有很多社区插件和主题可供选择。Quill编辑器引擎也有广泛的文档和支持。“vue2-editor” 也有一些插件和主题,但它的生态系统相对较小。

但是不友好的是,这两个库都是外国人整的,并没有系统的中文文档,网络提供的博客也是稀缺。

场景

我大致讲讲这个组件的使用场景:往往是在管理后台使用组件来编辑富文本,然后在回显到页面上供用户观看(现在手机端居多),所以就涉及两部分内容,就以管理后台和手机端h5为例,使用vue2-editor做讲解。

一、管理后台的编辑保存使用

安装就大致提一句吧,应该知道名字就都会安装了吧:

cnpm install vue2-editor

这是组件使用

<VueEditor
           ref="xiangxiagnganyuGuide"
           :editorOptions="editorOption"
           v-model="detail.questionList.question1.yixiangGuideWord"
           useCustomImageHandler
           style="width: 99%;"
       >VueEditor>

这是配置组件的一些工具能力,注释掉的部分也可以打开,包括列表、文件上传等功能都可以实现。

export let editorOption= {
    modules:{
        toolbar: [
            ['bold', 'italic', 'underline', 'strike'], //加粗,斜体,下划线,删除线
            // ['blockquote', 'code-block'], //引用,代码块
            // [{'header': 1}, {'header': 2}], // 标题,键值对的形式;1、2表示字体大小
            // [{'list': 'ordered'}, {'list': 'bullet'}], //列表
            // [{'script': 'sub'}, {'script': 'super'}], // 上下标
            // [{'indent': '-1'}, {'indent': '+1'}], // 缩进
            // [{'direction': 'rtl'}], // 文本方向
            [{'size': ['small', false, 'large', 'huge']}], // 字体大小
            // [{'header': [1, 2, 3, 4, 5, 6, false]}], //几级标题
            [{'color': []}, {'background': []}], // 字体颜色,字体背景颜色
            // [{'font': []}], //字体
            [{'align': []}], //对齐方式
            ['clean'], //清除字体样式
            // ['image', 'video'] //上传图片、上传视频
        ]
    },
    placeholder: "输入内容..."
} //编辑器配置项

然后下图就是编辑的页面展示了:
已实现:关于富文本组件库vue2-editor的使用方法以及一些必要的注意事项,特别是设置完富文本以后的回显问题。以及在光标位置插入字符串等_第1张图片

二、手机端的回显展示富文本

管理后台这里就差不多了,然后就是手机端怎么解析样式,自然不用多说,肯定使用v-html属性来展示,但是这里有一个注意事项:

1、手机端(也就是展示给用户的回显端)也需要安装这个组件,就是为了引用他的样式,不然手机端是无法完美展示他的样式的
cnpm install vue2-editor
2、在main.js中全局引入样式,引入以后,所有的vue组件就可以匹配富文本中带的class样式名了
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme
3、(重要)在展示端展示富文本,这里我写的外层div必须要有,而且必须引用class="ql-editor"这样内部的样式才会生效,这一步非常重要
<div class="ql-editor">
    <p v-html="content"></p>
</div>

如下图:展示的详情
已实现:关于富文本组件库vue2-editor的使用方法以及一些必要的注意事项,特别是设置完富文本以后的回显问题。以及在光标位置插入字符串等_第2张图片
以上就是使用加回显富文本的基本内容了。

额外学习

当然插件还提供了更高级的用法,
1、比如上传图片,你只需要开启上面提到的配置参数中的图片上传功能,然后在组件中启用@image-added=“handleImageAdded”,

<VueEditor
        v-model="currentRow.introduction"
        useCustomImageHandler
        @image-added="handleImageAdded"
        style="width: 540px; min-height: 200px"
>VueEditor>

这个是handleImageAdded方法,里面的uploadImg就是自己的上传方法了,这个方法自定义:

async handleImageAdded(file, Editor, cursorLocation, resetUploader) {
            try {
                const res = await uploadImg(this, file);
                if (res.code == 200) {
                    Editor.insertEmbed(cursorLocation, "image", res.data);
                    resetUploader();
                } else {
                    this.$Message.error(res.msg);
                }
            } catch (e) {
                console.log(e);
            }
        },

2、(牛批)在光标位置插入指定字符串:还有很多自带的方法,作为普通输入框用也有比input多很多的优势,比如假设你想在光标位置插入指定内容,你使用input可能需要使用js对数据进行复杂的处理,但是vue2-editor他就自带了方法insertText,再配合他便捷的获取光标索引位置的方法,很容易进行插入操作。

<VueEditor
    ref="xiangxiagnganyuGuide"
    :editorOptions="editorOption"
    v-model="detail.questionList.question1.yixiangGuideWord"
    useCustomImageHandler
    style="width: 99%;"
>VueEditor>
><Button @click="insertTextAtCursor(1,'[NAME]')">日程名称Button>
insertTextAtCursor(type,content) {
	let quill = null
	 if (type === 1){
	     quill = this.$refs.xiangxiagnganyuGuide.quill
	 }
	 const cursorPosition = quill.getSelection().index; // 获取光标位置
	 const newText = content;
	
	 // 在光标位置插入文本
	 quill.insertText(cursorPosition, newText, 'user');
	
	 // 如果需要,更新Vue的绑定数据
	 this.content = quill.root.innerHTML;
},

结语:

组件很强大,同时也可以作为一个强大的普通文本框使用(隐藏掉工具栏),可以使用里面的插入方法,简直不要太爽。主要是使用找资料太难了,所以我来自己整理一下,下次使用的时候直接看自己的记录,不然下次忘了又得找半天资料。

感谢大家的阅览和关注,下一期再见

你可能感兴趣的:(vue.js,前端,javascript)