Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
有来技术
vue3-element-admin
提交
94856560
V
vue3-element-admin
项目概览
有来技术
/
vue3-element-admin
通知
4
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue3-element-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
94856560
编写于
1月 08, 2022
作者:
郝
郝先瑞
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(WangEditor/index.vue): 使用wangEditor国产富文本编辑器替代tinymce
上级
438ea915
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
112 addition
and
0 deletion
+112
-0
src/components/WangEditor/index.vue
src/components/WangEditor/index.vue
+112
-0
未找到文件。
src/components/WangEditor/index.vue
0 → 100644
浏览文件 @
94856560
<
template
>
<div>
<div
v-if=
"isEditorShow"
style=
"border: 1px solid #ccc"
>
<Toolbar
:editorId=
"editorId"
:defaultConfig=
"toolbarConfig"
:mode=
"mode"
style=
"border-bottom: 1px solid #ccc"
/>
<Editor
:editorId=
"editorId"
:defaultConfig=
"editorConfig"
:mode=
"mode"
style=
"height: 500px"
@
onCreated=
"handleCreated"
@
onChange=
"handleChange"
@
onDestroyed=
"handleDestroyed"
@
onFocus=
"handleFocus"
@
onBlur=
"handleBlur"
@
customAlert=
"customAlert"
@
customPaste=
"customPaste"
/>
</div>
<p
v-else
>
loading
</p>
</div>
</
template
>
<
script
>
import
{
computed
,
onBeforeUnmount
,
ref
}
from
'
vue
'
import
{
Editor
,
Toolbar
,
getEditor
,
removeEditor
}
from
'
@wangeditor/editor-for-vue
'
import
{
uploadFile
}
from
"
@/api/system/file
"
;
export
default
{
components
:
{
Editor
,
Toolbar
},
setup
()
{
const
editorId
=
`w-e-
${
Math
.
random
().
toString
().
slice
(
-
5
)}
`
//【注意】编辑器 id ,要全局唯一
const
toolbarConfig
=
{}
const
isEditorShow
=
ref
(
true
)
const
editorConfig
=
{
placeholder
:
'
请输入内容...
'
,
MENU_CONF
:
{
uploadImage
:
{
// 自定义图片上传
// @link https://www.wangeditor.com/v5/guide/menu-config.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8A%9F%E8%83%BD
async
customUpload
(
file
,
insertFn
)
{
uploadFile
(
file
).
then
(
response
=>
{
const
url
=
response
.
data
insertFn
(
url
)
})
}
}
}
}
// 组件销毁时,也及时销毁编辑器
onBeforeUnmount
(()
=>
{
const
editor
=
getEditor
(
editorId
)
if
(
editor
==
null
)
return
editor
.
destroy
()
removeEditor
(
editorId
)
})
// 编辑器回调函数
const
handleCreated
=
(
editor
)
=>
{
console
.
log
(
'
created
'
,
editor
);
}
const
handleChange
=
(
editor
)
=>
{
console
.
log
(
'
change:
'
,
editor
.
children
);
}
const
handleDestroyed
=
(
editor
)
=>
{
console
.
log
(
'
destroyed
'
,
editor
)
}
const
handleFocus
=
(
editor
)
=>
{
console
.
log
(
'
focus
'
,
editor
)
}
const
handleBlur
=
(
editor
)
=>
{
console
.
log
(
'
blur
'
,
editor
)
}
const
customAlert
=
(
info
,
type
)
=>
{
alert
(
`【自定义提示】
${
type
}
-
${
info
}
`
)
}
const
customPaste
=
(
editor
,
event
,
callback
)
=>
{
console
.
log
(
'
ClipboardEvent 粘贴事件对象
'
,
event
)
// 自定义插入内容
editor
.
insertText
(
'
xxx
'
)
// 返回值(注意,vue 事件的返回值,不能用 return)
callback
(
false
)
// 返回 false ,阻止默认粘贴行为
// callback(true) // 返回 true ,继续默认的粘贴行为
}
const
insertText
=
()
=>
{
const
editor
=
getEditor
(
editorId
)
if
(
editor
==
null
)
return
editor
.
insertText
(
'
hello world
'
)
}
return
{
editorId
,
mode
:
'
default
'
,
toolbarConfig
,
editorConfig
,
isEditorShow
,
handleCreated
,
handleChange
,
handleDestroyed
,
handleFocus
,
handleBlur
,
customAlert
,
customPaste
,
insertText
};
}
}
</
script
>
<
style
src=
"@wangeditor/editor/dist/css/style.css"
></
style
>
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录