FitsEditor 富文本编辑器

基础用法

基础用法

给编辑器绑定String类型的变量,在编辑器内输入的内容都将以HTML保存

<template>
    <fits-editor v-model="containerHtml" />
</template>
  
<script setup lang="ts">
import { FitsEditor } from '@/fits-components';
let containerHtml = ref("<p>正文</p><br/><p>内容</p>")
</script>

<style lang="scss" scoped>

</style>

配置上传方法

配置编辑器上传地址

除非不使用图片上传，否则必须通过配置uploadImg方法，给编辑器绑定图片上传地址。

<template>
    <fits-editor @uploadImg="uploadImg" @uploadVideo="uploadVideo" v-model="containerHtml" />
</template>
  
<script setup lang="ts">
import { FitsEditor } from '@/fits-components';
let containerHtml = ref("")
const uploadImg = (file: any, callback: any) => {
    // 异步请求
    // uploadImage(file).then(response => {
    //     callback(response.data)
    // }).catch((err: any) => {
    //     console.log("img upload fail:", err)
    // });
    setTimeout(() => {
        //用定时器代替异步请求
        let data = {
            // 图片 src ，必须
            url: 'https://caoguanjie.github.io/fitsadmin/images/logo.png',
            alt: "yyy", // 图片描述文字，非必须
            href: "zzz" // 图片的链接，非必须
        }
        callback(data)
    }, 1000);
}
const uploadVideo = (file: any, callback: any) => {
    setTimeout(() => {
        let data = {
            // 视频 src ，必须
            url: 'https://caoguanjie.github.io/fitsadmin/images/logo.png',
            poster: "xxx.png" // 视频封面图片 url ，可选
        }
        callback(data)
    }, 1000);
}
</script>

<style lang="scss" scoped>

</style>

自定义工具栏-删除默认配置

删除默认配置

如果仅仅想排除掉某些菜单，其他都保留，可以传入excludeKeys进行配置，删除工具栏某些配置

<template>
    <fits-editor v-model="containerHtml" :excludeKeys="excludeKeys" />
</template>
  
<script setup lang="ts">
import { FitsEditor } from '@/fits-components';
let containerHtml = ref("")
const excludeKeys = [
    // "headerSelect",//标题选择
    // "blockquote",//引用
    // "|",
    // "bold",//粗体
    "underline",//下划线
    "italic",//斜体
    "group-more-style",//（菜单组）
    "color",//文字颜色
    "bgColor",//背景色
    "|",
    "fontSize",//默认字号         
    "fontFamily",//默认字体
    "lineHeight",//默认行高
    "|",
    "bulletedList",//无序列表
    "numberedList",//有序列表
    "todo",//待办框
    "group-justify",//（菜单组）
    "group-indent",//（菜单组）
    "|",
    "emotion",//表情
    "insertLink",//插入链接
    "group-image",//（菜单组）
    "group-video",//（菜单组）
    "insertTable",//插入表格
    "codeBlock",//插入代码块
    "divider",//分割线
    "|",
    "undo",//撤销
    "redo",//还原上一步的撤销
    "|",
    "fullScreen",//全屏
]
</script>

<style lang="scss" scoped>

</style>

自定义工具栏-重写配置

重写工具栏配置

通过传入数组toolbarKeys，重新配置工具栏，显示哪些菜单，以及菜单的排序、分组。

<template>
    <fits-editor v-model="containerHtml" :toolbarKeys="toolbarKeys" />
</template>
  
<script setup lang="ts">
import { FitsEditor } from '@/fits-components';
let containerHtml = ref("")
let toolbarKeys = [
    "bold",//粗体
    "|",
    "underline",//下划线
    "|",
    "italic",//斜体
    "|",
    "through",//删除线
    "code",//行内代码
    "sub",//下标
    "sup",//上标
    "clearStyle",//清除格式
    "color",//文字颜色
    "bgColor",//背景色
    "fontSize",//默认字号
    "fontFamily",//默认字体
    "indent",//增加缩进
    "delIndent",//减少缩进
    "justifyLeft",//左对齐
    "justifyRight",//右对齐
    "justifyCenter",//居中对齐
    "justifyJustify",//两端对齐
    "lineHeight",//默认行高
    "insertImage",//插入网络图片
    "deleteImage",//删除图片（需对图片操作）
    "editImage",//编辑图片（需对图片操作）
    "viewImageLink",//查看图片链接（需对图片操作，如果插入图片时没有给链接则无效）
    "imageWidth30",//图片显示宽度 30%（需对图片操作）
    "imageWidth50",///图片显示宽度 50%（需对图片操作）
    "imageWidth100",///图片显示宽度 100%（需对图片操作）
    "divider",//分割线
    "emotion",//表情
    "insertLink",//插入链接
    "editLink",//修改链接（需对链接操作）
    "unLink",//取消链接（需对链接操作）
    "viewLink",//查看链接（需对链接操作）
    "codeBlock",//插入代码块
    "blockquote",//引用
    "headerSelect",//标题
    "header1",//h1（包含 headerSelect 的下拉框中）
    "header2",//h2（包含 headerSelect 的下拉框中）
    "header3",//h3（包含 headerSelect 的下拉框中）
    "header4",//h4（包含 headerSelect 的下拉框中）
    "header5",//h5（包含 headerSelect 的下拉框中）
    "todo",//待办框
    "redo",//还原上一步的撤销
    "undo",//撤销
    "fullScreen",//全屏
    "enter",//回车
    "bulletedList",//无序列表
    "numberedList",//有序列表
    "insertTable",//插入表格
    "deleteTable",//删除表格（需对表格操作）
    "insertTableRow",//插入行(需对表格操作)
    "deleteTableRow",//删除行（需对表格操作）
    "insertTableCol",//插入列（需对表格操作）
    "deleteTableCol",//删除列（需对表格操作）
    "tableHeader",//表头阴影（需对表格操作）
    "tableFullWidth",//表格宽度自适应（需对表格操作）
    "insertVideo",//插入网络视频
    "uploadVideo",//上传本地视频
    "editVideoSize",//修改视频尺寸（需对视频操作）
    "uploadImage",//上传图片
    "codeSelectLang"//选择语言（需对代码块操作）
]
</script>

<style lang="scss" scoped>

</style>

只读、编辑状态切换

切换编辑器只读、编辑状态

有些需求是需要控制编辑器只读或者编辑状态，可以给编辑器传入isEditer切换只读、编辑状态

<template>
    <el-button-group class="button-group">
        <el-button type="primary" @click="isEdit = false"> 只读</el-button>
        <el-button type="primary" @click="isEdit = true">编辑</el-button>
    </el-button-group>
    <fits-editor v-model="containerHtml" :isEditer="isEdit" />
</template>
  
<script setup lang="ts">
import { FitsEditor } from '@/fits-components';
let containerHtml = ref(
    "<p>内容</p></br><p><img src='https://caoguanjie.github.io/fitsadmin/images/20220810082733.png'></img></p><p><img src='https://caoguanjie.github.io/fitsadmin/images/20220913043740.png'></img></p>"
)
let isEdit = ref(true)
</script>

<style lang="scss" scoped>
.button-group {
    margin-bottom: 20px;
}
</style>

不隐藏工具栏

只读状态下不隐藏工具栏

当需要只读状态下只是不能操作，不隐藏工具栏时，可以通过配置siToolbar的值为true实现。

<template>
    <el-button-group class="button-group">
        <el-button type="primary" @click="isEdit = false"> 只读</el-button>
        <el-button type="primary" @click="isEdit = true">编辑</el-button>
    </el-button-group>
    <fits-editor :isToolbar="true" v-model="containerHtml" :isEditer="isEdit" />
</template>
  
<script setup lang="ts">
import { FitsEditor } from '@/fits-components';
let containerHtml = ref("<p>内容</p></br><img src='https://caoguanjie.github.io/fitsadmin/images/20220810082733.png'></img>")
let isEdit = ref(true)
</script>

<style lang="scss" scoped>
.button-group {
    margin-bottom: 20px;
}
</style>

禁用图片预览

禁用只读状态下的图片预览

默认是支持只读状态下的图片预览，如果需要关闭，可以通过配置isPreview实现

<template>
    <el-button-group class="button-group">
        <el-button type="primary" @click="isEdit = false"> 只读</el-button>
        <el-button type="primary" @click="isEdit = true">编辑</el-button>
    </el-button-group>
    <fits-editor v-model="containerHtml" :isEditer="isEdit" :isPreview="false" />
</template>
  
<script setup lang="ts">
import { FitsEditor } from '@/fits-components';

let containerHtml = ref("<p>内容</p></br><img src='https://caoguanjie.github.io/fitsadmin/images/logo.png'></img>")
let isEdit = ref(true)
</script>

<style lang="scss" scoped>
.button-group {
    margin-bottom: 20px;
}
</style>

固定高度及更多样式

修改编辑器的样式

通过配置isScroll值为true和自定义类名以及!important改变编辑器的样式

<template>
    <fits-editor v-model="containerHtml" :isScroll="true" :EditorClass="'fitsediter'" />
</template>
  
<script setup lang="ts">
import { FitsEditor } from '@/fits-components';
let containerHtml = ref("<p>正文</p><br/><p>内容</p>")
</script>

<style lang="scss">
.fitsediter {
    height: 500px !important;
}
</style>

FitsEditor 富文本编辑器的属性

属性	说明	类型	必填项	默认值
excludeKeys	删除工具栏中的默认配置	array	非必填	-
toolbarKeys	重新配置工具栏的配置	array	非必填	-
isEditer	切换编辑器只读、编辑状态	boolean	非必填	true
isToolbar	只读状态下是否隐藏工具栏,默认隐藏	boolean	非必填	false
autoFocus	是否默认自动聚焦输入框	boolean	非必填	true
isScroll	编辑器是否产生滚动条,默认随内容自增高度	boolean	非必填	fals
isInfinite	预览图片时是否循环，默认不开启	boolean	非必填	false
isPreview	是否开启只读状态下的图片预览，默认开启	boolean	非必填	true
placeholder	编辑器提示内容	string	非必填	请输入内容...
ToolbarClass	工具栏自定义类名	string	非必填	-
EditorClass	编辑器自定义类名	string	非必填	-

方法

事件名	说明	需要参数类型	返回数据
uploadImg	上传图片的方法，绑定的方法有一个 file 和一个 callback，并在 callback 中将接口返回的数据传给编辑器	file , callback(接口返回的数据)	-
uploadVideo	上传视频的方法，绑定的方法有一个 file 和一个 callback，并在 callback 中将接口返回的数据传给编辑器	file , callback(接口返回的数据)	-
onCreated	编辑器创建后触发	-	-
onChanged	编辑器改动时触发,返回编辑器中的内容	-	string
getText	编辑器改动时触发,返回编辑器中的纯文本内容	-	string
beforeUploadImg	在调用上传图片方法之前触发,返回上传的文件	-	file
afterUploadImg	上传图片之后触发,返回上传的文件	-	file
beforeEditordestory	编辑器销毁前触发	-	-
afterEditordestory	编辑器销毁后触发	-	-

插槽

暂无可用插槽