Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
绝世唐门三哥
Vue Manage System
提交
6531f7fa
Vue Manage System
项目概览
绝世唐门三哥
/
Vue Manage System
通知
3
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Vue Manage System
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
6531f7fa
编写于
4月 11, 2018
作者:
L
lin-xin
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
'md编辑器上传图片'
上级
a0c5d89f
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
36 addition
and
5 deletion
+36
-5
src/components/common/Sidebar.vue
src/components/common/Sidebar.vue
+2
-2
src/components/page/Markdown.vue
src/components/page/Markdown.vue
+34
-3
未找到文件。
src/components/common/Sidebar.vue
浏览文件 @
6531f7fa
...
...
@@ -61,11 +61,11 @@
},
{
index
:
'
vueeditor
'
,
title
:
'
编辑器
'
title
:
'
富文本
编辑器
'
},
{
index
:
'
markdown
'
,
title
:
'
markdown
'
title
:
'
markdown
编辑器
'
},
{
index
:
'
upload
'
,
...
...
src/components/page/Markdown.vue
浏览文件 @
6531f7fa
...
...
@@ -11,8 +11,8 @@
mavonEditor:基于Vue的markdown编辑器。
访问地址:
<a
href=
"https://github.com/hinesboy/mavonEditor"
target=
"_blank"
>
mavonEditor
</a>
</div>
<mavon-editor
v-model=
"content"
codeStyle=
"tomorrow-night-blu
e"
style=
"min-height: 600px"
/>
<mavon-editor
v-model=
"content"
ref=
"md"
@
imgAdd=
"$imgAdd"
@
change=
"chang
e"
style=
"min-height: 600px"
/>
<el-button
class=
"editor-btn"
type=
"primary"
@
click=
"submit"
>
提交
</el-button>
</div>
</div>
</
template
>
...
...
@@ -24,12 +24,43 @@
data
:
function
(){
return
{
content
:
''
,
html
:
''
,
configs
:
{
}
}
},
components
:
{
mavonEditor
},
methods
:
{
// 将图片上传到服务器,返回地址替换到md中
$imgAdd
(
pos
,
$file
){
var
formdata
=
new
FormData
();
formdata
.
append
(
'
file
'
,
$file
);
// 这里没有服务器供大家尝试,可将下面上传接口替换为你自己的服务器接口
this
.
$axios
({
url
:
'
/common/upload
'
,
method
:
'
post
'
,
data
:
formdata
,
headers
:
{
'
Content-Type
'
:
'
multipart/form-data
'
},
}).
then
((
url
)
=>
{
this
.
$refs
.
md
.
$img2Url
(
pos
,
url
);
})
},
change
(
value
,
render
){
// render 为 markdown 解析后的结果
this
.
html
=
render
;
},
submit
(){
console
.
log
(
this
.
content
);
console
.
log
(
this
.
html
);
this
.
$message
.
success
(
'
提交成功!
'
);
}
}
}
</
script
>
\ No newline at end of file
</
script
>
<
style
scoped
>
.editor-btn
{
margin-top
:
20px
;
}
</
style
>
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录