vue前言

最近项目需要使用到富文本编辑器，因为项目关系需要使用到vue-ueditor-wrap富文本编辑器。经过了几小时的研究终于成功集成了。

1、install

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

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

2、需要安装对应的版本进行下载，前端无所谓，但是需要对应后端的版本进行下载

GitHub - haochuan9421/vue-ueditor-wrap at 2.x

3、下载完成之后会得到一个压缩包，解压压缩包之后把里面的内容放入static目录下（vue3是public）,也可以直接在git克隆demo下来更改，不过这个文件一般都不需要动。

4、使用富文本编辑器

（1）首先需要导入组件、样式等等

import VueUeditorWrap from 'vue-ueditor-wrap'
import '/static/UEditor/ueditor.config.js'
import '/static/UEditor/ueditor.all.min.js'
import '/static/UEditor/lang/zh-cn/zh-cn.js'
import '/static/UEditor/themes/default/css/ueditor.css'

（2）声明组件

  components: {VueUeditorWrap},

(3) v-model绑定数据

  // 3、v-model绑定数据msg: '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定</h2>',// 4、根据项目需求自行配置,具体配置参见ueditor.config.js源码或 http://fex.baidu.com/ueditor/#start-configeditorConfig: {// 初始容器高度initialFrameHeight: 240,// 初始容器宽度initialFrameWidth: '100%',// 访问 UEditor 静态资源的根路径，可参考 https://hc199421.gitee.io/vue-ueditor-wrap/#/faqUEDITOR_HOME_URL: '/UEditor/',// 服务端接口serverUrl: ''}

（4）声明调用

  <vue-ueditor-wrap v-model="msg" :config="editorConfig"></vue-ueditor-wrap>

然后就可以进行使用啦

注意事项

可能会报以下错误，这个就是路径的问题需要根据不同的项目修改不同的路径

比如vue2就需要在static下配置，然后使用以下进行获取

 UEDITOR_HOME_URL: '/UEditor/',

而vue3项目需要在public目录下放置（第3步），并进行调用

总结

vue-ueditor-wrap使用一共3步。1 2下载 3配置 4使用，需要注意的就是在配置可能会出现的路径问题还有vue版本不同路径问题，其他都是小问题

vue集成vue-ueditor-wrap富文本编辑器相关推荐

UEditor 百度富文本编辑器 .Net实例
转自 http://download.csdn.net/download/hdsslxl/6740605 1.UEditor 百度富文本编辑器完整版 .Net实例已解决上传图片问题. 2.内附完整d ...
vue中引入TinyMCE实现富文本编辑器
整片文章是以vue2.X 引入tinymce富文本编译器首先,先确认你的vue版本是 2 还是 3 ,查看项目的package.json中vue的版本,我的是2.5.2 一共两个步骤 vue工程中安 ...
强悍！基于Vue的无渲染的富文本编辑器——tiptap！
介绍 tiptap编辑器基于Prosemirror,完全可扩展且无渲染.可以轻松地将自定义节点添加为Vue组件. Github https://github.com/scrumpy/tiptap 为什 ...
控制富文本table不能超过div宽度_强悍！基于Vue的无渲染的富文本编辑器——tiptap！...
介绍 tiptap编辑器基于Prosemirror,完全可扩展且无渲染.可以轻松地将自定义节点添加为Vue组件. Github https://github.com/scrumpy/tiptap 为什 ...
vue实战025:配置TinyMCE富文本编辑器
目录组件安装组件引用添加模板初始化编辑器常用属性配置扩展插件使用之前分享了一篇vue实战021:Vue-Quill-Editor富文本编辑器使用,有网友说TinyMCE更好用,所以今天来 ...
Vue项目中使用 tinymce 富文本编辑器的方法，附完整源码
来源 | https://blog.csdn.net/xingmeiok/article/deta 1.tinymce相关参考资料 tinymce版资料: http://tinymce.ax-z.cn ...
ueditor百度富文本编辑器隐藏一下不需要的工具按钮
在ueditor.config.js中搜索"toolbars: " 以下为编辑器工具栏展示的按钮将不需要的按钮删掉就好.也可以在创建富文本编辑器的时候实例出需要的按钮不了解中文 ...
vue+tiptap ,基于vue的无渲染的富文本编辑器
安装tiptap 官网: github:https://github.com/ueberdosis/tiptap 演示:https://www.vue365.cn/code_demo.php?id=9 ...
ueditor百度富文本编辑器linux下报错: class path resource [config.json] cannot be resolved to absolute file path
https://www.cnblogs.com/findtasy/p/10043273.html
UEditor 百度富文本编辑器源码百度云下载
官网下载地址:官网下载地址: 因为官网的速度时快时慢的,所以我把源码包放到了百度云,可以开通百度云进行下载. 下载地址: 链接:https://pan.baidu.com/s/1aXMA77uQolM ...

vue集成vue-ueditor-wrap富文本编辑器

vue前言

注意事项

总结

vue集成vue-ueditor-wrap富文本编辑器相关推荐

最新文章

热门文章