@ebl-vue/editor-full 2.31.16 → 2.31.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebl-vue/editor-full",
-  "version": "2.31.16",
+  "version": "2.31.18",
   "type": "module",
   "author": "lrj525@sina.com",
   "description": "结构化编辑器",

package/src/components/Editor/Editor.vue

@@ -1,14 +1,5 @@
 <template>
-  <div class="ebl-editor" id="holder">
-    <!-- <div class="ce-block__content ebl-editor-title-wrap">
-      <input type="text" v-model="title" placeholder="请输入标题" class="ebl-editor-title-input"></input>
-    </div> -->
-    <!-- <div class="ce-block__content ebl-editor-time-wrap">
-      <span class="ebl-editor-time">最后修改时间：{{ lastUpdateTime }}</span>
-    </div> -->
-     <!-- <button @click="validate">保存</button>  -->
-
-  </div>
+  <div class="ebl-editor" id="holder"></div>
 </template>
 <script lang="ts" setup>
 
@@ -83,7 +74,7 @@ const tunes = ['indent', 'blockAlignment'];
 onMounted(() => {
 
   editor = new EditorJS({
-    minHeight: 100,
+    minHeight: 300,
     holder: 'holder',
     autofocus: true,
     defaultBlock: 'paragraph',

package/src/components/Editor/EditorRender.vue

@@ -0,0 +1,276 @@
+<template>
+  <div class="ebl-editor" id="holder"></div>
+</template>
+<script lang="ts" setup>
+
+import EditorJS from '@ebl-vue/editorjs';
+// import EditorJS from '../../../../editorjs/src/codex';
+// window.VERSION="2.31.0"; //如果是用源码模式时，需要设置全局变量
+
+import { onMounted, onUnmounted, watch, inject } from 'vue';
+import { toRaw } from 'vue';
+import { IEblEditorSettings } from '../../types';
+
+/**
+ * 插件
+ */
+
+import DragDrop from '../../plugins/drag-drop';
+import { H1, H2, H3, H4, H5, H6 } from '../../plugins/header';
+import BlockAlignment from '../../plugins/block-alignment';
+import Paragraph from '../../plugins/paragraph';
+import Code from '../../plugins/code';
+import type { OutputData } from '@ebl-vue/editorjs';
+import Quote from "../../plugins/quote";
+import Delimiter from '../../plugins/delimiter';
+import List from '../../plugins/list';
+import Undo from '../../plugins/undo';
+import Alert from '../../plugins/alert';
+import IndentTune from '../../plugins/indent';
+import Marker from "../../plugins/marker";
+import { ColorPickerWithoutSanitize } from "../../plugins/color-picker";
+import Underline from "../../plugins/underline";
+import InlineCode from "../../plugins/inline-code";
+import Table from '../../plugins/table';
+import ImageTool from "../../plugins/imageTool";
+import { ImageToolTune } from "../../plugins/imageResizeCrop";
+import Outline from '../../plugins/outline';
+
+const EblEditorSettings: IEblEditorSettings | undefined = inject("EblEditorSettings");
+defineOptions({
+  name: 'EblEditorRender',
+  inheritAttrs: false
+})
+
+
+let emits = defineEmits(["onReady", "onChange"]);
+
+
+interface Props {
+  placeholder: string,
+  data: OutputData,
+  locale: any,
+  userStore: any,
+  showOutline?: boolean,
+}
+
+const props = withDefaults(defineProps<Props>(), {
+
+  placeholder: "Enter something",
+  data: ()=>({
+    blocks: []
+  }),
+  locale: {},
+  showOutline:false
+});
+let editorData=toRaw(props.data);
+let editorIsReady = false;
+
+let editor: EditorJS | null = null;
+let undo: Undo | null = null;
+let outline: Outline | null = null;
+const tunes = ['indent', 'blockAlignment'];
+onMounted(() => {
+
+  editor = new EditorJS({
+    minHeight: 50,
+    holder: 'holder',
+    autofocus: true,
+    defaultBlock: 'paragraph',
+    placeholder: props.placeholder,
+    tunes: tunes,
+    tools: {
+      inlineCode: InlineCode,
+      underline: Underline,
+      Color: {
+        class: ColorPickerWithoutSanitize
+      },
+      marker: {
+        class: Marker
+      },
+      indent: {
+        class: IndentTune,
+      },
+      alert: {
+        class: Alert,
+        inlineToolbar: true
+      },
+      List: {
+        class: List,
+        inlineToolbar: true,
+        config: {
+          defaultStyle: 'checklist',
+
+          maxLevel: 4,
+        }
+      },
+      h1: {
+        class: H1,
+        inlineToolbar: true
+      },
+      h2: {
+        class: H2,
+        inlineToolbar: true,
+
+      },
+      h3: {
+        class: H3,
+        inlineToolbar: true
+      },
+      h4: {
+        class: H4,
+        inlineToolbar: true
+      },
+      h5: {
+        class: H5,
+        inlineToolbar: true
+      },
+      h6: {
+        class: H6,
+        inlineToolbar: true
+      },
+      paragraph: {
+        class: Paragraph,
+        inlineToolbar: true
+      },
+      blockAlignment: {
+        class: BlockAlignment,
+        inlineToolbar: true
+      },
+      code: {
+        class: Code,
+        config: {
+          lang: "javascript",
+          theme: "github-dark-dimmed"//"catppuccin-latte"
+        }
+      },
+      quote: {
+        class: Quote,
+        inlineToolbar: true
+      },
+      delimiter: Delimiter,
+      table: {
+        class: Table,
+        inlineToolbar: true,
+        config: {
+          rows: 2,
+          cols: 3,
+        }
+      },
+      image: {
+        class: ImageTool,
+        inlineToolbar: true,
+        tunes: tunes.concat(['imageResize']),
+        config: {
+          types: ".png,.jpeg,.jpg,.gif,.webp",
+          userStore: props.userStore,
+          endpoints: {
+            byFile: EblEditorSettings?.fileUploadEndpoint,
+            //byUrl: EblEditorSettings?.urlUploadEndpoint
+          },
+          features: {
+            caption: false,
+            stretch: false,
+            border: false,
+            background: false,
+          }
+
+
+        }
+      },
+      imageResize: {
+        class: ImageToolTune,
+        config: {
+          resize: true,
+          crop: false
+        }
+      },
+
+
+
+    },
+
+    data: editorData,
+    readOnly: true,
+    i18n: props.locale,
+    onChange: (api, event) => {
+      emits("onChange", api, event);
+    },
+    onReady: () => {
+      editorIsReady = true;
+      editorData = toRaw(props.data);
+      if (props.data && props.data.blocks && props.data.blocks.length > 0) {
+        editor!.render(editorData);
+      }
+      //文档大纲
+      if(props.showOutline){
+        outline = new Outline("holder",editor!);
+        outline.render(editorData);
+      }
+
+      emits("onReady");
+    },
+
+  })
+});
+onUnmounted(() => {
+  if (editor !== null) {
+    editor.destroy();
+    editor = null;
+  }
+});
+
+watch(() => props.data, (newVal, oldVal) => { 
+  editorData = toRaw(newVal);
+  if (editor != null && editorIsReady) {
+    editor.render(editorData).then(() => {
+      if (outline != null && props.showOutline) {
+        outline.render(editorData);
+      }
+    });
+  }
+  
+  
+
+},{
+  deep:true
+});
+
+
+/**
+ * 验证是否为空 */
+function validate() {
+  return new Promise((resolve, reject) => {
+    if (editor !== null) {
+      editor.save().then((outputData: OutputData) => {
+        if (outputData.blocks.length > 0) {
+          return resolve(true);
+
+        }
+        return resolve(false);
+      });
+    } else {
+      return resolve(false);
+    }
+  });
+}
+function getData() {
+  return new Promise((resolve, reject) => {
+    if (editor !== null) {
+      editor.save().then((outputData: OutputData) => {
+        return resolve(outputData);
+      });
+    } else {
+      return resolve(null);
+    }
+  });
+}
+
+defineExpose({
+  validate,
+  getData,
+});
+</script>
+<style scoped>
+
+</style>

package/src/components/index.ts

@@ -5,12 +5,13 @@ import type { SFCWithInstall } from 'types'
 
 
 import Editor from "./Editor/Editor.vue"
-
+import EditorRender from "./Editor/EditorRender.vue"
 
 
 
 const items = [ 
-  Editor  
+  Editor,
+  EditorRender
 ];
 
 let PluginList: Plugin[] = [];
@@ -23,5 +24,6 @@ for (let key in items) {
 
 export default PluginList;
 export {
-  Editor as EblEditor
+  Editor as EblEditor,
+  EditorRender as EblEditorRender
  };

package/src/plugins/code/index.css

@@ -51,8 +51,11 @@
   font-size: 13px;
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
 }
-
+.ce-editorjs-x-shiki__span code{
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+}
 .ce-editorjs-x-shiki__textarea {
+  all:unset;
   white-space: pre;
   overflow: hidden;
   background-color: transparent;
@@ -72,6 +75,12 @@
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
 }
 
+.ce-editorjs-x-shiki__textarea::selection {
+    background-color: #083ca9; /* 选中文本的背景色 */
+    color: #ffffff; /* 选中文本的颜色 */
+  
+}
+
 .ce-editorjs-x-shiki__lang {
   /* position: absolute;
 	line-height: 14px;

package/src/plugins/code/index.ts

@@ -365,7 +365,7 @@ export default class CodeTool implements BlockTool {
 
     wrapperLang.innerHTML = this.data.lang
     wrapperCopy.innerHTML = IconCopy;
-    wrapperCopyTip.innerText=this.api.i18n.t('Copied');
+    wrapperCopyTip.innerText = this.api.i18n.t('Copied');
 
     
 
@@ -398,7 +398,7 @@ export default class CodeTool implements BlockTool {
     wrapperHolder.appendChild(span);
     wrapperHolder.appendChild(textarea);
    
-    if(!this.readOnly) {
+    if (!this.readOnly) {
       wrapperSelectorHolder.appendChild(selectorLanguage);
       //wrapperSelectorHolder.appendChild(selectorTheme);
     
@@ -467,7 +467,7 @@ export default class CodeTool implements BlockTool {
       }
     });
     wrapperCopy.addEventListener('click', (event: MouseEvent) => {
-      this.copyCode(this.data.code,event);
+      this.copyCode(this.data.code, event);
     });
 
     this.nodes.textarea = textarea;
@@ -486,7 +486,7 @@ export default class CodeTool implements BlockTool {
         {
           preprocess(code) {
             // if (code.endsWith('\n'))
-              return `${code}\n`
+            return `${code}\n`
           },
           pre(node) {
             this.addClassToHast(node, 'ce-editorjs-x-shiki__span')
@@ -509,30 +509,60 @@ export default class CodeTool implements BlockTool {
 
   }
 
-  private copyCode(code: string, event: MouseEvent) {
+  private copyCode(code: string, event: MouseEvent) {    
     if (this.data.code) {
-      navigator.clipboard.writeText(code)
-        .then(() => {      
-          if (event.target) {
-            const parentEle = (event.target as HTMLElement).parentElement;
-            if (parentEle) {
-              const tooltip = parentEle.lastChild as HTMLElement;              
-              if (tooltip) {
-                tooltip.classList.add('visible');
-                setTimeout(() => {
-                  tooltip.classList.remove('visible');
-
-                }, 2000);
+      if (navigator.clipboard && window.isSecureContext) {
+        try {
+          navigator.clipboard.writeText(code).then(() => {
+            if (event.target) {
+              const parentEle = (event.target as HTMLElement).parentElement;
+              if (parentEle) {
+                const tooltip = parentEle.lastChild as HTMLElement;
+                if (tooltip) {
+                  tooltip.classList.add('visible');
+                  setTimeout(() => {
+                    tooltip.classList.remove('visible');
+
+                  }, 2000);
+                }
               }
             }
+          }).catch((err) => {
+            console.error(err);
+            alert("复制失败");
+          });
+       
+        } catch (err) {
+          alert("复制失败");
+        }
+      } else {
+        // 传统方法：使用 textarea 和 execCommand
+      
+          const textArea = document.createElement('textarea');
+          textArea.value = code;
+    
+          // 避免滚动到底部
+          textArea.style.top = '0';
+          textArea.style.left = '0';
+          textArea.style.position = 'fixed';
+          textArea.style.opacity = '0';
+          textArea.style.pointerEvents = 'none';
+          textArea.style.zIndex = '-1000';
+    
+          document.body.appendChild(textArea);
+          textArea.focus();
+          textArea.select();    
+          try {
+            document.execCommand('copy');
+            document.body.removeChild(textArea);            
+          } catch (err) {
+            alert("复制失败");
+            document.body.removeChild(textArea);
+            
           }
-
         
-      })
-        .catch((err) => {
-          console.error(err);
-          alert("Unable to copy");
-        });
+      }
     }
+    
   }
 }