<template>
  <div>
    <!--挂载富文本编辑器-->
    <div style="width: 45%;float: left;margin-left: 2%">
      <p>编辑内容</p>
      <div id="editor" style="height: 100%">
      </div>
    </div>
    
    <div style="width: 45%;float: left;margin-left: 2%">
      <p>实时预览</p>
      <div class="w-e-text" id="A" style="border:1px solid gray;height: 600px">
    </div>
    </div>

    <el-button type="primary" style="margin-left: 2%;margin-top: 10px">保存</el-button>

  </div>
</template>

<script>
import E from 'wangeditor'
let editor
function initWangEditor(content){
  setTimeout(()=>{
    if (!editor){
      editor = new E('#editor')
      editor.config.placeholder='请输入内容'
      editor.config.uploadFileName='file'
      editor.config.uploadImgServer='http://localhost:8080/files/wang/upload'

      //实时预览
      editor.config.onchange = function (newHtml) {
        // console.log("change 之后最新的 html", newHtml);
        let div = document.getElementById("A")
        div.innerHTML = newHtml;
      };


      editor.create()
    }
    editor.txt.html(content)
  },0)
}

export  default {
  mounted() {
    initWangEditor("测试内容测试内容测试内容测试内容测试内容测试内容");
  }
}


</script>

<style>
.w-e-text-container{
  height: 520px !important;/*!important是重点，因为原div是行内样式设置的高度300px*/
}
</style>