<!-- in-rich-text 富文本 -->
<template>
    <el-form-item class="c-item" :label="name" :rules="required ? {required: true} : rules ">
        <div class="editor-box">
            <div :id="'editor-' + editorId"></div>
        </div>
        <!-- 备注信息 -->
        <span class="c-remark" v-if="remark">{{remark}}</span>
    </el-form-item>
</template>

<script setup name="in-rich-text">
import sa from '../../sa'
import {getCurrentInstance, onMounted, ref, watch} from "vue";
const { proxy } = getCurrentInstance();
import E from 'wangeditor';

// 形参 
defineProps({
    // 类型
    type: {},
    // 标题 
    name: {},
    // 绑定值 
    modelValue: {},
    // 提示文字 
    placeholder: {},
    // 备注文字
    remark: {}, 
    // 是否禁用 
    disabled: {},
    // 表单校验 
    rules: {},
    required: {
        type: Boolean
    }
});

// 编辑器id 
const editorId = ref(sa.randomString(32));
const editorObj = ref({});

// 创建编辑器
// 创建富文本编辑器
const createEditor = function(content) {
    // var E = window.wangEditor;
    content = content || proxy.modelValue;
    const editor = new E('#editor-' + editorId.value);

    editor.config.menus = [
        'head', 'fontSize', 'fontName', 'italic', 'underline', 'strikeThrough', 'foreColor', 'backColor', 'link', 'list',
        'justify', 'quote', 'emoticon', 'image', 'table', 'code', 'undo', 'redo' // 重复
    ]
    editor.config.debug = true; // debug模式
    // editor.config.uploadFileName = 'file'; // 图片流name
    editor.config.withCredentials = true; // 跨域携带cookie
    editor.config.uploadImgMaxSize = 100 * 1024 * 1024;	// 图片大小最大100M
    // editor.config.uploadImgShowBase64 = true   	// 使用 base64 保存图片
    // 监听内容变动
    editor.config.onchange = function(newHtml) {
        proxy.$emit('update:modelValue', newHtml);
    };
    // 重写上传图片的函数到OSS
    editor.config.customUploadImg = function(files, insert) {
        const file = files[0]; // 文件对象
        sa.startUploadImage(file, function(src) {
            insert(src);
            sa.msg('上传成功');
        });
    }
    editor.create(); // 创建
    editor.txt.html(content);	// 为编辑器赋值
    editorObj.value = editor;
}

// 初始化
onMounted(createEditor);

// 对外开放方法，方便二次修改 
defineExpose({
    setValue: function (value) {
        editorObj.value.txt.html(value);
    }
})

</script>

<style scoped>

</style>
