wangEditor在Vue3中的使用

安装

npm i wangeditor

使用

<script setup>
import { ElFormItem } from 'element-plus';
import { reactive, toRefs, ref, onBeforeUnmount, onMounted, nextTick } from 'vue';
import WangEditor from 'wangeditor';

const props = defineProps({
  echoValue: {
    type: Object,
  },
});
const { echoValue } = toRefs(props);
const emit = defineEmits(['handleEditorInfo', 'handleFormRefClear']);

let instance;

const editor = ref(null);
const TiLength = ref(0);

const content = reactive({
  html: '',
  text: '',
});

onMounted(() => {
  nextTick(() => {
    setTimeout(() => {
      wangEditor_box();

      if (Object.keys(echoValue.value).length) {
        instance.txt.html('');
        instance.txt.html(echoValue.value.content);
      }
    }, 0);
  });
});

// 判断富文本编辑器输入是否为空或回车
const getText = (str) => {
  return str
    .replace(/<[^
]+>/g, '') // 将所有
标签 replace ''
    .replace(/<[
$]+>/g, '') // 将所有
标签 replace ''
    .replace(/ /gi, '') // 将所有 空格 replace ''
    .replace(/<[^
]+>/g, ''); // 将所有 换行符 replace ''
};

const isNull = (str) => {
  if (str == '') return true;

  var regu = '^[ ]+$';
  var re = new RegExp(regu);

  return re.test(str);
};

const wangEditor_box = () => {
  instance = new WangEditor(editor.value);
  // 隐藏“网络图片”tab
  // instance.config.showLinkImg = false;
  // instance.config.uploadImgShowBase64 = true;
  instance.config.menus = [
    'head', //标题
    'bold', //字体加粗
    'fontSize', //字号
    'fontName', //字体
    'italic', //斜体
    'underline', //下划线
    'strikeThrough', //删除线
    'indent',
    'lineHeight',
    'foreColor', //字体颜色
    'backColor', //背景颜色
    // "link", //插入链接
    'list', //列表
    // 'todo',//代办事项
    'justify', //对齐方式
    // 'quote',// 引用
    // "emoticon", //表情
    // 'image', //插入图片
    // 'video',//插入视频
    // 'table',//插入表格
    // "code", //插入代码
    // 'splitLine',
    'undo', //撤销
    'redo', //恢复
  ];

  Object.assign(instance.config, {
    onchange() {
      var reg = /<[^<>]+>/g; //去标签
      var value = instance.txt.html().replace(reg, '');

      value = value.replace(/ /gi, '');
      TiLength.value = value.length;

      let text = getText(value);

      if (!isNull(text)) {
        if (TiLength.value < 10000000 || TiLength.value == 10000000) {
          content.html = instance.txt.html();

          emit('handleEditorInfo', content.html);
        } else {
          nextTick(() => {
            instance.txt.html(content.html);
          });

          return false;
        }
      } else {
        emit('handleEditorInfo', '');
      }

      emit('handleFormRefClear', true);
    },
  });

  instance.create();
};

onBeforeUnmount(() => {
  instance.destroy();
  instance = null;
});
</script>
<template>
  <div class="editor_box_style">
    <ElFormItem label="文件内容" class="remark" prop="content">
      <div ref="editor" class="editor_style" />
    </ElFormItem>
    <div>
      <span class="wordNumber">{{ TiLength }}/10000000</span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.editor_box_style {
  position: relative;
  .wordNumber {
    color: #909399;
    background: #fff;
    text-align: right;
    z-index: 99999;
    right: 20px;
    bottom: 10px;
    font-size: 12px;
    position: absolute;
  }

  .editor_style {
    width: 660px;
  }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155