wangEditor - Lightweight web rich text editor, easy to configure, simple to use. Support IE10 + browser.
- Official website: www.wangEditor.com
- Documentation: www.kancloud.cn/wangfupeng/wangeditor3/332599
- Source: github.com/wangfupeng1988/wangEditor
Sources official website
use
var E = window.wangEditor var editor2 = new E('#div3') editor2.create()
Run demo
- Download Source
git clone [email protected]:wangfupeng1988/wangEditor.git - Install or upgrade to the latest version of the node (lowest
v6.x.x) - Into the directory, the installation dependencies
cd wangEditor && npm i - After the completion of the installation package, windows users to run
npm run win-example, Mac users runnpm run example - Open a browser to access localhost: 3000 / index.html
- React or vue available for documents in the "Other" section of related presentations
download
- Click https://github.com/wangfupeng1988/wangEditor/releases download the latest version. Enter the
releasefile folder to find the nextwangEditor.jsorwangEditor.min.jsto - 使用CDN：//unpkg.com/wangeditor/release/wangEditor.min.js
- Use
bowerDownload:bower install wangEditor(premise that the computer has been installedbower)
Ordinary html introduced:
Code Example below. Note that the following code without reference to any CSS file! ! !
<!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.com/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')
editor.create()
</script>
</body>
</html>
If you want your information to control the size, height, width, etc. of the editing area, see the menu editing area and separated
Use module definition
wangEditor addition to the direct use of <script>references, but also support AMDand CommonJSreference method.
AMD
With require.jsan example to show
First create main.jsthe symbol
require(['/wangEditor.min.js'], function (E) { var editor = new E('#editor') editor.create() }) Then create a page with code
<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title>wangEditor demo</title> </head> <body> <div id="editor"> <p>欢迎使用 wangEditor 富文本编辑器</p> </div> <script data-main="./main.js" src="//cdn.bootcss.com/require.js/2.3.3/require.js"></script> </body> </html> CommonJS
You can use npm install wangeditorthe installation (note that this wangeditoris all lowercase letters)
// 引用
var E = require('wangeditor') // 使用 npm 安装 var E = require('/wangEditor.min.js') // 使用下载的源码 // 创建编辑器 var editor = new E('#editor') editor.create()
vue引入
###editor.vue
### App.vue
For Vue
If you need to wangEditor Vue used in the following examples may be found in
- Download Source
git clone [email protected]:wangfupeng1988/wangEditor.git - Vue example into the directory
cd wangEditor/example/demo/in-vue/, viewsrc/components/Editor.vuecan be - You can also run
npm install && npm run devview vue in effect (http://localhost:8080/)