## 富文本

### 基础用法

富文本使用`wangeditor`作为编辑器，因为该框架包较大，没有默认引入，需要使用时安装：
```javascript
import wangeditor from 'sowrd-ui/packages/plugins/wangeditor'

Vue.use(wangeditor)

如果需要支持上传本地图片(包括粘贴复制的图片)，需要开启本地图片上传的配置，如下所示：

// 获取token
const getToken = () => {
  return 'token...'
}

Vue.use(wangeditor, {
  uploadImgServer: `${portal}/system/file/v1/editor/fileUpload`, // 对应的后台地址
  uploadImgHeaders: {
    Authorization: getToken, // 头部token（注意这里如果getToken方法在初始时就能获取到值则传getToken()，如果初始不能获取到值则只传方法getToken）
  },
  uploadImgHooks: {
    customInsert: function(insertImgFn, result) {
      result.data &&
        result.data.forEach((data) => {
          let src = data.url
          if (src && !src.startsWith('http')) {
            src = `${portal}/system/file/v1/downloadFile?fileId=${src}` // eip7默认返回的图片地址中只有fileId，需要构建完整的加载图片的地址
          }
          insertImgFn(src)
        })
    },
  },
})
```

```html
<template>
  <div>
    <el-radio-group v-model="permission" size="small" style="margin-bottom: 20px">
      <el-radio-button label="n">无权限</el-radio-button>
      <el-radio-button label="r">只读</el-radio-button>
      <el-radio-button label="w">编辑</el-radio-button>
      <el-radio-button label="b">必填</el-radio-button>
    </el-radio-group>
    <br />
    <cl-editor v-model="txt" encode :permission="permission"></cl-editor>
    <div>{{txt}}</div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        permission: 'w',
        txt: 'PHA-5rWL6K-V5paH56ug5rWL6K-V5paH56ug5rWL6K-V5paH56ug5rWL6K-V5paH56ug5rWL6K-V5paH56ug5rWL6K-V5paH56ugPC9wPg'
      }
    },
  }
</script>
<style>
</style>
<!-- editor-1.vue -->
```

### 只读模式

```html
<template>
  <el-form label-width="120px" v-form>
    <cl-form-item label="权限">
      <el-radio-group v-model="permissionVal">
        <el-radio label="n">无权限</el-radio>
        <el-radio label="r">只读</el-radio>
        <el-radio label="w">编辑</el-radio>
        <el-radio label="b">必填</el-radio>
      </el-radio-group>
    </cl-form-item>
    <cl-form-item label="通知（编辑）">
      <cl-editor v-model="editorVal" encode :permission="permissionVal"></cl-editor>
    </cl-form-item>
    <cl-form-item label="供方">
      <cl-input v-model="data.cpzlbznlshb.gyfmc" />
    </cl-form-item>
    <cl-form-item label="通知（只读）">
      <cl-editor
        :permission="permissionVal"
        :text-value="editorVal"
        show-border
        border-color="I2Q0ZDRkNA=="
      ></cl-editor>
    </cl-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        permissionVal: "w",
        editorVal: " ",
        data: {
          cpzlbznlshb: {
            gyfmc: "地球村",
          },
        },
      };
    },
  };
</script>

<!-- editor-2.vue -->
```
