<template>
    <div>
        <!-- <div>
            <button @click="printEditorHtml">print html</button>
            <button @click="insertTextHandler">insert text</button>
            <button @click="disableHandler">disable</button>
        </div> -->
        <div style="border: 1px solid #ccc; margin-top: 10px;">
            <!-- 工具栏 -->
            <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editor"
                :defaultConfig="toolbarConfig"
            />
            <!-- 编辑器 -->
            <Editor
                style="height: 600px; overflow-y: hidden;"
                :defaultConfig="editorConfig"
                v-model="html"
                @onChange="onChange"
                @onCreated="onCreated"
            />
        </div>
        <!-- <div style="margin-top: 10px;">
            <textarea
                v-model="html"
                readonly
                style="width: 100%; height: 200px; outline: none;"
            ></textarea>
        </div> -->
    </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'
export default {
    name: 'MyEditor',
    components: { Editor, Toolbar },
    props: {
      value: {
        type: String,
        default: "",
      },
    },
    model: {
      prop: "value",
      event: "change",
    },
    data() {
        return {
            editor: null,
            html: '',
            uploadUrl: this.$server + '/article/uploadImage',
            toolbarConfig: {
                // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
                // excludeKeys: [ /* 隐藏哪些菜单 */ ],
            },
            editorConfig: {
                placeholder: '请输入内容...',
                // autoFocus: false,

                // 所有的菜单配置，都要在 MENU_CONF 属性下
                MENU_CONF: {
                  uploadImage:{
                      server:  this.$server + '/article/uploadImage',
                      // form-data fieldName ，默认值 'wangeditor-uploaded-image'
                      fieldName: 'file',
                      // 单个文件的最大体积限制，默认为 2M
                      maxFileSize: 5 * 1024 * 1024, // 1M

                      // 最多可上传几个文件，默认为 100
                      maxNumberOfFiles: 20,

                      // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
                      allowedFileTypes: ['image/*'],

                      // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
                      meta: {
                          token: sessionStorage.getItem('token') // 设置请求头
                      },

                      // 将 meta 拼接到 url 参数中，默认 false
                      metaWithUrl: false,

                      // 自定义增加 http  header
                      // headers: {
                      //     Accept: 'text/x-json',
                      //     otherKey: 'xxx'
                      // },

                      // 跨域是否传递 cookie ，默认为 false
                      withCredentials: true,

                      // 超时时间，默认为 10 秒
                      timeout: 5 * 1000, // 5 秒
                      customInsert: function (result,insertImg) {
                      // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                      // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
                      // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                      console.log('insertImg',arguments)
                      var url =result.msg;
                      insertImg(url);
                  }
                  }
                }
            }
        }
    },
    watch: {
      value: {
        handler(value, oldName) {
          console.log('editor',value, oldName)
          if (value !== oldName) {
              this.html = value
          }
        },
        immediate: true,
        deep:true,
      },
      // value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
        },
        onChange(editor) {
            this.$emit("change", editor.getHtml()); // 将内容同步到父组件中
        },
        insertTextHandler() {
            const editor = this.editor
            if (editor == null) return
            editor.insertText(' hello ')
        },
        printEditorHtml() {
            const editor = this.editor
            if (editor == null) return
            console.log(editor.getHtml())
        },
        disableHandler() {
            const editor = this.editor
            if (editor == null) return
            editor.disable()
        },
        intnt(){
          console.log('editor滞空')
          // const editor = this.editor
          // if (editor == null) return
          // editor.setHtml = '请输入内容...'
        }
    },
    mounted() {
        // 模拟 ajax 请求，异步渲染编辑器
        // setTimeout(() => {
        //     this.html = '<p>Ajax 异步设置内容 HTML</p>'
        // }, 1500)
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
    },
}
</script>
<style lang="css">
.w-e-bar-item button .title{
  line-height: 50px;
}
</style>
<style src="@wangeditor/editor/dist/css/style.css"></style>

