富文本编辑器--引入demo和简单使用
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
###App.vue
用于 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和简单使用的更多相关文章
- 关于富文本编辑器—UEditor(java版)的使用,以及如何将UEditor的文件/图片上传路径改成绝对路径
突然发现好久没写博客了,感觉变懒了,是要让自己养成经常写文章的习惯才行.既可以分享自己的所学,和所想,和大家一起讨论,发现自己的不足的问题. 大家可能经常会用到富文本编辑器,今天我要说的是UEdito ...
- 「newbee-mall新蜂商城开源啦」 页面优化,最新版 wangEditor 富文本编辑器整合案例
大家比较关心的新蜂商城 Vue3 版本目前已经开发了大部分内容,相信很快就能够开源出来让大家尝鲜了,先让大家看看当前的开发进度: 开源仓库地址为 https://github.com/newbee-l ...
- 关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手
关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手 本人菜鸟一枚,最近公司有需求要用到富文本编辑器,我选择的是百度的ueditor富文本编辑器,闲话不多说,进入正 ...
- Html引入百度富文本编辑器ueditor
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...
- bbs项目引入富文本编辑器和处理xss攻击和文章预览
一.富文本编辑上传文章和图片 富文本编辑器我们使用kindeditor,我们首先去官网下载,然后解压,放到我们的static的目录中 然后我们在html中这样使用富文本编辑器 <!DOCTYPE ...
- Html引入百度富文本编辑器ueditor及自定义工具栏
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...
- 基于ABP做一个简单的系统——实战篇:4.基于富文本编辑器,Razor模板引擎生成内容并导出Word 填坑记录
起因 需求是这样的,有一种协议需要生成,协议的模板是可配置的,在生成过程中,模板中的内容可以根据约定的标记进行替换(就像mvc的razor模板一样).生成后的内容还需要导出成word或pdf. 常见的 ...
- 富文本编辑器UEditor自定义工具栏(三、自定义工具栏功能按钮图标及工具栏样式简单修改)
导读 富文本编辑器UEditor提供丰富了定制配置项,如果想设置个性化的工具栏按钮图标有无办法呢?答案是肯定的!前两篇博文简要介绍了通过将原工具栏隐藏,在自定义的外部按钮上,调用UEditor各命令实 ...
- 在 Vue 项目中引入 tinymce 富文本编辑器
项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项 ...
随机推荐
- ftp相关
已经存在虚拟账户 添加新账户 .在/etc/vsftpd/user.txt里面配置用户名密码 单行是用户名 双行是密码 .导入新用户密码 db_load -T -t hash -f /etc/vsft ...
- windows上配置pytorch
操作系统:win10 已安装程序:Python 3.6 + Anaconda 5.1.0 + CUDA 9 pytorch官网:https://pytorch.org/ 1.进入官网,从Get Sta ...
- css中设置table中的td内容自动换行
word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行. 它们的区别就在于: 1,word-break:break-all 例如div宽 ...
- keystone入口manage.py
/opt/stack/keystone/keystone/cmd/manage.py OpenStack所有项目都是基于Python开发,并且都是标准的Python项目,通过setuptools工具管 ...
- Web测试方法_02
1.页面链接检查 检查每一个链接是否都有对应的页面,页面与页面之间的来回切换是否正常响应,包括一些返回页面的链接是否正常,还要检查点击图片所链接的页面是否准确展示. 2.相关性检查 功能相关性检查:例 ...
- spring-boot集成2:集成lombok
Why lombok? lombok可以帮我们从实体类的getter.setter.constructor和toString等样板代码中解脱出来,使用lombok可以开发出更优雅的代码 1.maven ...
- python 将视频转换成音频
安装库 sudo pip install moviepy 代码 index.py from moviepy.editor import * video = VideoFileClip('test.mp ...
- Mac下的Pycharm教程
除非你是用记事本写代码,或者用vim写代码的大牛,那么推荐使用PyCharm编写Python代码. PyCharm是一种Python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效 ...
- C#作业系统中的安全系统
比赛条件 编写多线程代码时,总是存在竞争条件的风险.当一个操作的输出取决于其控制之外的另一个过程的定时时,发生竞争条件. 竞争条件并不总是一个错误,但它是不确定行为的来源.当竞争条件确实导致错误时,可 ...
- Django 字段更新时报错
字段更新时会报错: -------------------------------------------------------------- 无法向未定义字段添加默认值您确认添加默认值吗? 请添加 ...