Vue + UEditor + v-model 实体绑定.zip

<h1 align="center">vue-ueditor-wrap</h1 > <p align="center">一个“包装”了 UEditor 的 Vue 组件，支持通过 v-model 来绑定富文本编辑器的内容，让 UEditor 的使用简单到像 Input 框一样。</p> <p align="center"> <a href="https://www.npmjs.com/package/vue-ueditor-wrap"><img src="https://img.shields.io/npm/v/vue-ueditor-wrap.svg?style=flat-square" alt="Version"></a> <a href="https://npmcharts.com/compare/vue-ueditor-wrap?minimal=true"><img src="https://img.shields.io/npm/dm/vue-ueditor-wrap.svg?style=flat-square" alt="Downloads"></a> <a href="https://www.jsdelivr.com/package/npm/vue-ueditor-wrap"><img src="https://data.jsdelivr.com/v1/package/npm/vue-ueditor-wrap/badge?style=flat-square" alt="jsdelivr"></a> <a href="https://www.jsdelivr.com/package/npm/vue-ueditor-wrap"><img src="http://img.badgesize.io/https://cdn.jsdelivr.net/npm/vue-ueditor-wrap@latest/lib/vue-ueditor-wrap.min.js?compression=gzip&style=flat-square" alt="size"></a> <a href="https://github.com/HaoChuan9421/vue-ueditor-wrap/issues"><img src="https://img.shields.io/github/issues-closed/haochuan9421/vue-ueditor-wrap.svg?style=flat-square" alt="Issues"></a> <a href="https://github.com/HaoChuan9421/vue-ueditor-wrap/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/vue-ueditor-wrap.svg?style=flat-square" alt="License"></a> </p> <p align="center"> 🔥 <a href="https://hc199421.gitee.io/vue-ueditor-wrap" target="_blank" rel="noopener noreferrer">文档网站（国内）</a> &nbsp; 🌈 <a href="https://haochuan9421.github.io/vue-ueditor-wrap" target="_blank" rel="noopener noreferrer">文档网站（GitHub）</a> &nbsp; 🧭 <a href="https://github.com/HaoChuan9421/vue-ueditor-wrap/tree/2.x" target="_blank" rel="noopener noreferrer">Vue 2 项目请移步此处</a> </p> <img src="https://github.com/HaoChuan9421/vue-ueditor-wrap/raw/master/assets/images/demo.gif" width="400" /> ## Installation ```bash # vue-ueditor-wrap v3 仅支持 Vue 3 npm i vue-ueditor-wrap@3.x # 或者 yarn add vue-ueditor-wrap@3.x ``` > 安装太慢？试试 [URM](https://github.com/HaoChuan9421/urm) ## Quick Start 1. 下载 UEditor | 编码方式\语言 | PHP | NET | JSP | ASP | | ------------- | --------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | | utf8 | [下载](https://cdn.zhenghaochuan.com/p/vue-ueditor-wrap/zip/utf8-php.zip) | [下载](https://cdn.zhenghaochuan.com/p/vue-ueditor-wrap/zip/utf8-net.zip) | [下载](https://cdn.zhenghaochuan.com/p/vue-ueditor-wrap/zip/utf8-jsp.zip) | [下载](https://cdn.zhenghaochuan.com/p/vue-ueditor-wrap/zip/utf8-asp.zip) | | gbk | [下载](https://cdn.zhenghaochuan.com/p/vue-ueditor-wrap/zip/gbk-php.zip) | [下载](https://cdn.zhenghaochuan.com/p/vue-ueditor-wrap/zip/gbk-net.zip) | [下载](https://cdn.zhenghaochuan.com/p/vue-ueditor-wrap/zip/gbk-jsp.zip) | [下载](https://cdn.zhenghaochuan.com/p/vue-ueditor-wrap/zip/gbk-asp.zip) | > UEditor 并不支持通过 npm 的方式来安装，vue-ueditor-wrap 也只是一个 Vue 组件，组件本身并不是 **UEditor 的 Vue 版**。了解 UEditor 基本使用，请参考 [UEditor 官网](http://fex.baidu.com/ueditor/#start-start)。 > 不同语言的 UEditor，前端部分，并无区别，只是包含了对应语言的[服务端](http://fex.baidu.com/ueditor/#server-deploy)示例代码。UEditor 官方并没有提供 Node.js 版的示例代码，有需求的同学可以参考 [此处](https://github.com/HaoChuan9421/ueditor-koa-server)。 将解压的文件夹重命名为 UEditor 并移动到你项目的[静态资源](https://cli.vuejs.org/zh/guide/html-and-static-assets.html#public-文件夹)目录下，比如下面是一个由 Vue CLI（v3+）创建的项目，静态资源目录就是 public。 <img src="https://cdn.zhenghaochuan.com/p/vue-ueditor-wrap/doc/static-dir.png" width="300" /> 2. 注册组件 ```js // main.js import { createApp } from 'vue'; import VueUeditorWrap from 'vue-ueditor-wrap'; import App from './App.vue'; createApp(App).use(VueUeditorWrap).mount('#app'); ``` 3. `v-model`绑定数据 ```html <vue-ueditor-wrap v-model="msg" :config="editorConfig" editor-id="editor-demo-01"></vue-ueditor-wrap> ``` ```js import { ref } from 'vue'; export default { setup() { const msg = ref('<h2>Hello World!</h2>'); return { msg, }; }, created() { // 更多 UEditor 配置，参考 http://fex.baidu.com/ueditor/#start-config this.editorConfig = { // 访问 UEditor 静态资源的根路径，可参考 https://hc199421.gitee.io/vue-ueditor-wrap/#/faq UEDITOR_HOME_URL: '/UEditor/', // 服务端接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！） serverUrl: '//ueditor.zhenghaochuan.com/cos', }; }, }; ``` > 至此你已经可以在页面中看到一个初始化之后的 `UEditor` 了，并且它已经成功和数据绑定了！👏👏👏 ## Props | 参数 | 说明 | 类型 | 默认值 | | --------------------------- | ------------------------------------------------------------------------------------------------- | ------------- | ---------------------------- | | v-model | 当前富文本编辑器内容 | _string_ | | | config | [UEditor 配置](http://fex.baidu.com/ueditor/#start-config) | _object_ | | | editor-id | 富文本编辑器 ID | _string_ | `editor_` + 随机八位小写字母 | | name | 类似 input 框的 name 属性，[常用于表单中](http://fex.baidu.com/ueditor/#start-submit) | _string_ | | | mode | 监听内容变化的方式，可选值为 `observer`, `listener` | _string_ | `observer` | | observer-options | [MutationObserver 的参数 ](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit) | _object_ | 见下方说明 | | observer-debounce-time | MutationObserver 的回调函数防抖间隔 | _number_ | 50 | | forceInit | 跳过环境检测，直接初始化 | _boolean_ | false | | editor-dependencies | 指定使用 UEditor 所需要加载的 JS 和 CSS | _string[]_ | | | editor-dependencies-checker | 检测依赖的静态资源是否加载完成的方法 | _()=>boolean_ | | ### mode 属性说明 v-model 的实现依赖对