Skip to content

Awesome-Markdown-Editor
Awesome-Markdown-Editor

GaleTeng / Awesome-Markdown-Editor
与 Fork 源项目一致

Fork自 gitcode_dev / Awesome-Markdown-Editor

通知 1
Star 1
Fork 0
Awesome-Markdown-Editor
Awesome-Markdown-Editor

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 49d3ee27 编写于 作者: 璃白.'s avatar 璃白. 🌻
浏览文件
操作

feat:添加工具栏注册

上级 89555f69
隐藏空白更改
内联 并排
Showing with 103 addition and 107 deletion
src/App.vue
浏览文件 @ 49d3ee27
......@@ -17,7 +17,9 @@
:disabled="disabled"
:fullScreen.sync="fullScreen"
:themeOptions="themeOptions"
:uploadPercent="uploadPercent"
:uploadImgPercent="uploadImgPercent"
:uploadVideoPercent="uploadVideoPercent"
:registerTools="registerTools"
@upload="handleUpload"
@getFormatType="formatType = $event"
@updateShowHelp="showHelp = $event"
......@@ -166,6 +168,11 @@ export default {
type: Object,
default: () => {}
},
// 自定义工具栏
registerTools: {
type: Array,
default: () => []
},
// 行高度
rows: {
type: [Number, String],
......@@ -211,16 +218,25 @@ export default {
uploadImgCallBack() {
const _this = this;
return function({ url, file: { name } }) {
const originalText = _this.text;
const selectionInfo = _this.selectionInfo;
const newText = formatText(
originalText,
selectionInfo,
"\n![img](",
`${url} "=600 #left")\n`
if (isNaN(parseInt(url))) {
const originalText = _this.text;
const selectionInfo = _this.selectionInfo;
const newText = formatText(
originalText,
selectionInfo,
"\n![img](",
`${url} "=600 #left")\n`
);
_this.text = newText;
_this.$refs.mdUploadFile.value = "";
_this.uploadImgPercent = 100;
} else {
_this.uploadImgPercent = parseInt(url);
}
_this.$refs["md_header" + _this.id].loading(
"img",
_this.uploadImgPercent
);
_this.text = newText;
_this.$refs.mdUploadFile.value = "";
};
},
uploadFileCallBack() {
......@@ -252,13 +268,13 @@ export default {
);
_this.text = newText;
_this.$refs.mdUploadFile.value = "";
_this.uploadPercent = 100;
_this.uploadVideoPercent = 100;
} else {
_this.uploadPercent = parseInt(url);
_this.uploadVideoPercent = parseInt(url);
}
_this.$refs["md_header" + _this.id].loading(
"video",
_this.uploadPercent
_this.uploadVideoPercent
);
};
}
......@@ -277,7 +293,9 @@ export default {
formatType: "",
htmlMinHeight: 150,
showHelp: false,
uploadPercent: 0,
uploadImgPercent: 0,
uploadFlePercent: 0,
uploadVideoPercent: 0,
textLength: "",
userList: false,
callUserList: [],
......
src/assets/style/iconfont.less
浏览文件 @ 49d3ee27
......@@ -47,7 +47,7 @@
content: "\eaef";
}
.icon-tupian:before {
.icon-img:before {
content: "\e7ed";
}
......@@ -107,7 +107,7 @@
content: "\e503";
}
.icon-wenjian:before {
.icon-file:before {
content: "\e607";
}
......@@ -119,7 +119,7 @@
content: "\e6be";
}
.icon-shipin:before {
.icon-video:before {
content: "\e63c";
}
.icon-biaoti:before {
......
src/components/content/components/help-doc.vue
浏览文件 @ 49d3ee27
......@@ -69,22 +69,22 @@ export default {
{
title: "图片",
doc: "![alt](url)",
icon: "tupian"
icon: "img"
},
{
title: "图片大小",
doc: '![alt](url "=300x200")',
icon: "tupian"
icon: "img"
},
{
title: "图片位置",
doc: '![alt](url "#left")',
icon: "tupian"
icon: "img"
},
{
title: "图片名称",
doc: '![alt](url "%title")',
icon: "tupian"
icon: "img"
},
{
title: "代码",
......
src/components/footer/upload-files.vue
浏览文件 @ 49d3ee27
<template>
<div class="upload_files" @click="$refs.mdUploadFile.click()">
<span class="icon iconfont icon-tupian"></span>
<span class="icon iconfont icon-img"></span>
<input
ref="mdUploadFile"
class="md_upload"
......
src/components/header/components/tool-button.vue
浏览文件 @ 49d3ee27
......@@ -10,11 +10,19 @@
<div key="loading" class="tool_button loading_button">
<span class="circle">
<span class="loading"></span>
<span class="percent">{{ uploadPercent + "%" }}</span>
<span class="percent">{{ info.percent + "%" }}</span>
</span>
<!-- <span :class="['icon loading iconfont', `icon-${info.icon}`]"> </span> -->
</div>
</transition-group>
<div
class="tool_button"
@click="info.click"
v-tip.bottom="info.tip"
v-else-if="info.register"
>
<img :src="info.icon" alt="" />
</div>
<div
v-else-if="info.name === 'code'"
@click="handleTool(info.name, info.startStr, info.endStr)"
......@@ -48,15 +56,17 @@
<span :class="['icon iconfont', `icon-${info.icon}`]"></span>
</div>
</transition-group>
<div
v-else
v-tip.bottom="options"
@click="handleTool(info.name, info.startStr, info.endStr)"
@dblclick="handleDbClick(info.name)"
class="tool_button"
>
<span :class="['icon iconfont', `icon-${info.icon}`]"></span>
</div>
<transition-group name="loading" v-else>
<div
key="tool"
v-tip.bottom="options"
@click="handleTool(info.name, info.startStr, info.endStr)"
@dblclick="handleDbClick(info.name)"
class="tool_button"
>
<span :class="['icon iconfont', `icon-${info.icon}`]"></span>
</div>
</transition-group>
</template>
<script>
import { checkBoswer } from "@/assets/js/utils";
......@@ -95,10 +105,6 @@ export default {
ulNum: {
type: Number,
default: 1
},
uploadPercent: {
type: Number,
default: 0
}
},
data() {
......@@ -322,7 +328,11 @@ export default {
white-space: nowrap;
}
}
img {
width: 18px;
display: inline-block;
vertical-align: text-bottom;
}
.icon {
font-size: 18px;
color: var(--md-editor-text-color);
......@@ -355,7 +365,7 @@ export default {
font-size: 16px;
}
&.icon-help,
&.icon-wenjian {
&.icon-file {
font-size: 19px;
}
}
......
src/components/header/md-header.vue
浏览文件 @ 49d3ee27
......@@ -36,7 +36,6 @@
:zIndex="zIndex"
:themeOptions="themeOptions"
:selectionInfo="selectionInfo"
:uploadPercent="uploadPercent"
/>
</div>
</div>
......@@ -86,6 +85,10 @@ export default {
type: Object,
default: () => {}
},
registerTools: {
type: Array,
default: () => []
},
zIndex: {
type: [String, Number],
default: ""
......@@ -101,10 +104,6 @@ export default {
selectionInfo: {
type: Object,
default: () => {}
},
uploadPercent: {
type: Number,
default: 0
}
},
computed: {
......@@ -124,7 +123,6 @@ export default {
watch: {
fullScreen: {
handler: function(val) {
// console.log(val);
if (val) {
this.toolButtonList.pop();
this.toolButtonList.push(this.cancelFullScreenBtn);
......@@ -148,6 +146,20 @@ export default {
handler: function(val) {
this.$emit("getFormatType", val);
}
},
registerTools: {
handler: function(val) {
const list = this.toolButtonList;
const tableIndex = list.findIndex(item => item.name === "table");
this.toolButtonList.splice(
tableIndex,
0,
...val.map(item => {
item.register = true;
return item;
})
);
}
}
},
data() {
......@@ -237,21 +249,21 @@ export default {
},
{
name: "img",
icon: "tupian",
icon: "img",
tip: "上传图片",
startStr: "",
endStr: ""
},
{
name: "file",
icon: "wenjian",
icon: "file",
tip: "上传附件",
startStr: "",
endStr: ""
},
{
name: "video",
icon: "shipin",
icon: "video",
tip: "上传视频",
startStr: "",
endStr: ""
......@@ -296,16 +308,10 @@ export default {
methods: {
loading(type, percent) {
const list = this.toolButtonList;
switch (type) {
case "video":
list.find(item => item.name === type).icon =
parseInt(percent) === 100 || parseInt(percent) === 0
? "shipin"
: "loading";
break;
default:
break;
}
const item = list.find(item => item.name === type);
this.$set(item, "percent", percent);
item.icon =
parseInt(percent) === 100 || parseInt(percent) === 0 ? type : "loading";
},
resetUlNum() {
this.ulNum = 1;
......
src/main.js
浏览文件 @ 49d3ee27
......@@ -35,6 +35,7 @@ function initMdEditor(obj) {
maxLength,
showWordLimit,
throttle = 600,
registerTools = [],
canPreview,
canAttachFile,
themeOptions,
......@@ -61,6 +62,7 @@ function initMdEditor(obj) {
zIndex,
disabled,
tabSize,
registerTools,
setPreview: false,
setFullScreen: false,
focus: false,
......@@ -122,56 +124,6 @@ function initMdEditor(obj) {
queryUserList({ keyWord, callback }) {
if (!queryUserList) return callback(false); // 返回false则不触发@弹窗
queryUserList(keyWord, function(res) {
// const list = [
// {
// id: 1,
// name: "藤原拓海",
// avatar:
// "https://img2.baidu.com/it/u=2380211986,3979961921&fm=26&fmt=auto&gp=0.jpg"
// },
// {
// id: 2,
// name: "高桥凉介",
// avatar:
// "https://img0.baidu.com/it/u=777620324,2343967729&fm=26&fmt=auto&gp=0.jpg"
// },
// {
// id: 3,
// name: "马奎斯",
// avatar:
// "https://img2.baidu.com/it/u=1297316011,1869565258&fm=26&fmt=auto&gp=0.jpg"
// },
// {
// id: 4,
// name: "王一博",
// url: "https://weibo.com/u/5492443184",
// avatar:
// "https://img2.baidu.com/it/u=298051053,3773223854&fm=26&fmt=auto&gp=0.jpg"
// },
// {
// id: 5,
// name: "王俊凯",
// url: "https://weibo.com/tfwangjunkai",
// avatar:
// "https://img1.baidu.com/it/u=2378425879,2273515018&fm=26&fmt=auto&gp=0.jpg"
// },
// {
// id: 6,
// name: "易烊千玺",
// url: "https://weibo.com/tfyiyangqianxi",
// avatar:
// "https://img0.baidu.com/it/u=2227200088,1939721201&fm=26&fmt=auto&gp=0.jpg"
// },
// {
// id: 7,
// name: "白敬亭",
// url: "https://weibo.com/u/2112496475",
// avatar:
// "https://img1.baidu.com/it/u=3265411836,2089649447&fm=11&fmt=auto&gp=0.jpg"
// }
// ];
// callback(res);
const list = res;
if (!keyWord) return callback(list);
callback(
......@@ -229,6 +181,16 @@ function initMdEditor(obj) {
this.vEl.$forceUpdate();
};
this.registerTools = function(option) {
props.registerTools = [];
if (Array.isArray(option)) {
props.registerTools.push(...option);
} else {
props.registerTools.push(option);
}
this.vEl.$forceUpdate();
};
this.toggleTab = function(setPreview) {
if (setPreview !== "edit" && setPreview !== "preview") {
props.setPreview = !props.setPreview;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或