vue中使用wangEditor,并将数据传递到后台

下载wangEditor

cnpm i wangeditor --save  

首先我是讲他定义为一个子组件组件到别的父组件中使用

子组件中引入 import Editor from "wangeditor"

下面是子组件代码

<template>
    <div class="wrap">
        <div id="editor" class="editor"></div>
    </div>
</template>

<script>
    import Editor from "wangeditor"
    export default{
        name:"WangEditor",
        data(){
            return{
                editor:"",
        info_:null
            }
        },
    model:{
      prop:"value",
      event:"change"
    },
    watch:{
      isClear(val){
        if(val){
          this.editor.txt.clear()
          this.info_=null
        }
      },
      value(val){
        this.editor.txt.html(val)
      }
    },
    props: {
      isClear: {
        type: Boolean,
        default: false
      },
      value:{
        type:String,
        default:""
      }
    },
        methods:{
         　　get(){
       　　 　　this.editor=new Editor("#editor");
       　　　　 this.editor.customConfig.uploadImgShowBase64=true;
       　　　　 this.editor.customConfig.showLinkImg=false;
        　　　　this.editor.customConfig.onchange=(html)=>{
          　　 　　this.info_=html
         　　　　　　 console.log(html)
          　　　　this.$emit("change",this.info_)
        　　　　}
       　　　　 this.editor.create();
            }
        },
        mounted() {
      　　　this.get();
        }
    }
</script>

<style>
</style>

父组件中使用

<template>
    <div class="editor">
        <div class="top">
            <p>
                <span class="iconfont icon-zuojiantou"></span> &nbsp;&nbsp;&nbsp;
                <span>添加文章</span>
            </p>
        </div>
        <form  class="content-area">
            <table>
                <tr class="item">
                    <td>文章标题</td>
                    <td class="set-width"><input type="text" name="title" id="title"></td>
                </tr>
                <tr>
                    <td>文章内容</td>
                    <td class="set-width"><WangEditor v-model="wangContent" class="set-wang" :isClear="isClear" @change="change"></WangEditor></td>
                </tr>
                <tr>
                    <td>文章标签</td>
                    <td class="set-width"><input type="text" name="tag" id="tag"></td>
                </tr>
                <tr>
                    <td>发布时间</td>
                    <td>{{new Date().toLocaleDateString().split("/").join("-")}}</td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align: center;"><input type="button" value="添加文章"  @click="add"/></td>
                </tr>
            </table>
        </form>

    </div>
</template>

<script>
    import WangEditor from "../components/wangEditor.vue"
    export default{
        name:"Add",
        components:{
            WangEditor
        },
    data(){
      return{
        wangContent:"",
        isClear:false
      }
    },
    methods:{
      change(data){
        this.wangContent=data
        console.log(data)
      },
      add(){
        let title=$.trim($("#title").val());
        let tag=$.trim($("#tag").val());
        if(title.length<1){
          alert("请输入文章标题");
          return;
        }
        if(tag.length<1){
          alert("请输入文章标签")
          return;
        }
        if(this.wangContent==="<p><br></p>"){
          alert("请输入文章内容")
          this.isClear=true;
          return
        }
        let content=this.wangContent;
        console.log(this.wangContent)
        if(this.wangContent.length<1){
          alert("请输入文章内容")
          return;
        }
        let now_date=new Date();
        let like=parseInt(0)
        let nickname=JSON.parse(localStorage.userInfo).nickname;
        let id=JSON.parse(localStorage.userInfo).id
        $.ajax({
          url:"http://localhost:3000/addAticle",
          type:"POST",
          data:{
            userId:id,
            title:title,
            content:content,
            nickname:nickname,
            like:like,
            tag:tag
          },
          success:res=>{
            if(res.code==200){
              alert(res.msg)
              this.$router.push({
                path:"/userIndex"
              })
            }
          },
          error:err=>{
            console.log(err)
          }
        })
      }
    }
    }
</script>

<style scoped="scoped">
    .top{
        width: 100%;
        position: fixed;
        top: 0px;
        color: white;
        padding-left: 20px;
        z-index: 99999;
        background-color: #A5D1ED;
    }
    .content-area{
        margin-top:80px;
        display: flex;
        /* align-items: center; */
        justify-content: center;
    }
    .content-area table tr{
        height: 60px;
    }
    .set-width input{
        width: 100%;
    }
    .set-wang{
        width: 100%;
    }
    .item{
        padding-bottom: 20px;
    }
    input[type="submit"]{
        width: 100px;
        height: 30px;
        border: 0px;
        background-color:  #00B7FF;
        border-radius: 8px;
        color: white;
        outline: none;
        /* padding: 2px 18px; */
    }
</style>

express代码片段

// 添加文章
app.post("/addAticle",(req,res)=>{
    let title=req.body.title;
    let content=req.body.content;
    let create_time=new Date();
    let love=req.body.like;
    let tag=req.body.tag
    let userId=req.body.userId;
    console.log(userId)
    let nickname=req.body.nickname;
    let sql="insert into article (userId,title,content,create_time,love,tag,nickname) values (?,?,?,?,?,?,?)";
    let sqlArr=[userId,title,content,create_time,love,tag,nickname]
    let callBack=(err,data)=>{
        if(err){
            console.log(err)
            return
        }
        console.log(data)
        if(data.affectedRows==1){
            res.send({
                msg:"添加文章成功",
                code:200
            })
        }
    }
    db.dbConn(sql,sqlArr,callBack)
})