# @digit-fe/digit-editor-new

[![NPM version](https://img.shields.io/npm/v/@digit-fe/digit-editor-new.svg?style=flat)](https://npmjs.org/package/@digit-fe/digit-editor-new)
[![NPM downloads](http://img.shields.io/npm/dm/@digit-fe/digit-editor-new.svg?style=flat)](https://npmjs.org/package/@digit-fe/digit-editor-new)

1 句话介绍：基于 Tiptap 和 Prosemirror 封装的富文本编辑器，适用于 React 工程中，<span style="color:red">Vue 工程暂不支持</span>  
采用 father.js(4.x 版本) [bundleless](https://zhuanlan.zhihu.com/p/349406330)模式进行编译打包，因此<span style="color:red">接入的工程需提供 less 的支持</span>

## 0.测试环境地址
https://testcert.fanruan.com/neweditor/

## 1.文档地址
https://admin.shequ.fanruan.com/digit

## 2.安装

```
npm install @digit-fe/digit-editor-new
```

```
yarn add @digit-fe/digit-editor-new
```

```
pnpm install @digit-fe/digit-editor-new
```

## 3.初始化

### 3.1 在 umi.js 工程中使用

在 umi(umi3,umi4)工程中，因为底层已经预设了对 less 的支持，所以可直接引用

```
  import Editor from '@digit-fe/digit-editor-new';
```

### 3.2 在 create-react-app 工程中使用

因为 CRA 中没有内置 less，所以得先安装 less 的相关依赖，具体方法如下
步骤 1:

```
npm run eject
```

步骤 2：

```
npm install less less-loader -D
```

步骤 3：
改写 config/webpack.config.js，增加如下代码

```
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
在sassRegex下 增加
{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction ? shouldUseSourceMap: isEnvDevelopment,
    },
    'less-loader'
  ),
  sideEffects: true,
}
```

## 4.使用

具体使用方法参考[具体使用方法](components/editor)


## LICENSE

MIT