From 0203ef4d930ba7a56996debad9d14c9528390fba Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期四, 25 八月 2022 10:17:36 +0800
Subject: [PATCH] 合并
---
src/components/editor/index.vue | 198 ++++++++++++++++++++++++------------------------
1 files changed, 99 insertions(+), 99 deletions(-)
diff --git a/src/components/editor/index.vue b/src/components/editor/index.vue
index 78e5726..577e98e 100644
--- a/src/components/editor/index.vue
+++ b/src/components/editor/index.vue
@@ -1,8 +1,8 @@
<template>
- <div class="editor-container">
- <div ref="editorToolbar"></div>
- <div ref="editorContent" :style="{ height }"></div>
- </div>
+ <div class="editor-container">
+ <div ref="editorToolbar"></div>
+ <div ref="editorContent" :style="{ height }"></div>
+ </div>
</template>
<script lang="ts">
@@ -13,103 +13,103 @@
// 定义接口来定义对象的类型
interface WangeditorState {
- editorToolbar: HTMLDivElement | null;
- editorContent: HTMLDivElement | null;
- editor: any;
+ 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),
- };
- },
+ 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>
--
Gitblit v1.9.2