wangEditor的使用
wangEditor的使用
第一步,将其下载,并引入项目中。
第二步,引入js
<script type="text/javascript" src="/plugin/wangEditor/release/wangEditor.min.js"></script>
第三步,初始化对象
<span class="col-lg-8" id="editor"></span>
var E = window.wangEditor;
var editor = new E('#editor');
editor.create();
第四步,添加一些配置
配置菜单
// 自定义菜单配置
editor.customConfig.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
'video', // 插入视频
'code', // 插入代码
'undo', // 撤销
'redo' // 重复
];
配置图片上传
editor.customConfig.uploadImgServer = '/admin.php/Upload/wang_editor'; // 上传图片到服务器
// 3M
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
// 限制一次最多上传 5 张图片
editor.customConfig.uploadImgMaxLength = 1;
// 自定义文件名
editor.customConfig.uploadFileName = 'editor_img';
// 将 timeout 时间改为 3s
editor.customConfig.uploadImgTimeout = 5000;
editor.customConfig.uploadImgHooks = {
before: function (xhr, editor, files) {
// 图片上传之前触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,files 是选择的图片文件
// 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
// return {
// prevent: true,
// msg: '放弃上传'
// }
// alert("前奏");
},
success: function (xhr, editor, result) {
// 图片上传并返回结果,图片插入成功之后触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
// var url = result.data.url;
// alert(JSON.stringify(url));
// editor.txt.append(url);
// alert("成功");
},
fail: function (xhr, editor, result) {
// 图片上传并返回结果,但图片插入错误时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
alert("失败");
},
error: function (xhr, editor) {
// 图片上传出错时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
// alert("错误");
},
// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式,可使用该配置
// (但是,服务器端返回的必须是一个 JSON 格式字符串!!!否则会报错)
customInsert: function (insertImg, result, editor) {
// 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
// insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
// 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
var url = result.data[0];
insertImg(url);
// result 必须是一个 JSON 格式字符串!!!否则报错
}
}
第五步,设置内容
// 设置内容
editor.txt.html(content);
第六步,获取内容
// 获取内容
var content = editor.txt.html();
很好,很方便!
wangEditor的使用的更多相关文章
- 利用wangEditor获取文章格式和内容
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs& ...
- wangEditor ie9 表单上传图片
wangEditor ie9 表单上传图片 弹框无法消失 var resultText = $.trim(iframeWindow.document.body.innerHTML); result ...
- wangEditor——轻量级web富文本框
提示:最新版wangEditor请参见 http://www.wangeditor.com/ 和 https://github.com/wangfupeng1988/wangEditor 交流 ...
- 【我的产品观】开发wangEditor一年总结
1. 引言 标题说是一周年,其实是不是正好是一周年,我也忘记了,光从github的提交记录看也不准确.印象中觉得,如果要论想法,到现在一年多了,如果要论实际写代码,可能差不多正好一年. 从8月底在济南 ...
- 更加简洁易用——wangEditor富文本编辑器新版本发布
1. 前言 wangEditor富文本编辑器(www.wangEditor.com)从去年11月份发布,至今已经有将近10各月了.它就像一个襁褓中的小婴儿,在我的努力以及众多使用者的支持下不断摸索.成 ...
- 轻量级富文本编辑器wangEditor源码结构介绍
1. 引言 wangEditor——一款轻量级html富文本编辑器(开源软件) 网站:http://www.wangeditor.com/ demo演示:http://www.wangeditor.c ...
- 重构wangEditor(web富文本编辑器),欢迎指正!
提示:最新版wangEditor请参见:wangEditor.github.io 或者 https://github.com/wangfupeng1988/wangEditor 1. 前言 (下载源码 ...
- wangEditor——轻量化web富文本框
wangEditor——轻量级web富文本编辑器 参见:wangEditor.github.io 或者 https://github.com/wangfupeng1988/wangEditor 交 ...
- 富文本编辑器 - wangEditor 插入代码
效果: 项目结构: 注意事项: highlightJS 代码高亮插件,wangEditor 本身就是集成的highlightJS代码高亮插件. 在wangEditor-1.3.12.js里找到var ...
- 富文本编辑器 - wangEditor 上传图片
效果: . 项目结构图: wangEditor-upload-img.html代码: <html> <head> <title>wangEditor-图片上传< ...
随机推荐
- Chapter 5 Blood Type——15
I hesitated, torn, but then the first bell sent me hurrying out the door — with a last glance confir ...
- Vim实现分屏
主要是sp(seismic profile)和vsp(vertical seismic profile)两个命令, 水平拆分 将vm切换到命令模式, :sp 实现水平拆分屏幕 垂直拆分 ...
- Django 系列博客(十二)
Django 系列博客(十二) 前言 本篇博客继续介绍 Django 中的查询,分别为聚合查询和分组查询,以及 F 和 Q 查询. 聚合查询 语法:aggregate(*args, **kwargs) ...
- 【Recorder.js+百度语音识别】全栈方案技术细节
项目中需要利用百度语音接口在Web端实现语音识别功能,采用了这样的技术方案,但实现时遇到了很多问题,发现网上大部分文章都只是在详解官方提供的example示例,对实际开发没有提供什么有价值的建议,而r ...
- tomcat 大并发报错 Maximum number of threads (200) created for connector with address null and port 80
1.INFO: Maximum number of threads (200) created for connector with address null and port 80 说明:最大线程数 ...
- Kotlin 数组学习笔记
创建数组 初始值为空的String数组 val arrayEmpty = emptyArray<String>() 长度为5,初始值为空的Int数组 val arrayEmpty = em ...
- 6-Redis 的持久化之 AOF
2017-01-01 16:42:13 该系列文章链接NoSQL 数据库简介Redis的安装及及一些杂项基础知识Redis 的常用五大数据类型(key,string,hash,list,set,zse ...
- nodejs cookie与session
cookie.session cookie:在浏览器保存一些数据,每次请求都会带过来 *不安全.有限(4K) session:保存数据,保存在服务端 *安全.无限 ------------------ ...
- MySQL如何修改密码
以下几种方法可供选择 第一种方式: 最简单的方法就是借助第三方工具Navicat for MySQL来修改,方法如下: 1.登录mysql到指定库,如:登录到test库. 2.然后点击上方“用户”按钮 ...
- 把vux中的@font-face为base64格式的字体信息解码成可用的字体文件
在最近移动端项目中用到了vux,感觉用着还习惯,当把vux使用到PC端的时候出现了IE浏览器出现,这样的错误信息: CSS3114: @font-face 未能完成 OpenType 嵌入权限检查.权 ...