docs(README.md): 添加wangEditor整合和添加自定义图片上传的说明
This commit is contained in:
76
README.md
76
README.md
@@ -495,23 +495,41 @@ export default defineComponent({
|
||||
|
||||
```
|
||||
|
||||
|
||||
## SVG图标
|
||||
|
||||
vite-plugin-svg-icons 使用说明:https://github.com/anncwb/vite-plugin-svg-icons/blob/main/README.zh_CN.md
|
||||
[使用手册(详细)](https://github.com/anncwb/vite-plugin-svg-icons/blob/main/README.zh_CN.md)
|
||||
|
||||
**安装**
|
||||
1. 安装
|
||||
|
||||
```
|
||||
npm i -D vite-plugin-svg-icons
|
||||
npm i vite-plugin-svg-icons -D
|
||||
```
|
||||
2. 配置插件
|
||||
|
||||
源码坐标:[vite.config.ts](vite.config.ts)
|
||||
|
||||
```
|
||||
viteSvgIcons({
|
||||
// 指定需要缓存的图标文件夹
|
||||
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
|
||||
// 指定symbolId格式
|
||||
symbolId: 'icon-[dir]-[name]',
|
||||
})
|
||||
```
|
||||
3. 组件封装
|
||||
|
||||
源码坐标:[src/components/SvgIcon/index.vue](src/components/SvgIcon/index.vue)
|
||||
|
||||
|
||||
4. 使用示例
|
||||
|
||||
源码坐标:[src/components/IconSelect/index.vue](src/components/IconSelect/index.vue)
|
||||
|
||||
|
||||
## 跨域处理
|
||||
|
||||
vite.config.ts 跨域配置
|
||||
|
||||
**vite.config.ts**
|
||||
```
|
||||
// 本地反向代理解决浏览器跨域限制
|
||||
server: {
|
||||
@@ -530,12 +548,14 @@ server: {
|
||||
|
||||
## NProgress 进度条
|
||||
|
||||
**安装**
|
||||
1. 安装
|
||||
```
|
||||
npm install --save nprogress
|
||||
```
|
||||
|
||||
**permission.ts**
|
||||
2. 使用案例
|
||||
|
||||
源码坐标:[permission.ts](src/permission.ts)
|
||||
```
|
||||
import NProgress from 'nprogress';
|
||||
import 'nprogress/nprogress.css'
|
||||
@@ -549,21 +569,49 @@ router.beforeEach((to, from, next) => {
|
||||
router.afterEach(() => {
|
||||
NProgress.done()
|
||||
})
|
||||
|
||||
```
|
||||
|
||||
## TinyMCE 富文本编辑器
|
||||
## 富文本编辑器 wangEditor
|
||||
|
||||
**官网:** http://tinymce.ax-z.cn/integrations/integrate-index.php
|
||||
- [官方文档](https://www.wangeditor.com/v5/)
|
||||
|
||||
**安装**
|
||||
- [Vue3 使用](https://www.wangeditor.com/v5/guide/for-frame.html#vue3)
|
||||
|
||||
- [Vue3 示例](https://github.com/wangfupeng1988/vue3-wangeditor-demo)
|
||||
|
||||
1. 安装
|
||||
```
|
||||
npm i -S tinymce
|
||||
# 安装 editor
|
||||
npm install @wangeditor/editor --save
|
||||
|
||||
npm i -S @tinymce/tinymce-vue
|
||||
# 安装 Vue3 组件
|
||||
npm install @wangeditor/editor-for-vue@next --save
|
||||
```
|
||||
|
||||
npm i -D @types/tinymce
|
||||
2. 组件封装
|
||||
|
||||
- 源码坐标:[src/components/WangEditor/index.vue](src/components/WangEditor/index.vue)
|
||||
|
||||
- wangEditor自定义图片上传
|
||||
```aidl
|
||||
const editorConfig = {
|
||||
placeholder: '请输入内容...',
|
||||
MENU_CONF: {
|
||||
uploadImage: {
|
||||
async customUpload(file, insertFn) {
|
||||
uploadFile(file).then(response => {
|
||||
const url = response.data
|
||||
insertFn(url)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
3. 使用示例
|
||||
|
||||
源码坐标:[src/views/pms/goods/components/GoodsInfo.vue](src/views/pms/goods/components/GoodsInfo.vue)
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user