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的使用的更多相关文章

  1. 利用wangEditor获取文章格式和内容

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs& ...

  2. wangEditor ie9 表单上传图片

    wangEditor ie9 表单上传图片  弹框无法消失  var resultText = $.trim(iframeWindow.document.body.innerHTML); result ...

  3. wangEditor——轻量级web富文本框

    提示:最新版wangEditor请参见  http://www.wangeditor.com/  和   https://github.com/wangfupeng1988/wangEditor 交流 ...

  4. 【我的产品观】开发wangEditor一年总结

    1. 引言 标题说是一周年,其实是不是正好是一周年,我也忘记了,光从github的提交记录看也不准确.印象中觉得,如果要论想法,到现在一年多了,如果要论实际写代码,可能差不多正好一年. 从8月底在济南 ...

  5. 更加简洁易用——wangEditor富文本编辑器新版本发布

    1. 前言 wangEditor富文本编辑器(www.wangEditor.com)从去年11月份发布,至今已经有将近10各月了.它就像一个襁褓中的小婴儿,在我的努力以及众多使用者的支持下不断摸索.成 ...

  6. 轻量级富文本编辑器wangEditor源码结构介绍

    1. 引言 wangEditor——一款轻量级html富文本编辑器(开源软件) 网站:http://www.wangeditor.com/ demo演示:http://www.wangeditor.c ...

  7. 重构wangEditor(web富文本编辑器),欢迎指正!

    提示:最新版wangEditor请参见:wangEditor.github.io 或者 https://github.com/wangfupeng1988/wangEditor 1. 前言 (下载源码 ...

  8. wangEditor——轻量化web富文本框

    wangEditor——轻量级web富文本编辑器 参见:wangEditor.github.io  或者  https://github.com/wangfupeng1988/wangEditor 交 ...

  9. 富文本编辑器 - wangEditor 插入代码

    效果: 项目结构: 注意事项: highlightJS 代码高亮插件,wangEditor 本身就是集成的highlightJS代码高亮插件. 在wangEditor-1.3.12.js里找到var ...

  10. 富文本编辑器 - wangEditor 上传图片

    效果: . 项目结构图: wangEditor-upload-img.html代码: <html> <head> <title>wangEditor-图片上传< ...

随机推荐

  1. 使用 Jaeger 完成服务间的链路追踪

    世上本没有路,走的人多了,便变成了路 -- 鲁迅     本次讨论的话题就是需要在各个服务之间踏出条"路",让问题有"路"可循. 至于为什么用 jaeger.. ...

  2. HBase查询优化

    1.概述 HBase是一个实时的非关系型数据库,用来存储海量数据.但是,在实际使用场景中,在使用HBase API查询HBase中的数据时,有时会发现数据查询会很慢.本篇博客将从客户端优化和服务端优化 ...

  3. windows下安装bpython方法 (新)

    刚开始学习python的时候使用的ipython解释器,挺好用的,后来发现bpython功能更强大,linux系统中安装基本没啥问题,不过在windows下安装倒是不容易啊.使用google搜了一下, ...

  4. java内部类深入详解 内部类的分类 特点 定义方式 使用

    本文关键词: java内部类 内部类的分类 特点  定义方式 使用   外部类调用内部类 多层嵌套内部类  内部类访问外部类属性  接口中的内部类  内部类的继承  内部类的覆盖  局部内部类 成员内 ...

  5. #4 Python面向对象(三)

    前言 前两节讲解了Python面向对象的思想和Python类中各种变量的含义以及区别.肯定有小伙伴会问,类初始化时是否可以传入参数?如果有多个类中含有共同的函数方法,是否可以重复利用?本节就带着这些问 ...

  6. tuxedo开发

    近来一直在和某电信的系统做对接开发,需要从对方系统(tuxedo)中查询数据后进行显示,本来是个挺简单的事情,无奈tuxedo这个东西以前真是没听说过,网上能用的资料也不多,真是苦了我这段时间,还好已 ...

  7. Linux中more和less命令用法

    一.more命令 more功能类似 cat ,cat命令是整个文件的内容从上到下显示在屏幕上. more会以一页一页的显示方便使用者逐页阅读,而最基本的指令就是按空白键(space)就往下一页显示,按 ...

  8. aspx 页面中 js 引用与页面后台的数据交互 --【 后台调用 js 】

    js 中调用后台方法   一.用Response.Write方法 Response.Write("<script type='text/javascript'>alert(&qu ...

  9. ajaxFileUpload onchang上传文件插件第二次失效刷新一次才能再次调用触发change事件

    关于用ajaxfileupload时,遇到一个要刷新一次页面才能再次上传, ajaxFileUpload 用onchang上传只能上传一次 第二次就失效了 我找这个问题找了很长时间 ajaxFileU ...

  10. CSS常见的中属性级,选择符级的Hack

    注意:尽量找到通用方法而减少对CSS Hack的使用,大规模使用CSS Hack会带来维护成本的提高以及浏览器版本变化而带来类似Hack失效等系列问题. 星号 * 针对IE6,7:下划线 _ 针对ie ...