Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
圆滚滚核心
vue-element-admin
提交
c412d17b
V
vue-element-admin
项目概览
圆滚滚核心
/
vue-element-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-element-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
c412d17b
编写于
6月 14, 2017
作者:
P
Pan
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
refine tinymce && tinymce demo
上级
09deec1e
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
11 addition
and
491 deletion
+11
-491
src/components/Tinymce/components/editorAudio.vue
src/components/Tinymce/components/editorAudio.vue
+0
-119
src/components/Tinymce/components/editorImage.vue
src/components/Tinymce/components/editorImage.vue
+0
-88
src/components/Tinymce/components/editorSlide.vue
src/components/Tinymce/components/editorSlide.vue
+0
-82
src/components/Tinymce/components/editorVideo.vue
src/components/Tinymce/components/editorVideo.vue
+0
-167
src/components/Tinymce/index.vue
src/components/Tinymce/index.vue
+1
-27
src/views/components/tinymce.vue
src/views/components/tinymce.vue
+10
-8
未找到文件。
src/components/Tinymce/components/editorAudio.vue
已删除
100644 → 0
浏览文件 @
09deec1e
<
template
>
<div
class=
"upload-container"
>
<el-button
:style=
"
{background:color,borderColor:color}" @click=" dialogVisible=true" type="primary">上传音频
</el-button>
<el-dialog
v-model=
"dialogVisible"
>
<el-form
ref=
"form"
:model=
"form"
:rules=
"rules"
label-width=
"100px"
label-position=
"right"
>
<el-upload
class=
"editor-audio-upload"
action=
"https://upload.qbox.me"
:data=
"dataObj"
:show-file-list=
"true"
:file-list=
"audioList"
:on-success=
"handleAudioScucess"
:on-change=
"handleAudioChange"
:before-upload=
"audioBeforeUpload"
>
<el-button
size=
"small"
type=
"primary"
>
上传音频
</el-button>
</el-upload>
<el-form-item
prop=
"url"
label=
"音频URL"
>
<el-input
v-model=
"form.url"
></el-input>
</el-form-item>
<el-form-item
prop=
"title"
label=
"音频标题"
>
<el-input
v-model=
"form.title"
></el-input>
</el-form-item>
<el-form-item
label=
"音频文本"
>
<el-input
type=
"textarea"
:autosize=
"
{ minRows: 2}" v-model="form.text">
</el-input>
</el-form-item>
</el-form>
<el-button
@
click=
"dialogVisible = false"
>
取 消
</el-button>
<el-button
type=
"primary"
@
click=
"handleSubmit"
>
确 定
</el-button>
</el-dialog>
</div>
</
template
>
<
script
>
import
{
getToken
}
from
'
api/qiniu
'
;
export
default
{
name
:
'
editorAudioUpload
'
,
props
:
{
color
:
{
type
:
String
,
default
:
'
#20a0ff
'
}
},
data
()
{
return
{
dialogVisible
:
false
,
dataObj
:
{
token
:
''
,
key
:
''
},
audioList
:
[],
tempAudioUrl
:
''
,
form
:
{
title
:
''
,
url
:
''
,
text
:
''
},
rules
:
{
title
:
[
{
required
:
true
,
trigger
:
'
blur
'
}
],
url
:
[
{
required
:
true
,
trigger
:
'
blur
'
}
]
}
};
},
methods
:
{
handleSubmit
()
{
this
.
$refs
.
form
.
validate
(
valid
=>
{
if
(
valid
)
{
this
.
$emit
(
'
successCBK
'
,
this
.
form
);
this
.
dialogVisible
=
false
;
this
.
form
=
{
title
:
''
,
url
:
''
,
text
:
''
}
}
else
{
this
.
$message
(
'
填写有误
'
);
return
false
;
}
});
},
handleAudioChange
(
file
,
fileList
)
{
this
.
audioList
=
fileList
.
slice
(
-
1
);
},
handleAudioScucess
()
{
this
.
form
.
url
=
this
.
tempAudioUrl
},
audioBeforeUpload
()
{
const
_self
=
this
;
return
new
Promise
((
resolve
,
reject
)
=>
{
getToken
().
then
(
response
=>
{
const
key
=
response
.
data
.
qiniu_key
;
const
token
=
response
.
data
.
qiniu_token
;
_self
.
_data
.
dataObj
.
token
=
token
;
_self
.
_data
.
dataObj
.
key
=
key
;
this
.
tempAudioUrl
=
response
.
data
.
qiniu_url
;
resolve
(
true
);
}).
catch
(
err
=>
{
console
.
log
(
err
);
reject
(
false
)
});
});
}
}
};
</
script
>
<
style
rel=
"stylesheet/scss"
lang=
"scss"
scoped
>
.upload-container
{
.editor-audio-upload
{
button
{
float
:
left
;
margin-left
:
30px
;
margin-bottom
:
20px
;
}
}
}
</
style
>
src/components/Tinymce/components/editorImage.vue
已删除
100644 → 0
浏览文件 @
09deec1e
<
template
>
<div
class=
"upload-container"
>
<el-button
icon=
'upload'
:style=
"
{background:color,borderColor:color}" @click=" dialogVisible=true" type="primary">上传图片
</el-button>
<el-dialog
v-model=
"dialogVisible"
>
<el-upload
class=
"editor-slide-upload"
action=
"https://httpbin.org/post"
:data=
"dataObj"
:multiple=
"true"
:file-list=
"fileList"
:show-file-list=
"true"
list-type=
"picture-card"
:on-remove=
"handleRemove"
:on-success=
"handleImageScucess"
>
<el-button
size=
"small"
type=
"primary"
>
点击上传
</el-button>
</el-upload>
<el-button
@
click=
"dialogVisible = false"
>
取 消
</el-button>
<el-button
type=
"primary"
@
click=
"handleSubmit"
>
确 定
</el-button>
</el-dialog>
</div>
</
template
>
<
script
>
import
{
getToken
}
from
'
api/qiniu
'
;
export
default
{
name
:
'
editorSlideUpload
'
,
props
:
{
color
:
{
type
:
String
,
default
:
'
#20a0ff
'
}
},
data
()
{
return
{
dialogVisible
:
false
,
dataObj
:
{
token
:
''
,
key
:
''
},
list
:
[],
fileList
:
[]
};
},
methods
:
{
handleSubmit
()
{
const
arr
=
this
.
list
.
map
(
v
=>
v
.
url
);
this
.
$emit
(
'
successCBK
'
,
arr
);
this
.
list
=
[];
this
.
fileList
=
[];
this
.
dialogVisible
=
false
;
},
handleRemove
(
file
)
{
const
key
=
file
.
response
.
key
;
for
(
let
i
=
0
,
len
=
this
.
list
.
length
;
i
<
len
;
i
++
)
{
if
(
this
.
list
[
i
].
key
===
key
)
{
this
.
list
.
splice
(
i
,
1
);
return
}
}
},
handleImageScucess
(
file
)
{
this
.
list
.
push
({
url
:
file
.
files
.
file
});
},
beforeUpload
()
{
const
_self
=
this
;
return
new
Promise
((
resolve
,
reject
)
=>
{
getToken
().
then
(
response
=>
{
const
key
=
response
.
data
.
qiniu_key
;
const
token
=
response
.
data
.
qiniu_token
;
_self
.
_data
.
dataObj
.
token
=
token
;
_self
.
_data
.
dataObj
.
key
=
key
;
this
.
list
.
push
({
key
,
url
:
response
.
data
.
qiniu_url
});
resolve
(
true
);
}).
catch
(
err
=>
{
console
.
log
(
err
);
reject
(
false
)
});
});
}
}
};
</
script
>
<
style
rel=
"stylesheet/scss"
lang=
"scss"
scoped
>
.upload-container
{
.editor-slide-upload
{
margin-bottom
:
20px
;
}
}
</
style
>
src/components/Tinymce/components/editorSlide.vue
已删除
100644 → 0
浏览文件 @
09deec1e
<
template
>
<div
class=
"upload-container"
>
<el-button
:style=
"
{background:color,borderColor:color}" @click=" dialogVisible=true" type="primary">上传轮播图
</el-button>
<el-dialog
v-model=
"dialogVisible"
>
<el-upload
class=
"editor-slide-upload"
action=
"https://upload.qbox.me"
:data=
"dataObj"
:multiple=
"true"
:show-file-list=
"true"
list-type=
"picture-card"
:on-remove=
"handleRemove"
:before-upload=
"beforeUpload"
>
<el-button
size=
"small"
type=
"primary"
>
点击上传
</el-button>
</el-upload>
<el-button
@
click=
"dialogVisible = false"
>
取 消
</el-button>
<el-button
type=
"primary"
@
click=
"handleSubmit"
>
确 定
</el-button>
</el-dialog>
</div>
</
template
>
<
script
>
import
{
getToken
}
from
'
api/qiniu
'
;
export
default
{
name
:
'
editorSlideUpload
'
,
props
:
{
color
:
{
type
:
String
,
default
:
'
#20a0ff
'
}
},
data
()
{
return
{
dialogVisible
:
false
,
dataObj
:
{
token
:
''
,
key
:
''
},
list
:
[]
};
},
methods
:
{
handleSubmit
()
{
const
arr
=
this
.
list
.
map
(
v
=>
v
.
url
);
this
.
$emit
(
'
successCBK
'
,
arr
);
this
.
list
=
[];
this
.
dialogVisible
=
false
;
},
handleRemove
(
file
)
{
const
key
=
file
.
response
.
key
;
for
(
let
i
=
0
,
len
=
this
.
list
.
length
;
i
<
len
;
i
++
)
{
if
(
this
.
list
[
i
].
key
===
key
)
{
this
.
list
.
splice
(
i
,
1
);
return
}
}
},
beforeUpload
()
{
const
_self
=
this
;
return
new
Promise
((
resolve
,
reject
)
=>
{
getToken
().
then
(
response
=>
{
const
key
=
response
.
data
.
qiniu_key
;
const
token
=
response
.
data
.
qiniu_token
;
_self
.
_data
.
dataObj
.
token
=
token
;
_self
.
_data
.
dataObj
.
key
=
key
;
this
.
list
.
push
({
key
,
url
:
response
.
data
.
qiniu_url
});
resolve
(
true
);
}).
catch
(
err
=>
{
console
.
log
(
err
);
reject
(
false
)
});
});
}
}
};
</
script
>
<
style
rel=
"stylesheet/scss"
lang=
"scss"
scoped
>
.upload-container
{
.editor-slide-upload
{
margin-bottom
:
20px
;
}
}
</
style
>
src/components/Tinymce/components/editorVideo.vue
已删除
100644 → 0
浏览文件 @
09deec1e
<
template
>
<div
class=
"upload-container"
>
<el-button
:style=
"
{background:color,borderColor:color}" @click=" dialogVisible=true" type="primary">上传视频
</el-button>
<el-dialog
v-model=
"dialogVisible"
>
<el-form
ref=
"form"
:model=
"form"
:rules=
"rules"
label-width=
"140px"
label-position=
"left"
>
<el-upload
class=
"editor-video-upload"
action=
"https://upload.qbox.me"
:data=
"dataObj"
:show-file-list=
"true"
:file-list=
"videoList"
:on-success=
"handleVideoScucess"
:on-change=
"handleVideoChange"
:before-upload=
"videoBeforeUpload"
>
<el-button
size=
"small"
type=
"primary"
>
上传视频
</el-button>
</el-upload>
<el-form-item
prop=
"url"
label=
"视频URL"
>
<el-input
v-model=
"form.url"
></el-input>
</el-form-item>
<el-form-item
prop=
"title"
label=
"视频标题"
>
<el-input
v-model=
"form.title"
></el-input>
</el-form-item>
<el-form-item
label=
"上传视频封面图"
>
</el-form-item>
<el-upload
class=
"image-uploader"
action=
"https://upload.qbox.me"
:show-file-list=
"false"
:data=
"dataObj"
:on-success=
"handleImageScucess"
:before-upload=
"beforeImageUpload"
>
<img
v-if=
"form.image"
:src=
"form.image"
class=
"image-uploader-image"
>
<i
v-else
class=
"el-icon-plus avatar-uploader-icon"
></i>
</el-upload>
</el-form>
<el-button
@
click=
"dialogVisible = false"
>
取 消
</el-button>
<el-button
type=
"primary"
@
click=
"handleSubmit"
>
确 定
</el-button>
</el-dialog>
</div>
</
template
>
<
script
>
import
{
getToken
}
from
'
api/qiniu
'
;
export
default
{
name
:
'
editorVideoUpload
'
,
props
:
{
color
:
{
type
:
String
,
default
:
'
#20a0ff
'
}
},
data
()
{
return
{
dialogVisible
:
false
,
dataObj
:
{
token
:
''
,
key
:
''
},
videoList
:
[],
tempVideoUrl
:
''
,
tempImageUrl
:
''
,
form
:
{
title
:
''
,
url
:
''
,
image
:
''
},
rules
:
{
url
:
[
{
required
:
true
,
trigger
:
'
blur
'
}
],
title
:
[
{
required
:
true
,
trigger
:
'
blur
'
}
]
}
};
},
methods
:
{
handleSubmit
()
{
this
.
$refs
.
form
.
validate
(
valid
=>
{
if
(
valid
)
{
if
(
this
.
form
.
image
.
length
>
0
)
{
this
.
$emit
(
'
successCBK
'
,
this
.
form
);
this
.
dialogVisible
=
false
;
this
.
form
=
{
title
:
''
,
url
:
''
,
image
:
''
}
}
else
{
this
.
$message
(
'
请上传图片
'
);
}
}
else
{
this
.
$message
(
'
填写有误
'
);
return
false
;
}
});
},
handleVideoChange
(
file
,
fileList
)
{
this
.
videoList
=
fileList
.
slice
(
-
1
);
},
handleVideoScucess
()
{
this
.
form
.
url
=
this
.
tempVideoUrl
},
videoBeforeUpload
()
{
const
_self
=
this
;
return
new
Promise
((
resolve
,
reject
)
=>
{
getToken
().
then
(
response
=>
{
const
key
=
response
.
data
.
qiniu_key
;
const
token
=
response
.
data
.
qiniu_token
;
_self
.
_data
.
dataObj
.
token
=
token
;
_self
.
_data
.
dataObj
.
key
=
key
;
this
.
tempVideoUrl
=
response
.
data
.
qiniu_url
;
resolve
(
true
);
}).
catch
(
err
=>
{
console
.
log
(
err
);
reject
(
false
)
});
});
},
handleImageScucess
()
{
this
.
form
.
image
=
this
.
tempImageUrl
},
beforeImageUpload
()
{
const
_self
=
this
;
return
new
Promise
((
resolve
,
reject
)
=>
{
getToken
().
then
(
response
=>
{
const
key
=
response
.
data
.
qiniu_key
;
const
token
=
response
.
data
.
qiniu_token
;
_self
.
_data
.
dataObj
.
token
=
token
;
_self
.
_data
.
dataObj
.
key
=
key
;
this
.
tempImageUrl
=
response
.
data
.
qiniu_url
;
resolve
(
true
);
}).
catch
(
err
=>
{
console
.
log
(
err
);
reject
(
false
)
});
});
}
}
};
</
script
>
<
style
rel=
"stylesheet/scss"
lang=
"scss"
scoped
>
.upload-container
{
.editor-video-upload
{
button
{
float
:
left
;
}
}
.image-uploader
{
margin
:
5px
auto
;
width
:
400px
;
height
:
200px
;
border
:
1px
dashed
#d9d9d9
;
border-radius
:
6px
;
cursor
:
pointer
;
position
:
relative
;
overflow
:
hidden
;
line-height
:
200px
;
i
{
font-size
:
28px
;
color
:
#8c939d
;
}
.image-uploader-image
{
height
:
200px
;
}
}
}
</
style
>
src/components/Tinymce/index.vue
浏览文件 @
c412d17b
<
template
>
<div
class=
'tinymce-container editor-container'
>
<textarea
class=
'tinymce-textarea'
:id=
"id"
></textarea>
<!--业务需求可删除-->
<div
class=
"editor-custom-btn-container"
>
<editorSlide
v-if=
"customButton.indexOf('editorSlide')>=0"
color=
"#3A71A8"
class=
"editor-upload-btn"
@
successCBK=
"slideSuccessCBK"
></editorSlide>
<editorAudio
v-if=
"customButton.indexOf('editorAudio')>=0"
color=
"#30B08F"
class=
"editor-upload-btn"
@
successCBK=
"aduioSuccessCBK"
></editorAudio>
<editorVideo
v-if=
"customButton.indexOf('editorVideo')>=0"
color=
"#E65D6E"
class=
"editor-upload-btn"
@
successCBK=
"videoSuccessCBK"
></editorVideo>
<editorImage
v-if=
"customButton.indexOf('editorImage')>=0"
color=
"#20a0ff"
class=
"editor-upload-btn"
@
successCBK=
"imageSuccessCBK"
></editorImage>
<!--业务需求可删除-->
</div>
</div>
</
template
>
<
script
>
// tinymce 在最外层目录static下 ,由index.html直接引入,挂载在window下。不通过impot,不打包
// 业务需求可删除
import
editorAudio
from
'
./components/editorAudio
'
;
import
editorVideo
from
'
./components/editorVideo
'
;
import
editorSlide
from
'
./components/editorSlide
'
;
import
editorImage
from
'
./components/editorImage
'
;
// import { getToken, upload } from 'api/qiniu'; // 七牛
// 业务需求可删除
export
default
{
name
:
'
tinymce
'
,
components
:
{
editorImage
,
editorAudio
,
editorSlide
,
editorVideo
},
// 业务需求可删除
props
:
{
id
:
{
type
:
String
,
...
...
@@ -33,13 +17,6 @@
type
:
String
,
default
:
''
},
customButton
:
{
type
:
Array
,
required
:
false
,
default
()
{
return
[
'
editorAudio
'
,
'
editorImage
'
]
}
},
toolbar
:
{
type
:
Array
,
required
:
false
,
...
...
@@ -92,15 +69,12 @@
imagetools_toolbar
:
'
watermark
'
,
default_link_target
:
'
_blank
'
,
link_title
:
false
,
textcolor_map
:
[
'
1482f0
'
,
'
1482f0
'
,
'
4595e6
'
,
'
4595e6
'
],
init_instance_callback
:
editor
=>
{
if
(
_this
.
value
)
{
editor
.
setContent
(
_this
.
value
)
}
_this
.
hasInit
=
true
;
editor
.
on
(
'
Change
'
,
()
=>
{
editor
.
on
(
'
NodeChange Change KeyUp
'
,
()
=>
{
this
.
hasChange
=
true
;
this
.
$emit
(
'
input
'
,
editor
.
getContent
({
format
:
'
raw
'
}));
});
...
...
src/views/components/tinymce.vue
浏览文件 @
c412d17b
<
template
>
<div
class=
"components-container"
>
<code>
公司做的后台主要是一个cms系统,公司也是以自媒体为核心的,所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路,市面上常见的富文本都基本用过了,最终选择了
tinymce
</code>
<div
class=
"editor-container"
>
<code>
公司做的后台主要是一个cms系统,公司也是以自媒体为核心的,所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路,市面上常见的富文本都基本用过了,最终选择了
Tinymce
<a
target=
'_blank'
href=
'https://segmentfault.com/a/1190000009762198#articleHeader13'
>
相关文章
</a>
</code>
<div>
<Tinymce
:height=
200
ref=
"editor"
v-model=
"content"
></Tinymce>
</div>
<!--
<div
class=
'editor-content'
>
{{
content
}}
</div>
-->
<div
class=
'editor-content'
v-html=
'content'
></div>
</div>
</
template
>
<
script
>
import
Tinymce
from
'
components/Tinymce
'
;
...
...
@@ -18,11 +17,14 @@
return
{
content
:
'
Tinymce
'
}
},
methods
:
{
}
};
</
script
>
<
style
scoped
>
.editor-content
{
margin-top
:
20px
;
}
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录