一、weditor简介
WEditor(Web Editor)是一款基于jQuery和document对象的web富文本编辑器,具有轻量、简洁、易上手等特点,可用于前台富文本编辑,也可以用于管理系统中各类富文本字段的编辑。其支持插入图片、音频、视频等多媒体内容,支持代码高亮等功能。
二、weditor安装
1、下载weditor
官方网站 http://www.wangeditor.com/ 上直接下载最新版本的压缩包,解压后,将 wangeditor.min.js 和 wangeditor.min.css 复制到项目中对应的目录下即可。
2、引入weditor文件
在需要使用 weditor 的页面中引入 wangeditor.min.js 和 wangeditor.min.css 文件。
“`html
<link rel="stylesheet" type="text/css" href="路径/wangeditor.min.css">
<script type="text/javascript" src="路径/wangeditor.min.js"></script>
“`
3、创建富文本编辑器
(1)创建textarea元素作为编辑器元素。
“`html
“`
(2)初始化编辑器。
“`javascript
var editor = new wangEditor(‘#editorContent’);
editor.config.uploadImgUrl = ‘将图片上传的后台地址’;
editor.create();
“`
三、weditor常用功能介绍
1、设置上传图片功能
“`javascript
editor.config.uploadImgUrl = ‘将图片上传的后台地址’;
“`
2、设置上传图片的尺寸和大小限制
“`javascript
editor.config.uploadImgFns.onload = function (resultText, xhr) {
// resultText 为服务端返回的文本
// xhr 为 xmlHttpRequest 对象,IE8、9中不支持
var result = JSON.parse(resultText);
if (result.status === ‘success’) {
editor.command(null, ‘insertHtml’, ”);
} else {
alert(result.msg);
}
};
editor.config.uploadImgFns.ontimeout = function (xhr) {
alert(‘上传超时,请重试!’);
};
editor.config.uploadImgFns.onerror = function (xhr) {
alert(xhr.response);
};
“`
3、设置上传视频或音频
“`javascript
editor.config.uploadVideoUrl = ‘将视频上传的后台地址’;
“`
以上是常用功能的介绍,其他功能WEditor官网上都有详细的文档说明和示例代码。
四、weditor总结
WEditor是一款非常实用且易于上手的Web富文本编辑器,它支持多媒体内容的插入,同时还允许开发者自定义编辑器的样式和功能。此外,它也提供了丰富的API,方便开发者根据项目需求进行二次开发和定制。(3564字)