美文网首页
vue2+vue-ueditor-wrap组件使用记录

vue2+vue-ueditor-wrap组件使用记录

作者: 吴小冷 | 来源:发表于2023-02-08 10:12 被阅读0次

ueditor修改后的包,可直接下载解压使用

pan.baidu.com/s/1s8jdkOeANUUeGOg_yHX3rA?pwd=me3b

1.解压后把 UEditor 文件放到public下

image.png
2.安装vue-ueditor-wrap
npm i vue-ueditor-wrap
3.在main.js中引入并使用
import VueUeditorWrap from 'vue-ueditor-wrap'
createApp(App).use(VueUeditorWrap).mount('#app')

4.直接使用

<vue-ueditor-wrap v-model="contents" :config="myConfig"></vue-ueditor-wrap>
//↑html    ↓js
data() {
    return {
      contents: "你个老六",
      myConfig: {
        //zIndex: 9999,//有层级问题可以设置zIndex
        autoHeightEnabled: false, // 编辑器不自动被内容撑高
        initialFrameHeight: 420, // 初始容器高度
        initialFrameWidth: '100%', // 初始容器宽度
        UEDITOR_HOME_URL: '/UEditor/',
        // 上传文件接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)
        serverUrl: `/api/v1/Upload`//后端配置的上传接口(接口返回配置只需要一个oobj,不需要外层内容)
      }
    }
  },

到这里前端就可以直接使用了
5.如果出现not import language file报错
原因:没有引入语言文件,加入下面引入

<script type="text/javascript" src="../ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../lang/zh-cn/zh-cn.js"></script>

//后端配置请参考原文

blog.csdn.net/lhkuxia/article/details/128882477

相关文章

  • Android 组件化规范

    Android 组件化规范 修订记录 目录 组件设计 组件使用 组件升级 组件设计 设计要求 组件必须支持以app...

  • VUE2 父组件使用子组件变量&调用方法

    年纪大了,随笔记录 有如下子组件: 父组件调用子组件并使用其data中的变量 使用子组件中的title变量 调用子...

  • 组件开发记录

    需求 组件的使用是开发的基础也是重要的能力 分析 记录自己对于各个组件使用的学习 过程

  • Kettle案例一:生成记录结果作为表输入的动态参数

    流程图 生成记录组件配置image.png 生成记录组件结果image.png 使用生成记录的结果作为表输入控件的...

  • form组件使用记录

    form组件的基本构成: form标签属性form:通过该属性调用一些form提供的api,通过this.$for...

  • 自己总结的Angular2组建通信

    组件之间的通信 这里简单的记录自己在angular2中,使用组件通信的一些方法。方便自己以后的使用。 一、组件之间...

  • React各种场景Ref用法

    前言 仅记录不同场景下ref使用,不断补充 解决方案 父组件class,子组件hooks场景 父组件中 子组件 父...

  • 【React】组件

    1. class组件 复杂的组件,需要记录自己内部状态的话,使用class组件,因为function不能有局部变量...

  • 小程序坑点。。持续更新

    这里持续记录更新在开发小程序期间值得记录的要点 组件内注意点 在组件内使用小程序方法注意第二参数 组件内直接修改样...

  • antd的upload组件上传功能踩坑

    在初次使用upload组件上传文件时,出现了几个风格各异的bug,因此做一个记录 错误的起源 使用upload组件...

网友评论

      本文标题:vue2+vue-ueditor-wrap组件使用记录

      本文链接:https://www.haomeiwen.com/subject/ynkqkdtx.html