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>引用之外，还支持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
<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/）
 

富文本编辑器--引入demo和简单使用的更多相关文章

  1. 关于富文本编辑器—UEditor（java版）的使用，以及如何将UEditor的文件/图片上传路径改成绝对路径

    突然发现好久没写博客了,感觉变懒了,是要让自己养成经常写文章的习惯才行.既可以分享自己的所学,和所想,和大家一起讨论,发现自己的不足的问题. 大家可能经常会用到富文本编辑器,今天我要说的是UEdito ...

  2. 「newbee-mall新蜂商城开源啦」 页面优化，最新版 wangEditor 富文本编辑器整合案例

    大家比较关心的新蜂商城 Vue3 版本目前已经开发了大部分内容,相信很快就能够开源出来让大家尝鲜了,先让大家看看当前的开发进度: 开源仓库地址为 https://github.com/newbee-l ...

  3. 关于富文本编辑器ueditor（jsp版）上传文件到阿里云OSS的简单实例，适合新手

    关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手   本人菜鸟一枚,最近公司有需求要用到富文本编辑器,我选择的是百度的ueditor富文本编辑器,闲话不多说,进入正 ...

  4. Html引入百度富文本编辑器ueditor

    在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...

  5. bbs项目引入富文本编辑器和处理xss攻击和文章预览

    一.富文本编辑上传文章和图片 富文本编辑器我们使用kindeditor,我们首先去官网下载,然后解压,放到我们的static的目录中 然后我们在html中这样使用富文本编辑器 <!DOCTYPE ...

  6. Html引入百度富文本编辑器ueditor及自定义工具栏

    在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...

  7. 基于ABP做一个简单的系统——实战篇：4.基于富文本编辑器，Razor模板引擎生成内容并导出Word 填坑记录

    起因 需求是这样的,有一种协议需要生成,协议的模板是可配置的,在生成过程中,模板中的内容可以根据约定的标记进行替换(就像mvc的razor模板一样).生成后的内容还需要导出成word或pdf. 常见的 ...

  8. 富文本编辑器UEditor自定义工具栏（三、自定义工具栏功能按钮图标及工具栏样式简单修改）

    导读 富文本编辑器UEditor提供丰富了定制配置项,如果想设置个性化的工具栏按钮图标有无办法呢?答案是肯定的!前两篇博文简要介绍了通过将原工具栏隐藏,在自定义的外部按钮上,调用UEditor各命令实 ...

  9. 在 Vue 项目中引入 tinymce 富文本编辑器

    项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项 ...

随机推荐

  1. 一句话说明Facbook React证书的矛盾点

    这项专利授权说,如果您要使用我们根据这项授权发布的软件,假如您因为专利侵权而提起诉讼,您将失去我们的专利许可.

  2. TensorFlow 学习（5）——进一步了解MNIST

    接TensorFlow(3) 我们构建一个多层卷积网络,以提升MNIST的识别性能 权重初始化 为了创建这个模型,我们需要创建大量的权重和偏执项.这个模型中的权重在初始化是应该加入少量的噪声来打破对称 ...

  3. Tensorflow的gRPC编程(一)

    https://blog.csdn.net/langb2014/article/details/69559182 如何用TF Serving部署TensorFlow模型 https://www.jia ...

  4. Android中图片的三级缓存

    为什么要使用三级缓存 如今的 Android App 经常会需要网络交互,通过网络获取图片是再正常不过的事了 假如每次启动的时候都从网络拉取图片的话,势必会消耗很多流量.在当前的状况下,对于非wifi ...

  5. 六十二：CSRF攻击与防御之系统准备之注册功能

    CSRF攻击原理: 配置信息 import osSQLALCHEMY_DATABASE_URI = 'mysql+pymysql://root:123456@127.0.0.1:3306/test'S ...

  6. Windows下查找文件或文件夹被哪个进程占用

    Linux下我们可以使用lsof +D /filepath/,查看到文件被那些进程占用. windows下也会经常遇到文件夹或文件无法删除或无法访问的问题,使用“资源监视器”可以找到占用的进程,可以尝 ...

  7. OnCustomDraw

    ON_NOTIFY_REFLECT(NM_CUSTOMDRAW, &CMyListCtrl::OnNMCustomdraw) ON_NOTIFY : Comes from a child co ...

  8. 队列：Beanstalkd介绍

    一:介绍 Beanstalkd 是一个轻量级的内存型队列.它是典型的类Memcached设计,协议和使用方式都是同样风格.github:https://github.com/beanstalkd官网: ...

  9. CTF—攻防练习之HTTP—SQL注入(X-forwarded-For)

    主机:192.168.32.152 靶机:192.168.32.162 nmap,dirb扫ip,扫目录 在后台发现一个login,登录界面 然后直接上扫描器AVWS,发现存在X—Forwarded— ...

  10. 实验----Java的二维数组的应用及杨辉三角的编写

    (1) 编写一个程序,生成一个10*10的二维随机整数数组,并将该数组的每行最大值保存于一个一维数组中,将每列平均值保存于另外一个一维数组中并分别输出. (2) 编程输出杨辉三角的前10行. 找出一个 ...