# 富文本框

<!-- TOC -->

- [Installation](#installation)
- [requires](#requires)
- [Tag](#tag)
- [Attributes](#attributes)
	- [tools](#tools)
	- [placeholder](#placeholder)
	- [read-only](#read-only)
- [Methods](#methods)
- [`resize_imgs`](#resize_imgs)
	- [`set_value`](#set_value)
	- [`get_value`](#get_value)
	- [`get_text`](#get_text)
	- [`enable`](#enable)
	- [`disable`](#disable)
- [Example](#example)
	- [html](#html)
	- [js](#js)

<!-- /TOC -->

<https://dfeidao.gitee.io/widgets/>

## Installation

```sh
yarn add --dev @dfeidao/fd-w000013
```

## requires

本地开发时需要在gulpfile中创建html那一块加入`<script src="https://cdn.jsdelivr.net/npm/katex"></script>`

## Tag

```html
<fd-w000013 tools="image, code-block, formula"></fd-w000013>
```

## Attributes

### tools

指定需要的可选工具，多个工具使用逗号隔开。可选项为:

- image 插入图片
- formula 插入数学公式
- code-block 插入代码块
- align 对齐方式
- header 标题
- bold 黑体
- italic 斜体
- underline 下划线
- list 编号
- script 上标下标
- indent 缩进
- size 字号
- color 字体颜色
- background 背景色
- font 字体
- clean 清除格式
- link 插入超链接
- video 插入视频

### placeholder

当富文本内容为空时,展示的文字

### read-only

是否只读

```html
<!-- 添加了read-only属性, 该富文本框不可以被编辑  -->
<fd-w000013  id="editor" read-only style="height: 500px;">
</fd-w000013>
```

控件可以动态通过修改read-only属性控制控件的只读状态

```ts
// 只读
widget.setAttribute('read-only', 'true');
widget.setAttribute('read-only', '');
widget.setAttribute('read-only', '1');
// 取消只读
widget.removeAttribute('read-only');
widget.setAttribute('read-only', 'false');
```

## Methods

## `resize_imgs`

根据当前图片缩放情况对图片进行处理，图片像素值可能会发生变化。

通俗解释：压缩图片

### `set_value`

参数:
> `html: string`

返回值：
> `html: string`

```ts
widget.set_value('<p>富文本内容</p>');
```

### `get_value`

参数:
> 无

返回值：
> `string`

```ts
const v = widget.get_value();
console.log(v);  // <p>富文本内容</p>
```

### `get_text`

参数:
> 无

返回值：
> `string`

```ts
const v = widget.get_text();
console.log(v);  // 富文本内容
```

### `enable`

参数:
> 无

返回值：
> 无

### `disable`

参数:
> 无

返回值：
> 无

## Example

### html

```html
<fd-w000013 id="editor" tools="image, code-block, formula" style="height: 500px;">
</fd-w000013>
```

### js

```js
require(['fd-w000013']);
```