|
|
@@ -1,71 +1,117 @@
|
|
|
<template>
|
|
|
- <div id="toolbar"></div>
|
|
|
- <div ref="editorRef" style="border: 1px solid #ccc; height: 500px"></div>
|
|
|
+ <Editor
|
|
|
+ v-model="valueHtml"
|
|
|
+ :defaultConfig="editorConfig"
|
|
|
+ :mode="mode"
|
|
|
+ @onCreated="handleCreated"
|
|
|
+ :style="editor_style"
|
|
|
+ />
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { onMounted, ref, onUnmounted } from 'vue';
|
|
|
-import { createEditor, createToolbar, Boot } from '@wangeditor/editor';
|
|
|
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
|
|
|
|
|
|
-const editorRef = ref(null);
|
|
|
-let editor = null;
|
|
|
-let toolbarEditor = null;
|
|
|
-
|
|
|
-onMounted(() => {
|
|
|
- if (editorRef.value) {
|
|
|
- editor = createEditor({ selector: editorRef.value });
|
|
|
- toolbarEditor = createToolbar({
|
|
|
- editor,
|
|
|
- selector: '#toolbar' // 确保有一个id为toolbar的DOM元素
|
|
|
- });
|
|
|
+import { onBeforeUnmount, ref, shallowRef, onMounted, watch } from 'vue';
|
|
|
+import { Editor } from '@wangeditor/editor-for-vue';
|
|
|
+const props = defineProps({
|
|
|
+ content: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ editor_style: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {
|
|
|
+ width: '100%',
|
|
|
+ height: '100%',
|
|
|
+ padding: '10px 20px'
|
|
|
+ };
|
|
|
+ }
|
|
|
}
|
|
|
- console.log('editor', editor);
|
|
|
- console.log(Boot);
|
|
|
});
|
|
|
|
|
|
-onUnmounted(() => {
|
|
|
- if (editor) {
|
|
|
- editor.destroy(); // 销毁编辑器实例
|
|
|
- }
|
|
|
- if (toolbarEditor) {
|
|
|
- toolbarEditor.destroy(); // 销毁工具栏实例（如果有的话）
|
|
|
- }
|
|
|
-});
|
|
|
+// 编辑器实例，必须用 shallowRef
|
|
|
+const editorRef = shallowRef();
|
|
|
|
|
|
-//自定义菜单
|
|
|
-class MyButtonMenu {
|
|
|
- // JS 语法
|
|
|
+// 内容 HTML
|
|
|
+const valueHtml = ref(props.content);
|
|
|
|
|
|
- constructor(title, iconSvg, tag, exec) {
|
|
|
- this.title = title; // 自定义菜单标题
|
|
|
- this.iconSvg = iconSvg; // 自定义菜单的svg
|
|
|
- this.tag = tag; //自定义菜单的类型
|
|
|
- this.exec = exec; //自定义菜单点击的方法
|
|
|
+watch(
|
|
|
+ () => props.content,
|
|
|
+ (val) => {
|
|
|
+ valueHtml.value = props.content;
|
|
|
+ },
|
|
|
+ {
|
|
|
+ immediate: true
|
|
|
}
|
|
|
+);
|
|
|
|
|
|
- // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
|
|
|
- getValue(editor) {
|
|
|
- // JS 语法
|
|
|
- return ' hello ';
|
|
|
+const editorConfig = {
|
|
|
+ placeholder: '请输入内容...',
|
|
|
+ toolbarConfig: {}, // 可以根据需求配置工具栏
|
|
|
+ toolbarConfig: {
|
|
|
+ // 添加自定义按钮
|
|
|
+ customButtons: [
|
|
|
+ {
|
|
|
+ key: 'printSelectedText', // 自定义按钮的key
|
|
|
+ title: '打印选中文本',
|
|
|
+ iconSvg: '<svg>...</svg>', // 按钮的图标，可以是SVG图标
|
|
|
+ onClick: () => {
|
|
|
+ const editor = editorRef.value;
|
|
|
+ const selectedText = editor.selection.getText(); // 获取选中的文本
|
|
|
+ console.log('选中的文本:', selectedText); // 打印选中的文本
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ hoverbarKeys: {
|
|
|
+ text: {
|
|
|
+ menuKeys: [
|
|
|
+ 'bold', // 加粗
|
|
|
+ 'italic', // 斜体
|
|
|
+ 'underline', // 下划线
|
|
|
+ 'bulletedList', // 无序列表
|
|
|
+ 'numberedList', // 有序列表
|
|
|
+ 'customButton' // 新增的自定义按钮
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ image: {
|
|
|
+ menuKeys: [
|
|
|
+ // "editImage",// 编辑图片
|
|
|
+ 'deleteImage' // 删除图片
|
|
|
+ ]
|
|
|
+ }
|
|
|
}
|
|
|
+};
|
|
|
|
|
|
- // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
|
|
|
- isActive(editor) {
|
|
|
- // JS 语法
|
|
|
- return false;
|
|
|
- }
|
|
|
+// 组件销毁时，也及时销毁编辑器
|
|
|
+onBeforeUnmount(() => {
|
|
|
+ const editor = editorRef.value;
|
|
|
+ if (editor == null) return;
|
|
|
+ editor.destroy();
|
|
|
+});
|
|
|
|
|
|
- // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
|
|
|
- isDisabled(editor) {
|
|
|
- // JS 语法
|
|
|
- return false;
|
|
|
- }
|
|
|
+const handleCreated = (editor) => {
|
|
|
+ editorRef.value = editor; // 记录 editor 实例，重要！
|
|
|
+ console.log(editor);
|
|
|
+ // 绑定自定义按钮的事件
|
|
|
+ // editor.addMenu([
|
|
|
+ // {
|
|
|
+ // key: 'customButton', // 自定义按钮的key
|
|
|
+ // title: '打印选中文本', // 按钮显示的标题
|
|
|
+ // iconSvg: '<svg>...</svg>', // 自定义按钮图标（你可以用SVG）
|
|
|
+ // onClick: () => {
|
|
|
+ // const selectedText = editor.selection.getText(); // 获取选中的文本
|
|
|
+ // console.log('选中的文本:', selectedText); // 打印选中的文本
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // ]);
|
|
|
+};
|
|
|
+</script>
|
|
|
|
|
|
- // 点击菜单时触发的函数
|
|
|
- // exec(editor, value) { // JS 语法
|
|
|
- // if (this.isDisabled(editor)) return
|
|
|
- // editor.insertText(value) // value 即 this.value(editor) 的返回值
|
|
|
- // }
|
|
|
+<style>
|
|
|
+.editor {
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ padding: 20px;
|
|
|
}
|
|
|
-</script>
|
|
|
+</style>
|
hanyang