sf-editor富文本编辑器组件
sf-editor 介绍
该组件对NEditor进行了二次封装；
sf-editor Attributes
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| advance |
如果为true则显示所有的工具栏，如果为false则只显示基本工具 |
Boolean |
true,false |
false |
| value/v-model |
实现方式 |
String |
— |
'observer' |
| config |
UEditor配置文件 |
Object |
— |
{} |
| init |
实例化编辑器时进行一些初始化设置 |
Function |
— |
— |
| destroy |
是否销毁 |
Boolean |
— |
false |
| name |
编辑器的名称 |
String |
— |
'' |
| observerDebounceTime |
观察者去抖时间 |
Number |
— |
50 |
| observerOptions |
观察者监听配置 |
Object |
— |
— |
| forceInit |
是否进行强制初始化 |
Boolean |
— |
false |
| editorId |
手动设置 UEditor1 ID |
String |
— |
— |
sf-editor Events
| 事件名 |
说明 |
参数 |
| beforeInit |
编辑器初始化之前调用 |
(id, config) |
| ready |
初始化完毕调用 |
editor |
sf-editor Methods
| 方法名 |
说明 |
参数 |
| getInstance |
获取UEditor实例 |
— |
| registerButton |
添加自定义按钮（自定义按钮，自定义弹窗等操作从 2.2.0 版本开始不再考虑直接集成，这会使得组件和 UEditor1 过度耦合，但为了兼容一些老版用户的写法，这个方法依然保留） |
— |
| _initEditor |
实例化编辑器 |
— |
| _checkDependencies |
检测依赖,确保 UEditor1 资源文件已加载完毕 |
— |
| __setContent |
设置内容 |
— |
| getContent |
获取编辑器内容HTML |
— |
| getContentTxt |
获取编辑器内容文本 |
— |
| catchRemoteImages |
对外链的图片进行拉取 |
— |
sf-editor 使用
<template>
<div>
<sf-editor
ref="editor"
v-model="contentHtml"
:advance="true"
>
</sf-editor>
</div>
</template>
<script>
export default {
data() {
return {
contentHtml: ''
}
}
}
</script>
sf-editor 页面显示效果
