eta_front/src/views/smartReport/components/TextEdit.vue

<template>
    <div class="text-edit-wrap">
        <div style="font-size:16px;margin-bottom:20px">{{$t('ReportManage.ReportList.text_editing')}}</div>
        <froala
			id="froala-editor"
			ref="froalaEditor"
			:tag="'textarea'"
			:config="froalaConfig"
			v-model="html"
		/>
    </div>
</template>

<script>
import VueFroala from 'vue-froala-wysiwyg';
export default {
    name:'TextEdit',
    props:{
        content:''
    },
    data() {
        const that = this;
        return {
            html:this.content||'',
            editor: null,
            lastEditRange: null,
            froalaConfig:{
                imageUploadURL: process.env.VUE_APP_API_ROOT + "/report/uploadImg", //上传url
                videoUploadURL: process.env.VUE_APP_API_ROOT + "/report/uploadImg", //上传url
                fileUploadURL: process.env.VUE_APP_API_ROOT + "/report/uploadImg", //上传url 更多上传介绍 请访问https://www.froala.com/wysiwyg-editor/docs/options
                toolbarButtons: [
                    "textColor",
                    "bold",
                    "italic",
                    "underline",
                    "strikeThrough",
                    "subscript",
                    "superscript",
                    "fontFamily",
                    "fontSize",
                    "color",
                    "inlineClass",
                    "inlineStyle",
                    "paragraphStyle",
                    "lineHeight",
                    "paragraphFormat",
                    "align",
                    "formatOL",
                    "formatUL",
                    "outdent",
                    "indent",
                    "quote",
                    "specialCharacters",
                    "insertHR",
                    "selectAll",
                    "clearFormatting",
                    "html",
                    "undo",
                    "redo",
                ],
                height: 800,
                fontSize: ["12", "13","14","15", "16", "18", "20", "24", "28", "32", "36", "40"],
                fontSizeDefaultSelection: "16",
                theme: "dark", //主题
                placeholderText: localStorage.getItem('i18n') == 'en' ? 'Please input content' : "请输入内容",
                language: localStorage.getItem('i18n') == 'en' ? 'en' : "zh_cn", //国际化
                imageDefaultWidth: false,
                quickInsertEnabled: false,
                toolbarVisibleWithoutSelection: true, //是否开启 不选中模式
                toolbarSticky: false, //操作栏是否自动吸顶
                saveInterval: 0,
                fontFamily:{
                    'Arial,Helvetica,sans-serif': 'Arial',
                    'Georgia,serif': 'Georgia',
                    'Impact,Charcoal,sans-serif': 'Impact',
                    'Tahoma,Geneva,sans-serif': 'Tahoma',
                    'Times New Roman,Times,serif': 'Times New Roman',
                    'Verdana,Geneva,sans-serif': 'Verdana',
                    '思源宋体':'思源宋体',
                    '思源黑体':'思源黑体',
                },
                events: {
                    //this.editor 定义在vue data 中
                    initialized: function () {
                        // this.editor = editor;
                        that.editor = this;
                        // that.editor.html.set(that.value);
                        // that.setHtml()
                    },
                    keyup: function (e, editor) {
                        //添加事件，在每次按键按下时，都记录一下最后停留位置
                        that.$nextTick(function () {
                            that.lastEditRange = getSelection().getRangeAt(0);
                        });
                    },
                    click: function (e, editor) {
                        //添加事件，在每次鼠标点击时，都记录一下最后停留位置
                        that.$nextTick(function () {
                            that.lastEditRange = getSelection().getRangeAt(0);
                        });
                    },
                    //内容改变事件
                    contentChanged: function () {
                        that.lastEditRange = getSelection().getRangeAt(0) || 0;
                        
                        // that.$emit('textChange', that.html)
                        that.sendHtml()
                    },
                },
            }
        }
    },
    methods: {
        sendHtml(){
            const str=this.html.replace(/<p data-f-id=\"pbf\".*?<\/p>/g, "")
            //如果富文本中有未上传完成的图片,去除这个dom
			$('.fr-element').find('img.fr-uploading').length&&$('.fr-element').find('img.fr-uploading').remove()
            this.$emit('textChange', str)
        }
    },
    components:{}
}
</script>

<style lang="scss">
.text-edit-wrap{
    .fr-box.fr-basic{
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        .fr-wrapper{
            flex: 1;
            overflow: auto;
        }
    }
}
</style>
<style lang="scss" scoped>
.text-edit-wrap{
    width:100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    #froala-editor{
        flex:1;
        overflow: auto;
    }
}
</style>