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

最新推荐文章于 2024-09-10 10:55:39 发布

bagu1904

最新推荐文章于 2024-09-10 10:55:39 发布

阅读量821

点赞数

文章标签： java php git

原文链接：http://www.cnblogs.com/huchong-bk/p/11511942.html

版权

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 git@github.com: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 文件！！！

<!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>

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

使用模块定义

wangEditor 除了直接使用<script>引用之外，还支持AMD和CommonJS的引用方式。

AMD

以require.js为例演示

先创建main.js，代码为

require(['/wangEditor.min.js'], function (E) { var editor = new E('#editor') editor.create() })

然后创建页面，代码为

<!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

可以使用npm install wangeditor安装（注意，这里wangeditor全是小写字母）

// 引用
var E = require('wangeditor') // 使用 npm 安装 var E = require('/wangEditor.min.js') // 使用下载的源码 // 创建编辑器 var editor = new E('#editor') editor.create()

vue引入
###editor.vue

<p>欢迎使用 wangEditor 富文本编辑器</p>

</div>

</template>

import E from 'wangeditor'

export default {

mounted(){

var editor = new E('#editor')

editor.create()

}

</script>

###App.vue

<router-view/>

</div>

</template>

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;

}

</style>

用于 Vue

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

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