初始化项目
This commit is contained in:
115
src/components/editor/index.vue
Normal file
115
src/components/editor/index.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div class="editor-container">
|
||||
<div ref="editorToolbar"></div>
|
||||
<div ref="editorContent" :style="{ height }"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onMounted, watch, defineComponent } from 'vue';
|
||||
import { createEditor, createToolbar, IEditorConfig, IToolbarConfig, IDomEditor } from '@wangeditor/editor';
|
||||
import '@wangeditor/editor/dist/css/style.css';
|
||||
import { toolbarKeys } from './toolbar';
|
||||
|
||||
// 定义接口来定义对象的类型
|
||||
interface WangeditorState {
|
||||
editorToolbar: HTMLDivElement | null;
|
||||
editorContent: HTMLDivElement | null;
|
||||
editor: any;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'wngEditor',
|
||||
props: {
|
||||
// 节点 id
|
||||
id: {
|
||||
type: String,
|
||||
default: () => 'wangeditor',
|
||||
},
|
||||
// 是否禁用
|
||||
isDisable: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
// 内容框默认 placeholder
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: () => '请输入内容',
|
||||
},
|
||||
// 双向绑定：双向绑定值，字段名为固定，改了之后将不生效
|
||||
// 参考：https://v3.cn.vuejs.org/guide/migration/v-model.html#%E8%BF%81%E7%A7%BB%E7%AD%96%E7%95%A5
|
||||
modelValue: String,
|
||||
// https://www.wangeditor.com/v5/getting-started.html#mode-%E6%A8%A1%E5%BC%8F
|
||||
// 模式，可选 <default|simple>，默认 default
|
||||
mode: {
|
||||
type: String,
|
||||
default: () => 'default',
|
||||
},
|
||||
// 高度
|
||||
height: {
|
||||
type: String,
|
||||
default: () => '310px',
|
||||
},
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const state = reactive<WangeditorState>({
|
||||
editorToolbar: null,
|
||||
editor: null,
|
||||
editorContent: null,
|
||||
});
|
||||
// 富文本配置
|
||||
const wangeditorConfig = () => {
|
||||
const editorConfig: Partial<IEditorConfig> = { MENU_CONF: {} };
|
||||
props.isDisable ? (editorConfig.readOnly = true) : (editorConfig.readOnly = false);
|
||||
editorConfig.placeholder = props.placeholder;
|
||||
editorConfig.onChange = (editor: IDomEditor) => {
|
||||
// console.log('content', editor.children);
|
||||
// console.log('html', editor.getHtml());
|
||||
emit('update:modelValue', editor.getHtml());
|
||||
};
|
||||
(<any>editorConfig).MENU_CONF['uploadImage'] = {
|
||||
base64LimitSize: 10 * 1024 * 1024,
|
||||
};
|
||||
return editorConfig;
|
||||
};
|
||||
//
|
||||
const toolbarConfig = () => {
|
||||
const toolbarConfig: Partial<IToolbarConfig> = {};
|
||||
toolbarConfig.toolbarKeys = toolbarKeys;
|
||||
return toolbarConfig;
|
||||
};
|
||||
// 初始化富文本
|
||||
// https://www.wangeditor.com/
|
||||
const initWangeditor = () => {
|
||||
state.editor = createEditor({
|
||||
html: props.modelValue,
|
||||
selector: state.editorContent!,
|
||||
config: wangeditorConfig(),
|
||||
mode: props.mode,
|
||||
});
|
||||
createToolbar({
|
||||
editor: state.editor,
|
||||
selector: state.editorToolbar!,
|
||||
mode: props.mode,
|
||||
config: toolbarConfig(),
|
||||
});
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initWangeditor();
|
||||
});
|
||||
// 监听双向绑定值的改变
|
||||
// https://gitee.com/lyt-top/vue-next-admin/issues/I4LM7I
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(value) => {
|
||||
state.editor.clear();
|
||||
state.editor.dangerouslyInsertHtml(value);
|
||||
}
|
||||
);
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
60
src/components/editor/toolbar.ts
Normal file
60
src/components/editor/toolbar.ts
Normal file
@@ -0,0 +1,60 @@
|
||||
/**
|
||||
* 工具栏配置
|
||||
*/
|
||||
export const toolbarKeys = [
|
||||
'headerSelect',
|
||||
'blockquote',
|
||||
'|',
|
||||
'bold',
|
||||
'underline',
|
||||
'italic',
|
||||
{
|
||||
key: 'group-more-style',
|
||||
title: '更多',
|
||||
iconSvg:
|
||||
'<svg viewBox="0 0 1024 1024"><path d="M204.8 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M505.6 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M806.4 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path></svg>',
|
||||
menuKeys: ['through', 'code', 'sup', 'sub', 'clearStyle'],
|
||||
},
|
||||
'color',
|
||||
'bgColor',
|
||||
'|',
|
||||
'fontSize',
|
||||
'fontFamily',
|
||||
'lineHeight',
|
||||
'|',
|
||||
'bulletedList',
|
||||
'numberedList',
|
||||
'todo',
|
||||
{
|
||||
key: 'group-justify',
|
||||
title: '对齐',
|
||||
iconSvg:
|
||||
'<svg viewBox="0 0 1024 1024"><path d="M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z"></path></svg>',
|
||||
menuKeys: ['justifyLeft', 'justifyRight', 'justifyCenter', 'justifyJustify'],
|
||||
},
|
||||
{
|
||||
key: 'group-indent',
|
||||
title: '缩进',
|
||||
iconSvg:
|
||||
'<svg viewBox="0 0 1024 1024"><path d="M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z"></path></svg>',
|
||||
menuKeys: ['indent', 'delIndent'],
|
||||
},
|
||||
'|',
|
||||
'emotion',
|
||||
'insertLink',
|
||||
{
|
||||
key: 'group-image',
|
||||
title: '图片',
|
||||
iconSvg:
|
||||
'<svg viewBox="0 0 1024 1024"><path d="M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z"></path></svg>',
|
||||
menuKeys: ['uploadImage'],
|
||||
},
|
||||
'insertTable',
|
||||
'codeBlock',
|
||||
'divider',
|
||||
'|',
|
||||
'undo',
|
||||
'redo',
|
||||
'|',
|
||||
'fullScreen',
|
||||
];
|
||||
Reference in New Issue
Block a user