@ebl-vue/editor-full 2.31.21 → 2.31.23

package/package.json

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

package/src/components/Editor/EditorRender.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ebl-editor" id="holder"></div>
+  <div class="ebl-editor readonly" id="holder"></div>
 </template>
 <script lang="ts" setup>
 
@@ -9,13 +9,13 @@ import EditorJS from '@ebl-vue/editorjs';
 
 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';
@@ -36,7 +36,7 @@ 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
@@ -47,21 +47,19 @@ let emits = defineEmits(["onReady", "onChange"]);
 
 
 interface Props {
-  placeholder: string,
   data: OutputData,
   locale: any,
-  userStore: any,
   showOutline?: boolean,
+  scrollWrap:string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-
-  placeholder: "Enter something",
   data: ()=>({
     blocks: []
   }),
   locale: {},
-  showOutline:false
+  showOutline: false,
+  scrollWrap:''
 });
 let editorData=toRaw(props.data);
 let editorIsReady = false;
@@ -163,10 +161,10 @@ onMounted(() => {
         tunes: tunes.concat(['imageResize']),
         config: {
           types: ".png,.jpeg,.jpg,.gif,.webp",
-          userStore: props.userStore,
+          
           endpoints: {
-            byFile: EblEditorSettings?.fileUploadEndpoint,
-            //byUrl: EblEditorSettings?.urlUploadEndpoint
+            byFile: '',
+            
           },
           features: {
             caption: false,
@@ -204,7 +202,7 @@ onMounted(() => {
       }
       //文档大纲
       if(props.showOutline){
-        outline = new Outline("holder",editor!);
+        outline = new Outline("holder",props.scrollWrap,editor!);
         outline.render(editorData);
       }
 

package/src/index.ts

@@ -4,7 +4,7 @@ import './style.css'
 import { createInstaller } from './installer'
 import Components from './components';
 import zhCn from './i18n/zh-cn';
-import Editor from './components/Editor/Editor.vue';
+import { EblEditor,EblEditorRender } from './components';
 
 const installer = createInstaller(Components);
 export const install = installer.install;
@@ -17,5 +17,6 @@ export {
 };
 export type * from "./types";
 export {
-  Editor as EblEditor 
+  EblEditor,
+  EblEditorRender
 }

package/src/plugins/outline/index.css

@@ -1,4 +1,7 @@
 .ebl-outline{
+  position:fixed;
+  top:0;
+  right:0;
   padding: 15px 12px;
   width:280px;
  
@@ -7,6 +10,7 @@
   color: #606266;
   font-size: 14px;
   padding-bottom: 50px;
+  height: calc(100vh - var(--header-height));
 }
 .ebl-outline:hover{
   overflow: auto;

package/src/plugins/outline/index.ts

@@ -8,14 +8,15 @@ import { OutputData } from '@ebl-vue/editorjs';
 export default class Outline{
   private editor: EditorJS;
   private holder: HTMLElement;
+  private scrollWrap: HTMLElement;
   /**
    * 初始化插件
    * @param {EditorJS} editor - 编辑器实例
    */
-  constructor(holderId: string,editor: EditorJS) {
+  constructor(holderId: string,scrollWrap:string,editor: EditorJS) {
     this.editor = editor;
     this.holder = document.getElementById(holderId) as HTMLElement;
-    
+    this.scrollWrap = (document.getElementById(scrollWrap) ||document.getElementsByTagName(scrollWrap)[0] || document.querySelector(scrollWrap)) as HTMLElement;
   }
 
   public render(data: OutputData) {
@@ -50,7 +51,13 @@ export default class Outline{
           const block = document.querySelector<HTMLElement>('.codex-editor .ce-block[data-id="' + blockData.id + '"]');
           if (block) {
             const top = block.offsetTop;
-            document.querySelector<HTMLElement>('.codex-editor')?.scrollTo(0, top);
+    
+            if (!this.scrollWrap) {
+              document.querySelector<HTMLElement>('.codex-editor')?.scrollTo(0, top);
+            } else {
+              window.scrollTo(0,top)
+              //this.scrollWrap.scrollTo(0, top);
+            }
           }
           
         });

package/src/style.css

@@ -18,33 +18,31 @@
     
 }
 .ebl-editor.outline{
-  display: flex;
-  flex-direction: row;
+  padding-right: 280px;
 }
 .ebl-editor.outline .codex-editor{flex:1;}
-.ebl-editor .outline-holder{
-  width: 200px;
-  border-right: 1px solid var(--color-border);
-  overflow: auto;
-}
+
+
 @media(max-width:1240px){
   .ebl-outline{
     display: none;
+    
+  }
+  .ebl-editor.outline{
+    padding-right: 0;
   }
 }
-.ce-block__content{
-  width: var(--content-width);
+@media(min-width:1240px){
+  .ebl-editor.readonly .ce-block__content{
+    max-width: 100%;
+    padding-left: 100px;
+    padding-right: 100px;
+    
+  }
+ 
 }
-/* @media (min-width: 1050px) {
-    .ce-block__content {
-        max-width: 700px;
-        
-    }
-    .ce-toolbar__content {
-      max-width: 700px;
-    }
-  
-} */
+
+
 
 .ce-toolbar,.ce-inline-toolbar{
   z-index: 1000;
@@ -93,8 +91,8 @@
   
 /* 滚动条整体部分 */
 .ebl-editor ::-webkit-scrollbar {
-    width: 10px;               /* 滚动条的宽度 */
-    height: 12px;              /* 滚动条的高度 */
+    width: 6px;               /* 滚动条的宽度 */
+    height: 6px;              /* 滚动条的高度 */
 }
 
 /* 滚动条轨道 */
@@ -107,7 +105,7 @@
 .ebl-editor ::-webkit-scrollbar-thumb {
     background: #C0C0C0;         /* 滑块颜色 */
     border-radius: 10px;      /* 滑块圆角 */
-    border: 2px solid #fff;   /* 滑块边框 */
+    border: 1px solid #fff;   /* 滑块边框 */
 }
 
 /* 滑块悬停时 */