|
|
@@ -1,8 +1,8 @@
|
|
|
<template>
|
|
|
<div id="editor">
|
|
|
<div style="border: 1px solid #ccc">
|
|
|
- <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
|
|
|
- <Editor class="editor" :value="text" @input="toInput" :defaultConfig="ec" :mode="mode" @onCreated="onCreated" />
|
|
|
+ <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="tb" :mode="mode" />
|
|
|
+ <Editor class="editor" :style="{ height }" :value="text" @input="toInput" :defaultConfig="ec" :mode="mode" @onCreated="onCreated" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -15,8 +15,8 @@ export default {
|
|
|
props: {
|
|
|
text: { type: String },
|
|
|
mode: { type: String, default: 'default' }, // 或者simple
|
|
|
- toolbarConfig: { type: Object, default: () => ({}) },
|
|
|
- editorConfig: { type: Object, default: () => ({}) },
|
|
|
+ height: { type: String, default: '500px' },
|
|
|
+ url: { type: String },
|
|
|
},
|
|
|
model: {
|
|
|
prop: 'text',
|
|
|
@@ -26,7 +26,13 @@ export default {
|
|
|
data: function () {
|
|
|
return {
|
|
|
editor: null,
|
|
|
- ec: { placeholder: '请输入内容...', ...this.editorConfig },
|
|
|
+ ec: {
|
|
|
+ placeholder: '请输入内容...',
|
|
|
+ MENU_CONF: { uploadImage: { server: this.url, customInsert: this.customPicInsert } },
|
|
|
+ },
|
|
|
+ tb: {
|
|
|
+ excludeKeys: ['insertImage', 'insertVideo', 'uploadVideo', 'video'],
|
|
|
+ },
|
|
|
};
|
|
|
},
|
|
|
created() {},
|
|
|
@@ -37,19 +43,47 @@ export default {
|
|
|
toInput(e) {
|
|
|
this.$emit('input', e);
|
|
|
},
|
|
|
+ /**
|
|
|
+ * 自定义上传处理
|
|
|
+ * @param {Object} result 上传结果
|
|
|
+ * @param {Function} insertFn 编辑器添加上传结果函数
|
|
|
+ * @prop {result} {
|
|
|
+ * errcode,
|
|
|
+ * errmsg,
|
|
|
+ * id,
|
|
|
+ * name,
|
|
|
+ * uri:短地址
|
|
|
+ * }
|
|
|
+ */
|
|
|
+ customPicInsert(result, insertFn) {
|
|
|
+ const { errcode, uri, name } = result;
|
|
|
+ const url = `http://broadcast.waityou24.cn${uri}`;
|
|
|
+ if (errcode === 0) {
|
|
|
+ insertFn(url, name);
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
const editor = this.editor;
|
|
|
if (editor == null) return;
|
|
|
editor.destroy(); // 组件销毁时，及时销毁编辑器
|
|
|
},
|
|
|
+ watch: {
|
|
|
+ url: {
|
|
|
+ immediate: true,
|
|
|
+ handler(val) {
|
|
|
+ if (!val) return;
|
|
|
+ const MENU_CONF = { uploadImage: { server: val }, customInsert: this.customPicInsert };
|
|
|
+ // this.ec['MENU_CONF'] = MENU_CONF;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style src="@wangeditor/editor/dist/css/style.css"></style>
|
|
|
<style lang="less" scoped>
|
|
|
.editor {
|
|
|
- height: 500px;
|
|
|
overflow-y: hidden;
|
|
|
}
|
|
|
</style>
|
