wangEditor富文本编辑器的使用（二）——实例

wangEditor富文本编辑器的使用（二）——实例

wangEditor-Typescript 开发的 Web 富文本编辑器。

1、效果

2、使用步骤

1、安包

npm i wangeditor --save

package.json中

"dependencies": {
     
    "wangeditor": "^4.5.3",
}

2、index.vue页面

结构

1.1、页面显示

 
<div
     class="mt-16 pl-24 pr-24"
     style="display: inline-block; font-size: 14px"
     v-html="reportForm.content"
     >div>

1.2、富文本模块

<div>
    <span>内容 ：span>  
    <div ref="div1" class="contentDiv1">div>
div>

1.3、逻辑

<script lang='ts'>
import E from "wangeditor";
import {
      computed, defineComponent, reactive,onMounted, toRefs, watch } from 'vue';
import {
      useRoute, useRouter } from 'vue-router';
export default defineComponent({
     
    name: 'index',
    setup(props, context) {
     
        const router = useRouter();
        const route = useRoute();
        // 当前页面数据
        const state = reactive({
     
             div1: null,
             reportForm: {
     
                content: '',
             },
        });
        // 请求数据
   		onMounted(() => {
     
           	 const editor = new E(state.div1);
             editor.config.onchange = function(html) {
     
                // 第二步，监控变化，同步更新到 textarea
                state.reportForm.content = html;
             };
            editor.create();
   		});
        // 生命周期
        return {
     
            ...toRefs(state),
        };
    },
});
</script>

样式

显示

附

<el-form
         ref="form"
         :model="reportForm"
         :rules="rules"
         class="pt-24 pl-24 pr-24 mb-24"
         label-width="80px"
         labelPosition="right"
         style="margin-bottom:80px !important"
         >
          
            <el-form-item label="内容" prop="content">
                <div ref="div1" class="contentDiv1">div>
            el-form-item>
el-form>

ts

setup(props, context) {
     
    const router = useRouter();
    const route = useRoute();
    const store = useStore();
    // 当前页面数据
    const state = reactive({
     
        reportForm: {
     
            content: '',
        },   
        rules: {
     
            content: [
                {
     
                    required: true,
                    message: '该项为必填项',
                    trigger: 'blur'
                }
            ], 
        }
    }
}