百度的不更新了 还可以选择wangEditor
VUE项目引入使用步骤总结(VUE使用模式):
1、下载压缩包
官方仓库
2、解压到项目static目录中
3、项目控制台输入
npm i vue-ueditor-wrap
4、以以下代码为案例即可使用
<template>
<div class='race-content'>
<vue-ueditor-wrap v-model="write.msg" :config="myConfig" ></vue-ueditor-wrap>
<el-button @click="submit"> 提交 </el-button>
</div>
</template>
<script >
import VueUeditorWrap from 'vue-ueditor-wrap'
export default ({
components: {
VueUeditorWrap
},
props: {
},
data(){
return {
myConfig: {
// 编辑器不自动被内容撑高
autoHeightEnabled: false,
// 初始容器高度
initialFrameHeight: 500,
// 初始容器宽度
initialFrameWidth: '100%',
// 上传文件接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)
serverUrl: '//localhost:9000/ueditor/server',
// UEditor 资源文件的存放路径,如果你使用的是 vue-cli 生成的项目,通常不需要设置该选项,vue-ueditor-wrap 会自动处理常见的情况,如果需要特殊配置,参考下方的常见问题2
UEDITOR_HOME_URL: '/static/ueditor/'
},
write : {
title:'测试Title',
msg:'',
},
}
},
computed: {
},
created (){
},
mounted (){
},
methods: {
submit(){
debugger
this.write;
console.log(this.write);
}
},
watch: {
}
})
</script>
.race-content{
width: 1200px;
margin:0 auto;
background-color: #fff;
}
</style>