wangEditor富文本编辑器安装与入门

简介: wangEditor富文本编辑器安装与入门

官网


https://www.wangeditor.com/v5/


安装


包括 vue React 组件


#npm


安装 editor


yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save


安装 React 组件


yarn add @wangeditor/editor-for-react
# 或者 npm install @wangeditor/editor-for-react --save


安装 Vue2 组件


yarn add @wangeditor/editor-for-vue
# 或者 npm install @wangeditor/editor-for-vue --save


安装 Vue3 组件


yarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save


#CDN


<!-- 引入 css -->
<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
<!-- 引入 js -->
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<script>
    var E = window.wangEditor; // 全局变量
</script>


如果上述 CDN 访问不成功,可以在 npm 安装完成之后,在安装包找到 JS CSS 文件,步骤如下:


  • 新建一个 test1 文件夹,打开控制台,目录定位到该文件夹,执行 npm install @wangeditor/editor 或 yarn add @wangeditor/editor


  • 安装完成,打开


node_modules/@wangeditor/editor/dist


  • 文件夹,即可找到 JS CSS 文件:


  • index.js


  • css/style.css


  • 把这俩文件拷贝出来,然后删掉 test1 文件夹


使用


https://www.wangeditor.com/v5/

相关文章
|
7月前
|
存储 安全 数据挖掘
【工具】HxD Hex Editor 的安装、使用详细教程
【工具】HxD Hex Editor 的安装、使用详细教程
1299 0
|
Shell Linux Apache
学习Nano编辑器:入门指南、安装步骤、基本操作和高级功能
学习Nano编辑器:入门指南、安装步骤、基本操作和高级功能
1833 0
|
缓存 Ubuntu Linux
Vim编辑器入门指南:安装、基本操作和高级技巧详解 | 适用于Linux系统
Vim编辑器入门指南:安装、基本操作和高级技巧详解 | 适用于Linux系统
1025 0
|
前端开发
vue3 中wangEditor富文本编辑器上传图片功能
vue3 中wangEditor富文本编辑器上传图片功能
705 0
|
资源调度
Vue3富文本编辑器wangEditor 5使用总结
Vue3富文本编辑器wangEditor 5使用总结
928 0
|
资源调度 前端开发
React富文本编辑器wangEditor
React富文本编辑器wangEditor
240 0
|
4月前
|
JavaScript
基于Vue2.X对WangEditor 5富文本编辑器进行封装与使用,支持单个或多个图片点击、粘贴、拖拽上传,Vue3.X项目也可直接使用
这篇文章介绍了如何在Vue 2.X项目中封装和使用WangEditor 5富文本编辑器,支持图片的点击、粘贴和拖拽上传,同时提到封装的组件也适用于Vue 3.X项目,并提供了详细的使用示例和后端配置。
368 1
基于Vue2.X对WangEditor 5富文本编辑器进行封装与使用,支持单个或多个图片点击、粘贴、拖拽上传,Vue3.X项目也可直接使用
|
4月前
|
存储 JavaScript 前端开发
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】
文章展示了在Vue项目中通过集成Quill富文本编辑器实现公告功能的完整开发过程,包括前端的公告发布、修改、删除操作以及后端的数据存储和处理逻辑。
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】
|
4月前
|
JavaScript
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】
文章详细介绍了在Vue项目中安装和使用`vue-quill-editor`的步骤,包括如何通过npm安装、局部挂载、在Vue页面中引入和配置使用。同时,还提供了如何实现图片的缩放和拖拽功能的进阶教程,涉及到安装额外的插件`quill-image-drop-module`和`quill-image-resize-module`,以及对Webpack配置的调整。最后,文章还提供了实际效果展示和一些后续可能的拓展功能,如上传视频和将图片上传到服务器等。
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】
|
5月前
|
Shell Linux 数据安全/隐私保护
Notepad-- 轻量级文本编辑器的安装及基本使用
【7月更文挑战第11天】Notepad-- 轻量级文本编辑器的安装及基本使用
237 3

热门文章

最新文章