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

爱⌒轻易说出口 提交于 2019-11-29 09:56:37

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

来源官网

使用

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 可查阅文档中“其他”章节中的相关介绍

下载

普通的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>引用之外,还支持AMDCommonJS的引用方式。

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
<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')
    editor.create()
  }
}
</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;
}
</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/
 
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!