vue3+uniapp的H5端集成百度ueditor

升c

于 2024-07-11 11:33:42 发布

阅读量271

点赞数 2

文章标签： uni-app vue

本文链接：https://blog.csdn.net/qq_67503478/article/details/140347214

版权

试了一天怎么都不行，卡一天，今天终于集成上去了，做个记录分享一下。最后参考
1、https://github.com/HaoChuan9421/vue-ueditor-wrap#readme

2、https://github.com/fex-team/ueditor
完成了集成。

总结：
1、npm引入

# vue-ueditor-wrap v3 仅支持 Vue 3
npm i vue-ueditor-wrap@3.x
# 或者
yarn add vue-ueditor-wrap@3.x

2、解压资源包放到静态目录下面(上面第一个链接里面有下载链接，这里我不放了，不会)

3、main.js入口文件引入

import App from './App'
import {
  createPinia
} from 'pinia'
import VueUeditorWrap from 'vue-ueditor-wrap'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import pinia from './common/data_templates/pinia.js'
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false

App.mpType = 'app'
const app = new Vue({
  ...App
})
app.use(VueUeditorWrap)
app.$mount()
// #endif

// #ifdef VUE3
import {
  createSSRApp
} from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  app.use(VueUeditorWrap)
  app.use(pinia)
  return {
    app
  }
}
// #endif

4、在index.html预加载script文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script>
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
        CSS.supports('top: constant(a)'))
      document.write(
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
    </script>
    <!--preload-links-->
    <!--app-context-->
    <!-- 加载编辑器源码文件 -->
    <script type="text/javascript" src="/static/utf8-jsp/ueditor.all.js"></script>
    <!-- 加载配置文件 -->
    <script type="text/javascript" src="/static/utf8-jsp/ueditor.config.js"></script>
    <title></title>
  </head>
  <body>
    <div id="app"><!--app-html-->
    </div>
    <script type="module" src="/main.js"></script>
    <script type="text/javascript">
      var ue
    </script>
    <style>
      #app {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </body>
</html>

5、组件中使用，注意一定要配置静态资源路径，路径不要写错了

<template>
  <view id="content">
    <vue-ueditor-wrap style="height: 50vh;width: 85vw;" @ready="editorReady" v-model="msg" :config="editorConfig"
      class="editor" id="editor" editor-id="editor" :initialFrameWidth="800" :initialFrameHeight="800"
      :editorDependencies="['ueditor.config.js','ueditor.all.js']" />
    <view class="func">
      <func_area></func_area>
    </view>
  </view>
</template>

<script setup>
  import {
    nextTick,
    onMounted,
    ref
  } from 'vue'
  import func_area from './func_area.vue'

  const msg = ref('<h2>Hello World!</h2>')
  const editorConfig = ref({
    UEDITOR_HOME_URL: '/static/utf8-jsp/' //静态资源文件夹
  })

  const editorReady = (editorInstance) => {
    console.log('UEditor is ready:', editorInstance, UE)

  }

  onMounted(() => {
    nextTick(() => {
      if (UE) {
        let s = UE.getUEBasePath()
      }
    })
  })
</script>

<style scoped>
  @import url('../../static/css/common.css');

  #content {
    width: 85vw;
    height: 80vh;

    .editor {
      height: 50vh;
      border-bottom: 1px solid red;
      width: 85vw;
      overflow: hidden;
    }

    .func {
      height: 30vh;
      width: 85vw;
    }
  }
</style>

6、如果编译后没出来，可以尝试重启hbuild

7、最后效果图