vue2js项目集成百度UEditor 路径问题

发布于 2022-09-07 04:07:28 字数 2391 浏览 50 评论 0

最近公司的一个vue2的项目需要用到百度UEditor富文本编辑器。在集成进来的过程中遇到点路径问题,资源目录没法访问,项目目录截图

clipboard.png

模板和资源文件目录

clipboard.png
//组件百度编辑器

<template>
  <div ref="editor"></div>
</template>

<script>
  /* eslint-disable */
  import '../../assets/ueditor/ueditor.config';
  import '../../assets/ueditor/ueditor.all';
  import '../../assets/ueditor/lang/zh-cn/zh-cn';


  export default {
    name:"ueditor",
    data() {
      return {
        id: Math.random().toString(16).substring(2) + 'ueditorId',
      };
    },
    props: {
      value: {
        type: String,
        default: null,
      },
      config: {
        type: Object,
        default: {},
      }
    },
    watch: {
      value: function value(val, oldVal) {
        this.editor = UE.getEditor(this.id, this.config);
        if (val !== null) {
          this.editor.setContent(val);
        }
      },
    },
    mounted() {
      this.$nextTick(function f1() {
        // 保证 this.$el 已经插入文档

        this.$refs.editor.id = this.id;
        this.editor = UE.getEditor(this.id, this.config);

        this.editor.ready(function f2() {
          this.editor.setContent(this.value);

          this.editor.addListener("contentChange", function () {
            const wordCount = this.editor.getContentLength(true);
            const content = this.editor.getContent();
            const plainTxt = this.editor.getPlainTxt();
            this.$emit('input', { wordCount: wordCount, content: content, plainTxt: plainTxt });
          }.bind(this));

          this.$emit('ready', this.editor);
        }.bind(this));
      });
    },
  };
</script>

<style>
    body{
        background-color:#ff0000;
    }
</style>

//注册全局组件名称

clipboard.png

//引用组件

clipboard.png

//结果就报错了

clipboard.png

本地的资源目录 全部无法访问,我也修改了配置文件

clipboard.png

请问下vue的大神们有用过这个么 有遇到过相似问题么?希望大神们 指点下 感激不尽

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(10

帥小哥 2022-09-14 04:07:28

应该还是你路径问题吧 他是从项目根目录开始 我是放在static下的
去掉appAdmin 然后下面就是引进对应其他静态资源 应该就好办了
图片描述

只有影子陪我不离不弃 2022-09-14 04:07:28

我在github上搜到这样一个vue组件,不知对你有没有用。https://github.com/yiwuyu/vue-ueditor

未蓝澄海的烟 2022-09-14 04:07:28

你好,你这个解决了吗?我也碰到这个问题了。

高跟鞋的旋律 2022-09-14 04:07:28

最近也碰到了这个问题,在路径上面尝试了各种方式的写法,都还是报这个错误。难道时集成方式不对?现在很怀疑这个

深海里的那抹蓝 2022-09-14 04:07:28

我老铁你的问题解决了么,我也遇到这个东西,看了好多资料各种办法都想过了

白首有我共你 2022-09-14 04:07:28

我也出现这个问题,最后是发现webpack配置出错。有同样问题的同学,可以改一下webpack的配置。
图片描述
图片描述

眼泪也成诗 2022-09-14 04:07:28

ueditor.config.js文件路径改一下,var URL = window.UEDITOR_HOME_URL || "/static/xxx/";

独留℉清风醉 2022-09-14 04:07:28

被二次打包,放static下

没︽人懂的悲伤 2022-09-14 04:07:28

我因为遇到这个坑 请问博主解决了吗

痴情换悲伤 2022-09-14 04:07:28

请问最后是如何解决这个路径引用问题的,目前也是遇到这个问题,感觉比较头痛,弄了好久没有结果!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文