GP 模块编辑器

自定义块编辑器说明。

使用

包

https://www.npmjs.com/package/gp-editorjs

文档

https://editorjs.io/base-concepts/

插件

https://github.com/editor-js/awesome-editorjs

依赖

目前依赖阿里图标，在使用的项目中，添加阿里图标库的引入

https://www.iconfont.cn/manage/index?spm=a313x.manage_type_mylikes.i1.db775f1f3.3f3e3a81JXSoHU&manage_type=myprojects&projectId=3524467


//at.alicdn.com/t/c/font_3524467_318htfu2kxc.css

/*
引入阿里图标样式
*/
@import url("https://at.alicdn.com/t/c/font_3524467_318htfu2kxc.css");

使用说明

// 1. 安装
// yarn add gp-editorjs

// 2. 引入 - 支持 TS
// import GPEditorJS from 'gp-editorjs'; // 原引入方式
// import 'gp-editorjs/dist/style.css'; // 原引入方式

import GPEditorJS, { OutputData } from 'gp-editorjs'; // 对应 "./dist/gp-editorjs.es.js"
import 'gp-editorjs/style.css'; // 对应 "./dist/style.css"

// 此方案不可以，预览时也是引入上述样式即可
// 2.1 使用预览显示的样式（渲染为 html 结构的样式）
// 使用 index.css
// import 'gp-editorjs/index.css';

// 3. 绑定
const editorVal = ref({});
const editorRef = ref();

// 4. 使用

// 简单使用
<GPEditorJS v-model="editorVal" ref="editorRef" />

// 自定义上传方法
<GPEditorJS v-model="editorVal" ref="editorRef" 
:linkEndpoint="linkEndpoint"
:uploadByFile="uploadByFile"
:uploadByImage="uploadByImage"
:uploadByImageUrl="uploadByImageUrl" />

// 只开启指定模块的功能
<GPEditorJS :enabled-tools="['header', 'image', 'list', 'checklist', 'table']" placeholder="请输入内容"
      v-model="editorVal" ref="editorRef2" />

// 显示内容
<textarea style="width: 100%;" :value="JSON.stringify(editorVal || {})" />

/* 上传文件 - 可选的配置（覆盖默认逻辑） */
const uploadByFile = async (file) => {
  console.log('file', file);
  var fdata1 = new FormData();
  fdata1.append('BussCode', '6000');
  fdata1.append('UserType', 'gp');
  fdata1.append('Date', formatToDate(new Date()));
  fdata1.append('Guid', buildUUID());
  fdata1.append('File', file);
  fdata1.append('Type', file.type);
  const res = await uploadFile(fdata1);
  return {
    success: 1,
    file: {
      url: res.url,
      // any other image data you want to store, such as width, height, color, extension, etc

      // 如果是附件
      title: "Hero",
      name: res.fileName,
      size: 91,
      extension: "jpg"
    },
  };
}

/* 上传图片 - 可选的配置（覆盖默认逻辑） */
const uploadByImage = async (file) => {
  console.log('file', file);
  var fdata1 = new FormData();
  fdata1.append('BussCode', '6000');
  fdata1.append('UserType', 'gp');
  fdata1.append('Date', formatToDate(new Date()));
  fdata1.append('Guid', buildUUID());
  fdata1.append('File', file);
  fdata1.append('Type', file.type);
  const res = await uploadFile(fdata1);
  return {
    success: 1,
    file: {
      url: res.url,
      // any other image data you want to store, such as width, height, color, extension, etc
    },
  };
}

/* 粘贴图片 url - 可选的配置（覆盖默认逻辑） */ 
const uploadByImageUrl = async (url) => {
  return {
    success: 1,
    file: {
      url: url,
      // any other image data you want to store, such as width, height, color, extension, etc
    }
  }
}

/* 插入自定义块 */
const onInsert = async () => {
  if (editorRef.value) {
   // param1 块名称
   // param2 块内容
    editorRef.value.received('image', {
      file: {
        url: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
      },
      caption: '测试',
      withBackground: true,
    });
  }
}

// 链接抓取地址 - 可选的配置（覆盖默认逻辑）
// https://github.com/editor-js/link
const api = process.env.VUE_APP_API_BASE_URL;
const linkEndpoint = api + '/api/test/link'
/*
接口返回示例
{
    success = 0,
    meta = new
    {
        title = ex.Message,
        site_name = "CodeX",
        description = "Club of web-development, design and marketing. We build team learning how to build full-valued projects on the world market.",
        image = new
        {
            url = "https://codex.so/public/app/img/meta_img.png"
        }
    }
}
*/

包发布

npm run push

// or
npm run build
npm version patch
npm login
npm publish

模板

Vue 3 + TypeScript + Vite

npm init vite@latest gp-editorjs --template vue-ts

参考

/* 机构组件样式覆盖示例 */

/* .gp-school-link {
  @apply border p-2 m-3 flex flex-row rounded hover:bg-blue-50 text-gray-500 items-center justify-center bg-gray-50;
  img {
    @apply mr-2 w-[64px] h-[64px] shadow p-0.5 flex-none;
  }
  p {
    @apply flex flex-col flex-auto m-0;
  }
  .gp-school-link__title {
    @apply text-gray-600 font-bold;
  }
  .gp-school-link__desc {
    @apply text-blue-600;
  }
  .gp-school-link__tag-item {
    @apply px-1.5 py-0.5 mr-2 bg-blue-100 text-blue-500 text-xs rounded;
  }
} */