富⽂本编辑器--引⼊demo和简单使⽤wangEditor —— 轻量级 web 富⽂本编辑器，配置⽅便，使⽤简单。⽀持 IE10+ 浏览器。
官⽹：
⽂档：
源码：
来源官⽹
使⽤
var E = window.wangEditor
var editor2 = new E('#div3') ate()
运⾏ demo
下载源码 git clone git@github:wangfupeng1988/wangEditor.git
安装或者升级最新版本 node（最低v6.x.x）
进⼊⽬录，安装依赖包 cd wangEditor && npm i
安装包完成之后，windows ⽤户运⾏npm run win-example，Mac ⽤户运⾏npm run example
打开浏览器访问
⽤于 React 或者 vue 可查阅中“其他”章节中的相关介绍
下载
点击  下载最新版。进⼊release⽂件夹下到wangEditor.js或者wangEditor.min.js即可
使⽤CDN：
使⽤bower下载：bower install wangEditor （前提保证电脑已安装了bower）
普通的html引⼊：
代码⽰例如下。注意，以下代码中⽆需引⽤任何 CSS ⽂件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="//unpkg/wangeditor/release/wangEditor.min.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>
<body>
<div id="editor">
<p>欢迎使⽤ <b>wangEditor</b> 富⽂本编辑器</p>
</div>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#editor')
</script>
</body>
</html>
如果想要⾃⼰控制编辑区域的⾼度、宽度等尺⼨信息，参见
使⽤模块定义
wangEditor 除了直接使⽤<script>引⽤之外，还⽀持AMD和CommonJS的引⽤⽅式。
AMD
以require.js为例演⽰
先创建main.js，代码为
require(['/wangEditor.min.js'], function (E) { var editor = new E('#editor') ate() })
然后创建页⾯，代码为
<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title>wangEditor demo</title> </head> <body> <div id="editor"> <p>欢迎使⽤ wangEditor 富⽂本编辑器</p> </div
CommonJS
可以使⽤npm install wangeditor安装（注意，这⾥wangeditor全是⼩写字母）
// 引⽤
var E = require('wangeditor') // 使⽤ npm 安装 var E = require('/wangEditor.min.js') // 使⽤下载的源码 // 创建编辑器 var editor = new E('#editor') ate
vue引⼊
###editor.vue
<template>
<div class="hello">
<div id="editor">
<p>欢迎使⽤ wangEditor 富⽂本编辑器</p>
</div>
</div>
</template>
<script>
import E from 'wangeditor'
export default {
mounted(){
var editor = new E('#editor')
}
}
</script>
###App.vue
<template>
<div id="app">
<hello></hello>
<router-view/>
</div>
</template>
<script>
import Hello from './components/HelloWorld'
export default {
name: 'App',
components: {
Hello,
},
data(){
return{
}
},
mounted(){
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;
-
moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
asp富文本编辑器}
</style>
⽤于 Vue
如果需要将 wangEditor ⽤于 Vue 中，可参见如下⽰例
下载源码 git clone git@github:wangfupeng1988/wangEditor.git
进⼊ vue ⽰例⽬录 cd wangEditor/example/demo/in-vue/，查看src/components/Editor.vue即可也可以运⾏npm install && npm run dev查看在 vue 中的效果（localhost:8080/）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。