vue3 中使用百度Ueditor - 富文本编辑器

1.引入vue-ueditor-wrap(本人目前使用的版本为@3.0.3)

github: github.com/fex-team/ue…

2.项目tag中 选择版本 选择utf8-jsp压缩包 打开后

将Ueditor文件夹拷贝到vue项目的static文件夹中，此文件夹为项目的静态服务文件夹

3.安装 vue-ueditor-wrap

npm i vue-ueditor-wrap

4.在main中

import VueUeditorWrap from 'vue-ueditor-wrap'

app .use(VueUeditorWrap)

5.在组件中

<template>
    <vue-ueditor-wrap
      class="new-edit"
      v-model="msg"
      :config="editorConfig"
    ></vue-ueditor-wrap>
</template>

<script lang="ts" setup>
const msg = ref('')

//富文本配置
const editorConfig = {
  initialFrameWidth: null,//设置null则宽度自适应
  initialFrameHeight: 320,//区域内容高度
  catchRemoteImageEnable: false, //抓取远程图片是否开启,默认true
  autoHeightEnabled: false, //固定高度且带滚动条
  autoSyncData: false,
  autoFloatEnabled: true,
  UEDITOR_HOME_URL: 'http://192.168.10.170/1-4-3/',
  toolbars: [ //根据需求筛选需要的功能，这里是根据需求筛选后的
    [
      '|',
      'source',
      'bold',
      'italic',
      'underline',
      'fontborder',
      'strikethrough',
      'superscript',
      'subscript',
      'forecolor',
      'backcolor',
      'pasteplain',
      '|',
      'insertorderedlist',
      'insertunorderedlist',
      'fontfamily',
      'fontsize',
      'paragraph',
      'indent',
      'justifyleft',
      'justifycenter',
      'justifyright',
      'justifyjustify',
      'inserttable',
      'touppercase',
      'tolowercase',
      'imagenone',
      'imageleft',
      'imageright',
      'imagecenter',
      'horizontal',
      'undo',
      'redo',
    ],
  ],
}
</script>