446 lines
12 KiB
Vue
446 lines
12 KiB
Vue
<template>
|
||
<view class="sv-editor-wrapper" @longpress="eLongpress">
|
||
<slot name="header"></slot>
|
||
<editor
|
||
:id="eid"
|
||
class="sv-editor-container"
|
||
show-img-size
|
||
show-img-toolbar
|
||
show-img-resize
|
||
:placeholder="placeholder"
|
||
:read-only="isReadOnly"
|
||
@statuschange="onStatusChange"
|
||
@ready="onEditorReady"
|
||
@input="onEditorInput"
|
||
@focus="onEditorFocus"
|
||
@blur="onEditorBlur"
|
||
></editor>
|
||
<view class="maxlength-tip" v-if="maxlength > 0 && !hideMax">{{ textlength }}/{{ maxlength }}</view>
|
||
<slot name="footer"></slot>
|
||
<!-- renderjs辅助插件 -->
|
||
<!-- #ifdef APP || H5 -->
|
||
<sv-editor-render ref="editorRenderRef" :eid="editorEID"></sv-editor-render>
|
||
<sv-editor-plugin ref="editorPluginRef" :sid="startID" :eid="editorEID" @epaste="ePaste"></sv-editor-plugin>
|
||
<!-- #endif -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* sv-editor
|
||
* @author sonve
|
||
* @version 1.0.0
|
||
* @date 2024-12-04
|
||
*/
|
||
|
||
import store from '../common/store.js'
|
||
import { linkFlag, copyrightPrint } from '../common/utils.js'
|
||
import { parseHtmlWithVideo, replaceVideoWithImageRender } from '../common/parse.js'
|
||
import SvEditorRender from './sv-editor-render.vue'
|
||
import SvEditorPlugin from '../plugins/sv-editor-plugin.vue'
|
||
import wxplugin from '../plugins/sv-editor-wxplugin.js'
|
||
|
||
export default {
|
||
// #ifdef MP-WEIXIN
|
||
// 微信小程序特殊配置
|
||
options: {
|
||
addGlobalClass: true,
|
||
virtualHost: true,
|
||
styleIsolation: 'shared'
|
||
},
|
||
// #endif
|
||
components: {
|
||
SvEditorRender,
|
||
SvEditorPlugin
|
||
},
|
||
props: {
|
||
// 编辑器id可传入，以便循环组件使用，防止id重复
|
||
eid: {
|
||
type: String,
|
||
default: 'sv-editor' // 唯一，禁止重复
|
||
},
|
||
placeholder: {
|
||
type: String,
|
||
default: '写点什么吧 ~'
|
||
},
|
||
// 是否只读
|
||
readOnly: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 最大字数限制，<=0时表示不限
|
||
maxlength: {
|
||
type: Number,
|
||
default: -1
|
||
},
|
||
// 是否关闭最大字数显示
|
||
hideMax: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 粘贴模式，可选 text 纯文本(默认) | origin 尽可能保持原格式
|
||
pasteMode: {
|
||
type: String,
|
||
default: 'text'
|
||
}
|
||
},
|
||
emits: ['ready', 'input', 'statuschange', 'focus', 'blur', 'overmax', 'epaste'],
|
||
data() {
|
||
return {
|
||
textlength: 0, // 当前字数统计
|
||
startID: '',
|
||
// #ifdef VUE2
|
||
// #ifdef MP-WEIXIN
|
||
editorIns: null // 仅vue2环境下的微信小程序需要声明实例变量，否则报错，属实逆天
|
||
// #endif
|
||
// #endif
|
||
}
|
||
},
|
||
computed: {
|
||
editorEID: {
|
||
set(newVal) {
|
||
store.actions.setEID(newVal)
|
||
},
|
||
get() {
|
||
return store.actions.getEID()
|
||
}
|
||
},
|
||
editorCtx: {
|
||
set(newVal) {
|
||
store.actions.setEditor(newVal.eid, newVal.ctx)
|
||
// #ifdef VUE2
|
||
this.editorIns = newVal.ctx
|
||
this.editorIns.id = newVal.eid
|
||
// #endif
|
||
},
|
||
get() {
|
||
let instance = store.actions.getEditor(this.eid)
|
||
// #ifdef VUE2
|
||
instance = store.actions.getEditor(this.eid) || this.editorIns
|
||
// #endif
|
||
return instance
|
||
}
|
||
},
|
||
isReadOnly: {
|
||
set(newVal) {
|
||
store.actions.setReadOnly(newVal)
|
||
},
|
||
get() {
|
||
return store.actions.getReadOnly()
|
||
}
|
||
}
|
||
},
|
||
watch: {
|
||
readOnly(newVal) {
|
||
this.isReadOnly = newVal
|
||
}
|
||
},
|
||
mounted() {
|
||
// 首个实例初始化时执行
|
||
if (!store.state.firstInstanceFlag) {
|
||
this.editorEID = this.eid
|
||
store.state.firstInstanceFlag = this.eid
|
||
copyrightPrint()
|
||
}
|
||
},
|
||
destroyed() {
|
||
store.actions.destroy()
|
||
},
|
||
unmounted() {
|
||
store.actions.destroy()
|
||
},
|
||
methods: {
|
||
onEditorReady() {
|
||
this.$nextTick(() => {
|
||
uni
|
||
.createSelectorQuery()
|
||
.in(this)
|
||
.select('#' + this.eid)
|
||
.context((res) => {
|
||
// 存储上下文
|
||
this.editorCtx = { eid: this.eid, ctx: res.context }
|
||
// 挂载实例api
|
||
this.bindMethods()
|
||
// 初始化完成
|
||
this.$emit('ready', this.editorCtx)
|
||
|
||
// #ifdef APP || H5
|
||
if (this.pasteMode == 'origin') this.editorCtx.changePasteMode('origin')
|
||
// #endif
|
||
})
|
||
.exec()
|
||
})
|
||
},
|
||
/**
|
||
* 挂载实例api
|
||
*/
|
||
bindMethods() {
|
||
// ===== renderjs相关扩展api =====
|
||
|
||
// #ifdef APP || H5
|
||
/**
|
||
* 主动聚焦
|
||
* @returns {void}
|
||
*/
|
||
this.editorCtx.focus = this.$refs.editorRenderRef.focus
|
||
|
||
/**
|
||
* 退格
|
||
* @returns {void}
|
||
*/
|
||
this.editorCtx.backspace = this.$refs.editorRenderRef.backspace
|
||
|
||
/**
|
||
* 键盘输入模式
|
||
* @param {String} type 模式，可选：none | remove
|
||
* @returns {void}
|
||
*/
|
||
this.editorCtx.changeInputMode = this.$refs.editorRenderRef.changeInputMode
|
||
|
||
/**
|
||
* 粘贴模式
|
||
* @param {String} type 模式，可选：text纯文本(默认) | origin尽可能保持原格式
|
||
* @returns {void}
|
||
*/
|
||
this.editorCtx.changePasteMode = (type) => {
|
||
// 告知plugin启动
|
||
this.startID = this.eid
|
||
if (this.$refs.editorPluginRef?.changePasteMode) {
|
||
this.$refs.editorPluginRef.changePasteMode(type)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 生成视频封面图
|
||
* @param {String} url 封面图片地址
|
||
* @returns {Promise} 携带播放图标的封面图地址
|
||
*/
|
||
this.editorCtx.createCoverThumbnail = (url) => {
|
||
return new Promise((resolve) => {
|
||
if (this.$refs.editorPluginRef?.createCoverThumbnail) {
|
||
// 事件名必须唯一，否则会覆盖
|
||
uni.$once(`E_EDITOR_GET_COVER_THUMBNAIL_${url}`, (res) => {
|
||
resolve(res.cover)
|
||
})
|
||
setTimeout(() => {
|
||
this.$refs.editorPluginRef?.createCoverThumbnail(url)
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 生成视频封面图
|
||
* @param {String} url 视频地址
|
||
* @returns {Promise} 封面图地址
|
||
*/
|
||
this.editorCtx.createVideoThumbnail = (url) => {
|
||
return new Promise((resolve) => {
|
||
if (this.$refs.editorPluginRef?.createVideoThumbnail) {
|
||
// 事件名必须唯一，否则会覆盖
|
||
uni.$once(`E_EDITOR_GET_VIDEO_THUMBNAIL_${url}`, (res) => {
|
||
resolve(res.cover)
|
||
})
|
||
setTimeout(() => {
|
||
this.$refs.editorPluginRef?.createVideoThumbnail(url)
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
// #endif
|
||
|
||
// ===== 微信小程序扩展api =====
|
||
|
||
// #ifdef MP-WEIXIN
|
||
|
||
/**
|
||
* 生成视频封面图
|
||
* @param {String} url 视频地址
|
||
* @returns {Promise} 封面图地址
|
||
*/
|
||
this.editorCtx.createCoverThumbnail = wxplugin?.wxCreateCoverThumbnail
|
||
|
||
// #endif
|
||
|
||
// ===== 通用扩展api =====
|
||
|
||
/**
|
||
* 主动触发input回调事件
|
||
* @returns {void}
|
||
*/
|
||
this.editorCtx.changeInput = () => {
|
||
this.editorCtx.getContents({
|
||
success: (res) => {
|
||
this.$emit('input', { ctx: this.editorCtx, html: res.html, text: res.text })
|
||
}
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 获取最新内容
|
||
* @returns {Promise} 内容对象 { html, text... }
|
||
*/
|
||
this.editorCtx.getLastContent = async () => {
|
||
return new Promise((resolve) => {
|
||
this.editorCtx.getContents({
|
||
success: (res) => {
|
||
resolve(res)
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 富文本内容初始化
|
||
* 注意：微信小程序会导致聚焦滚动，建议先将编辑器v-show=false，待initHtml内容初始化完成后再true
|
||
* 也正是因为微信小程序端会聚焦滚动，所以editorEID在初始阶段会默认保持最后一个实例eid，需要手动重新聚焦
|
||
* @param {String} html 初始化的富文本
|
||
* @param {Function<Promise>} customCallback 自定义处理封面回调，需要以Promise形式返回封面图片资源
|
||
* @returns {void}
|
||
*/
|
||
this.editorCtx.initHtml = async (html, customCallback) => {
|
||
let transHtml = await replaceVideoWithImageRender(html, customCallback)
|
||
// #ifdef APP || H5
|
||
this.editorCtx.changePasteMode('text') // text模式下可以防止初始化时对格式的影响
|
||
// #endif
|
||
setTimeout(() => {
|
||
this.editorCtx.setContents({
|
||
html: transHtml,
|
||
success: () => {
|
||
// 主动触发一次input回调事件
|
||
this.editorCtx.changeInput()
|
||
// #ifdef APP || H5
|
||
if (this.pasteMode == 'origin') this.editorCtx.changePasteMode('origin')
|
||
// #endif
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 导出处理
|
||
* @param {String} html 要导出的富文本
|
||
* @returns {String} 处理后的富文本
|
||
*/
|
||
this.editorCtx.exportHtml = (html) => {
|
||
return parseHtmlWithVideo(html)
|
||
}
|
||
},
|
||
onEditorInput(e) {
|
||
// 注意不要使用getContents获取html和text，会导致重复触发onStatusChange从而失去toolbar工具的高亮状态
|
||
// 复制粘贴的时候detail会为空，此时应当直接return
|
||
if (Object.keys(e.detail).length <= 0) return
|
||
const { html, text } = e.detail
|
||
|
||
// 识别到链接特殊标识立即return
|
||
if (text.indexOf(linkFlag) !== -1) return
|
||
|
||
/**
|
||
* 因为uni-editor不提供最大字符限制，故需要手动进行以下特殊处理
|
||
*/
|
||
const maxlength = parseInt(this.maxlength)
|
||
const textStr = text.replace(/[ \t\r\n]/g, '')
|
||
this.textlength = textStr.length // 当前字符数
|
||
if (this.textlength >= maxlength && maxlength > 0) {
|
||
this.textlength = maxlength // 因为editor特性，需要手动赋阈值
|
||
if (!this.lockHtmlFlag) {
|
||
this.lockHtml = html // 锁定最后一次超出字数前的html
|
||
this.lockHtmlFlag = true // 锁定标志
|
||
// 首次到达最大限制时还需最后回调一次input事件
|
||
this.$emit('input', { ctx: this.editorCtx, html, text })
|
||
} else {
|
||
// 在超过字数时锁定，若再编辑则抛出超出事件
|
||
this.$emit('overmax', { ctx: this.editorCtx })
|
||
}
|
||
// 超过字数时，锁定最后一次超出字数前的html
|
||
this.editorCtx.setContents({ html: this.lockHtml })
|
||
} else {
|
||
// 正常输入
|
||
this.$emit('input', { ctx: this.editorCtx, html, text })
|
||
this.lockHtmlFlag = false // 锁定标志
|
||
}
|
||
},
|
||
/**
|
||
* 样式格式改变时触发
|
||
* 注意：微信小程序端在多编辑器实例下切换编辑器后可能不会及时触发onStatusChange
|
||
*/
|
||
onStatusChange(e) {
|
||
store.actions.setFormats(e.detail)
|
||
this.$emit('statuschange', { ...e, ctx: this.editorCtx })
|
||
uni.$emit('E_EDITOR_STATUSCHANGE', { ...e, ctx: this.editorCtx })
|
||
},
|
||
onEditorFocus(e) {
|
||
this.editorEID = this.eid
|
||
this.$emit('focus', { ...e, ctx: this.editorCtx })
|
||
},
|
||
onEditorBlur(e) {
|
||
this.$emit('blur', { ...e, ctx: this.editorCtx })
|
||
},
|
||
ePaste(e) {
|
||
this.$emit('epaste', { ...e, ctx: this.editorCtx })
|
||
uni.$emit('E_EDITOR_PASTE', { ...e, ctx: this.editorCtx })
|
||
},
|
||
/**
|
||
* 微信小程序官方editor的长按事件有bug，需要重写覆盖，不需做任何逻辑，可见下面小程序社区问题链接
|
||
* @tutorial https://developers.weixin.qq.com/community/develop/doc/000c04b3e1c1006f660065e4f61000
|
||
*/
|
||
eLongpress() {}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.sv-editor-wrapper {
|
||
--maxlength-text-color: #666666;
|
||
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.sv-editor-container {
|
||
flex: 1;
|
||
}
|
||
|
||
.maxlength-tip {
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
font-size: 24rpx;
|
||
color: var(--maxlength-text-color);
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
|
||
// placeholder字样
|
||
.sv-editor-container ::v-deep .ql-blank::before {
|
||
font-style: normal;
|
||
color: #cccccc;
|
||
}
|
||
|
||
// 图片工具样式
|
||
::v-deep .ql-container {
|
||
min-height: unset;
|
||
|
||
.ql-image-overlay {
|
||
pointer-events: none;
|
||
|
||
.ql-image-size {
|
||
right: 28px !important;
|
||
}
|
||
.ql-image-toolbar {
|
||
// 删除按钮
|
||
pointer-events: auto;
|
||
}
|
||
.ql-image-handle {
|
||
// 四角缩放按钮
|
||
width: 30px;
|
||
height: 30px;
|
||
pointer-events: auto;
|
||
}
|
||
}
|
||
}
|
||
</style>
|