赞
踩
一、Vue 中UEditor
2.0版本跟3.0版本不兼容
重点安装版本不同
使用详细介绍:
vue-ueditor-wrap - Vue + UEditor + v-model双向绑定
二、安装流程
1.安装
- # vue-ueditor-wrap v3 仅支持 Vue 3
- npm i vue-ueditor-wrap@3.x -S
- # or
- yarn add vue-ueditor-wrap@3.x
2.全局引入 ,注册组件
- // 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 绑定属性
<vue-ueditor-wrap v-model="msg" :config="editorConfig" editor-id="editor-demo-01"></vue-ueditor-wrap>
- 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_HOME_URL: '/UEditor/', // 访问 UEditor 静态资源的根路径,可参考常见问题1
- serverUrl: '//ueditor.zhenghaochuan.com/cos', // 服务端接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)
- };
- },
- };
更多:
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。