欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue前后端分离项目如何模块的使用Ueditor百度富文本框

程序员文章站 2022-03-12 21:21:28
Ueditor作为富文本框虽然已经停更较久了,但依然是一种功能非常强大的富文本框,可以随意添加视频、图片等Vue作为目前前后端分离项目中比较热门的技术,如何去兼容Vue并且正确的使用他,是一个资料较少的问题,目前其他资料中多半为给出的Demo,这里讲解一下项目模块化的用法所以,今天来写一下,关于Vue前端如何兼容Ueditor并且模块化使用的内容首先,https://github.com/fex-team/ueditor可以在这里进行下载,当然也可以和我一样,手动加入,选择Jsp模......

 

 

Ueditor作为富文本框虽然已经停更较久了,但依然是一种功能非常强大的富文本框,可以随意添加视频、图片等

Vue作为目前前后端分离项目中比较热门的技术,如何去兼容Vue并且正确的使用他,是一个资料较少的问题,目前其他资料中多半为给出的Demo,这里讲解一下项目模块化的用法

所以,今天来写一下,关于Vue前端如何兼容Ueditor并且模块化使用的内容

首先,https://github.com/fex-team/ueditor 可以在这里进行下载,当然也可以和我一样,手动加入,选择Jsp模块下载,目录如下

Vue前后端分离项目如何模块的使用Ueditor百度富文本框

 

此处不多赘述,网上资料有很多

 

下面为重点,为了工程化开发,建议在utils中进行配置全局变量,当然也可以随用随配置

Vue前后端分离项目如何模块的使用Ueditor百度富文本框Vue前后端分离项目如何模块的使用Ueditor百度富文本框

 

 

配置之后我们秉承一个模块化思想,将富文本框做成一个模块,这样使用时就可以直接引入Vue前后端分离项目如何模块的使用Ueditor百度富文本框

 

 

UE.vue的内容如下,UE_STATTIC_PATH,UE_SERVER_URL即为上面我们定义的两个接口

<template>
  <vue-ueditor-wrap
    v-model="content"
    :config="myConfig"
    style="max-width: 1200px; margin: 0 auto"
    >{{ content }}</vue-ueditor-wrap
  >
</template>

<script>
import VueUeditorWrap from "vue-ueditor-wrap";
import { UE_STATIC_PATH,UE_SERVER_URL } from "@/utils/global";
export default {
  components: { VueUeditorWrap },
  data() {
    return {
      content: "",
      myConfig: {
        // 接口位置
        serverUrl: UE_SERVER_URL,
        // 你的UEditor资源存放的路径,相对于打包后的index.html
        UEDITOR_HOME_URL: UE_STATIC_PATH,
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 工具栏是否可以浮动
        autoFloatEnabled: false,
        // 初始容器高度
        initialFrameHeight: 340,
        // 初始容器宽度
        initialFrameWidth: "100%",
        // 关闭自动保存
        enableAutoSave: true,
      },
    };
  },
};
</script>

<style scoped>
</style>

模块做好了,那么我们应该如何去引用到界面中。

其实很简单Vue前后端分离项目如何模块的使用Ueditor百度富文本框,仅仅一行代码而已,这也就是Vue所一直强调的代码模块化,工程化。当然,这也编译器是不会识别“UE”这个字符串的

 

 

还需要我们引入一下Vue前后端分离项目如何模块的使用Ueditor百度富文本框

 

完成,刷新一下界面就可以看到富文本的内容了,然而有的小伙伴有这样一个问题,通过引入的方式,这样如何去访问到UE.vue中的content,也就是我们双向绑定的内容呢

 

 

             其实也很简单Vue前后端分离项目如何模块的使用Ueditor百度富文本框

             直接调用父类即可。如此我们的富文本就可以在前端正式完成,后端配置部分我们下次再讲。

 

 

 

本文地址:https://blog.csdn.net/qq_42657972/article/details/112567150

相关标签: vue