<template>
    <div ref="methodsWay" id="methodsWay"></div>
</template>

<script>
import E from 'wangeditor'
var phoneEditor, _this
export default {
  components: {},
  props: {
    methodsWayVal: {
      type: String,
      required: false
    },
       writeable:{
      type:Boolean,
      value:true
    }
  },
  data () {
    return {}
  },
  created () {},
  mounted () {
    _this = this
      _this.methodsWayVal=_this.methodsWayVal
    phoneEditor = new E(this.$refs.methodsWay)
    phoneEditor.customConfig.pasteFilterStyle = false
    phoneEditor.customConfig.onchange = html => {
      _this.$emit('methodsWay', html)
    }
    phoneEditor.customConfig.menus = [
      'head', // 标题
      'bold', // 粗体
      'fontSize', // 字号
      'fontName', // 字体
      'italic', // 斜体
      'underline', // 下划线
      'strikeThrough', // 删除线
      'foreColor', // 文字颜色
      'backColor', // 背景颜色
      // 'link', // 插入链接
      // 'list', // 列表
      'justify', // 对齐方式
      // 'quote', // 引用
      // 'emoticon', // 表情
      // 'image', // 插入图片
      'table', // 表格
      // 'video', // 插入视频
      // 'code', // 插入代码
      'undo', // 撤销
      'redo' // 重复
    ]
    phoneEditor.create()
       phoneEditor.txt.html(_this.methodsWayVal)
       phoneEditor.$textElem.attr('contenteditable', this.writeable)
  },
  methods: {},
  computed: {},
  watch: {
    methodsWayVal (val) {
      phoneEditor.txt.html(val)
    }
  }
}
</script>

<style lang="scss" scoped>
#methodsWay {
  width: 100%;
  height: 250px;
  font-family:'宋体' !important;
}
</style>
