@wangeditor-next/plugin-float-image 0.1.12 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +94 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
# [wangEditor-next](https://cycleccc.github.io/docs/) 图片浮动 插件
|
|
2
|
+
|
|
3
|
+
[English Documentation](./README-en.md)
|
|
4
|
+
|
|
5
|
+
<br/>
|
|
6
|
+
<br/>
|
|
7
|
+
<a href="https://github.com/hqwlkj/wangEditor-plugin-float-image/releases">
|
|
8
|
+
<img src="https://img.shields.io/github/v/release/hqwlkj/wangEditor-plugin-float-image" alt=""/>
|
|
9
|
+
</a>
|
|
10
|
+
<a href="https://www.npmjs.com/package/wangeditor-plugin-float-image">
|
|
11
|
+
<img src="https://img.shields.io/github/downloads/hqwlkj/wangEditor-plugin-float-image/total" alt=""/>
|
|
12
|
+
</a>
|
|
13
|
+
|
|
14
|
+
## 介绍
|
|
15
|
+
|
|
16
|
+
[wangEditor-next](https://cycleccc.github.io/docs/) 图片浮动 插件。
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
## 安装
|
|
22
|
+
|
|
23
|
+
```shell
|
|
24
|
+
yarn add @wangeditor-next/plugin-float-image
|
|
25
|
+
```
|
|
26
|
+
或者
|
|
27
|
+
|
|
28
|
+
```shell
|
|
29
|
+
npm i @wangeditor-next/plugin-float-image
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## 使用
|
|
33
|
+
|
|
34
|
+
### 注册到编辑器
|
|
35
|
+
|
|
36
|
+
```js
|
|
37
|
+
import { Boot } from '@wangeditor-next/editor'
|
|
38
|
+
import floatImageModule from 'wangeditor-plugin-float-image'
|
|
39
|
+
|
|
40
|
+
// 注册。要在创建编辑器之前注册，且只能注册一次，不可重复注册。
|
|
41
|
+
Boot.registerModule(floatImageModule)
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### 配置
|
|
45
|
+
|
|
46
|
+
编辑器配置
|
|
47
|
+
|
|
48
|
+
```ts
|
|
49
|
+
import { IEditorConfig } from '@wangeditor-next/editor'
|
|
50
|
+
|
|
51
|
+
const editorConfig: Partial<IEditorConfig> = {
|
|
52
|
+
hoverbarKeys: {
|
|
53
|
+
// 在编辑器中，选中链接文本时，要弹出的菜单
|
|
54
|
+
link: {
|
|
55
|
+
menuKeys: [ // 默认的配置可以通过 `editor.getConfig().hoverbarKeys.image` 获取
|
|
56
|
+
'imageWidth30',
|
|
57
|
+
'imageWidth50',
|
|
58
|
+
'imageWidth100',
|
|
59
|
+
'|', // 分割符
|
|
60
|
+
'imageFloatNone', // 增加 '图片浮动' 菜单
|
|
61
|
+
'imageFloatLeft',
|
|
62
|
+
'imageFloatRight',
|
|
63
|
+
'|', // 分割符
|
|
64
|
+
'editImage',
|
|
65
|
+
'viewImageLink',
|
|
66
|
+
'deleteImage',
|
|
67
|
+
],
|
|
68
|
+
},
|
|
69
|
+
},
|
|
70
|
+
|
|
71
|
+
// 其他配置...
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
然后创建编辑器和工具栏，会用到 `editorConfig` 。具体查看 wangEditor 文档。
|
|
76
|
+
|
|
77
|
+
### 显示 HTML
|
|
78
|
+
|
|
79
|
+
一个 float-image 节点产出的 HTML 格式如下
|
|
80
|
+
|
|
81
|
+
```html
|
|
82
|
+
<div class="w-e-image-container" style="width: 30%;">
|
|
83
|
+
<img src="https://news-bos.cdn.bcebos.com/mvideo/log-news.png" style="width: 100%; float: right">
|
|
84
|
+
</div>
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
## 其他
|
|
88
|
+
|
|
89
|
+
支持 i18n 多语言
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
## 许可证
|
|
93
|
+
|
|
94
|
+
[MIT](https://github.com/hqwlkj/wangEditor-plugin-float-image/blob/master/LICENSE)
|