Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
F
front-backend
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
framework
front-backend
Commits
f4672d46
Commit
f4672d46
authored
Nov 01, 2019
by
j.yao.SUSE
Committed by
elunez
Nov 01, 2019
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
增加v-model, 优化双向绑定事件 (#44)
使用 : 1. 导入组件 2. <Editor v-model="value" />
parent
0fe86e60
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
16 additions
and
8 deletions
+16
-8
src/views/components/Editor.vue
+16
-8
No files found.
src/views/components/Editor.vue
View file @
f4672d46
<
template
>
<
template
>
<div>
<div>
<div
ref=
"editor"
style=
"text-align:left;margin: 5px"
>
<div
ref=
"editor"
style=
"text-align:left;margin: 5px"
>
<h3
style=
"text-align: center;"
>
欢迎使用 wangEditor 富文本编辑器!
</h3>
<div
v-html=
"editorContent"
/>
<ul>
<li>
富文本中图片上传使用的是sm.ms图床,支持上传到七牛云:
<a
style=
"color: #42b983"
target=
"_blank"
href=
"https://sm.ms/"
>
sm.ms
</a></li>
<li>
更多帮助请查看官方文档:
<a
style=
"color: #42b983"
target=
"_blank"
href=
"https://www.kancloud.cn/wangfupeng/wangeditor3/332599"
>
wangEditor
</a></li>
</ul>
</div>
</div>
<div
style=
"margin: 12px 5px;font-size: 16px;font-weight: bold;color: #696969"
>
HTML渲染如下:
</div>
<div
style=
"margin: 12px 5px;font-size: 16px;font-weight: bold;color: #696969"
>
HTML渲染如下:
</div>
<div
class=
"editor-content"
v-html=
"editorContent"
/>
<div
class=
"editor-content"
v-html=
"editorContent"
/>
...
@@ -13,17 +9,28 @@
...
@@ -13,17 +9,28 @@
</
template
>
</
template
>
<
script
>
<
script
>
import
{
debounce
}
from
'lodash'
import
{
mapGetters
}
from
'vuex'
import
{
mapGetters
}
from
'vuex'
import
E
from
'wangeditor'
import
E
from
'wangeditor'
import
{
getToken
}
from
'@/utils/auth'
import
{
getToken
}
from
'@/utils/auth'
export
default
{
export
default
{
name
:
'Editor'
,
name
:
'Editor'
,
model
:
{
prop
:
'value'
,
event
:
'editorChange'
},
props
:
{
value
:
{
type
:
String
,
default
:
()
=>
''
}
},
data
()
{
data
()
{
return
{
return
{
headers
:
{
headers
:
{
'Authorization'
:
'Bearer '
+
getToken
()
'Authorization'
:
'Bearer '
+
getToken
()
},
},
editorContent
:
editorContent
:
this
.
value
||
`<h3 style="text-align: center;">欢迎使用 wangEditor 富文本编辑器!</h3>
`<h3 style="text-align: center;">欢迎使用 wangEditor 富文本编辑器!</h3>
<ul>
<ul>
<li>富文本中图片上传使用的是sm.ms图床,支持上传到七牛云:<a style="color: #42b983" target="_blank" href="https://sm.ms/">sm.ms</a></li>
<li>富文本中图片上传使用的是sm.ms图床,支持上传到七牛云:<a style="color: #42b983" target="_blank" href="https://sm.ms/">sm.ms</a></li>
...
@@ -44,9 +51,10 @@ export default {
...
@@ -44,9 +51,10 @@ export default {
// 自定义文件名,不可修改,修改后会上传失败
// 自定义文件名,不可修改,修改后会上传失败
editor
.
customConfig
.
uploadFileName
=
'file'
editor
.
customConfig
.
uploadFileName
=
'file'
editor
.
customConfig
.
uploadImgServer
=
this
.
imagesUploadApi
// 上传图片到服务器
editor
.
customConfig
.
uploadImgServer
=
this
.
imagesUploadApi
// 上传图片到服务器
editor
.
customConfig
.
onchange
=
(
html
)
=>
{
editor
.
customConfig
.
onblur
=
debounce
(
html
=>
{
this
.
$emit
(
'editorChange'
,
html
)
this
.
editorContent
=
html
this
.
editorContent
=
html
}
}
,
1000
)
editor
.
create
()
editor
.
create
()
}
}
}
}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment