富文本Ueditor

官方Wiki
中文文档
配置项手册
各路大神
添加链接描述

百度的不更新了 还可以选择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>