富文本编辑器--引入demo和简单使用

wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。

• 官网：www.wangEditor.com
• 文档：www.kancloud.cn/wangfupeng/wangeditor3/332599
• 源码：github.com/wangfupeng1988/wangEditor 

来源官网

使用

var E = window.wangEditor
var editor2 = new E('#div3') editor2.create()

运行 demo

• 下载源码 git clone [email protected]:wangfupeng1988/wangEditor.git
• 安装或者升级最新版本 node（最低v6.x.x）
• 进入目录，安装依赖包 cd wangEditor && npm i
• 安装包完成之后，windows 用户运行npm run win-example，Mac 用户运行npm run example
• 打开浏览器访问localhost:3000/index.html
• 用于 React 或者 vue 可查阅文档中“其他”章节中的相关介绍

下载

• 点击 https://github.com/wangfupeng1988/wangEditor/releases 下载最新版。进入release文件夹下找到wangEditor.js或者wangEditor.min.js即可
• 使用CDN：//unpkg.com/wangeditor/release/wangEditor.min.js
• 使用bower下载：bower install wangEditor （前提保证电脑已安装了bower）

普通的html引入：

代码示例如下。注意，以下代码中无需引用任何 CSS 文件！！！

欢迎使用 wangEditor 富文本编辑器

如果想要自己控制编辑区域的高度、宽度等尺寸信息，参见 菜单与编辑区域分离

 

使用模块定义

wangEditor 除了直接使用


###App.vue

 

用于 Vue

如果需要将 wangEditor 用于 Vue 中，可参见如下示例

• 下载源码 git clone [email protected]:wangfupeng1988/wangEditor.git
• 进入 vue 示例目录 cd wangEditor/example/demo/in-vue/，查看src/components/Editor.vue即可
• 也可以运行npm install && npm run dev查看在 vue 中的效果（http://localhost:8080/）

转载于:https://www.cnblogs.com/huchong-bk/p/11511942.html