如何在vue项目中使用UEditor--plus

 更新时间:2022年08月24日 09:24:54   作者:龙儿哥哥的博客  
UEditor是由百度web前端研发部开发的所见即所得的开源富文本编辑器,这篇文章主要介绍了如何在vue项目中使用UEditor--plus ,需要的朋友可以参考下

1:UEditor-plus富文本编辑器如何在vue项目中使用

备注:UEditor是由百度web前端研发部开发的所见即所得的开源富文本编辑器,由于该项目不在维护;程序员自发对其进行了维护,详见

https://gitee.com/modstart-lib/ueditor-plus?_from=gitee_search;

2.使用方法

第一步:在git上拉取ueditor代码到本地

第二步:解压后找到dist文件夹,复制并粘贴到vue项目包中的static(vue3粘贴到public)文件夹目录下,并改名为UEditor

第三步:在页面中引入UEditorPlus富文本编辑器

第四步:在页面中插入组件

<div class="content">
    <vue-ueditor-wrap
        v-model="content"
        editor-id="editor"
        :config="editorConfig"
        :editorDependencies="['ueditor.config.js','ueditor.all.js']"
        style="height:500px;" />
</div>

第五步:配置项

data(){
    return {
          content: '<p>Hello UEditorPlus</p>',
          editorConfig: {
          serverUrl: '后端服务',
          // 配置UEditorPlus的惊天资源
          UEDITOR_HOME_URL: '/static/UEditorPlus/'
      },
    }
}

3.运行项目

注:由于配置项未配置,需要与后端小伙伴联调,才可使用上传功能

到此这篇关于如何在vue项目中使用UEditor--plus的文章就介绍到这了,更多相关vueUEditor--plus内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 分分钟学会vue中vuex的应用(入门教程)

    分分钟学会vue中vuex的应用(入门教程)

    本篇文章主要介绍了vue中vuex的应用(入门教程),详细的介绍了vuex.js和应用方法,有兴趣的可以了解一下
    2017-09-09
  • 如何在Vue中获取DOM元素的实际宽高

    如何在Vue中获取DOM元素的实际宽高

    使用vue的时候,想要获得一个指定的元素的高度时,下面这篇文章主要给大家介绍了关于如何在Vue中获取DOM元素的实际宽高的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • Vue toRef toRefs toRaw函数使用示例

    Vue toRef toRefs toRaw函数使用示例

    这篇文章主要介绍了Vue toRef toRefs toRaw函数使用示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-03-03
  • vue element自定义表单验证请求后端接口验证

    vue element自定义表单验证请求后端接口验证

    这篇文章主要介绍了vue element自定义表单验证请求后端接口验证,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 关于下拉类型多选组件Vue-Treeselect(键名转换)

    关于下拉类型多选组件Vue-Treeselect(键名转换)

    这篇文章主要介绍了关于下拉类型多选组件Vue-Treeselect(键名转换),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • vue3 微信扫码登录及获取个人信息实现的三种方法

    vue3 微信扫码登录及获取个人信息实现的三种方法

    本文主要介绍了vue3 微信扫码登录及获取个人信息实现的三种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03
  • vue3中调用api接口实现数据的渲染以及详情方式

    vue3中调用api接口实现数据的渲染以及详情方式

    这篇文章主要介绍了vue3中调用api接口实现数据的渲染以及详情方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue实现过渡效果的基本方法

    Vue实现过渡效果的基本方法

    Vue 提供了一个强大的过渡系统,可以用于在进入、离开和列表渲染时添加各种动画效果,这些过渡不仅能够提升用户体验,还能使界面更加生动和吸引人,本文将介绍 Vue 中实现过渡效果的基本方法,并提供使用 setup 语法糖的代码示例,需要的朋友可以参考下
    2024-09-09
  • element-ui中select组件绑定值改变,触发change事件方法

    element-ui中select组件绑定值改变,触发change事件方法

    今天小编就为大家分享一篇element-ui中select组件绑定值改变,触发change事件方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue实现一个滚动条样式

    vue实现一个滚动条样式

    滚动条能够给用户带来极好的体验效果,今天通过本文给大家分享vue实现一个滚动条样式,代码简单易懂,需要的朋友参考下吧
    2021-07-07

最新评论