weditor使用步骤用法介绍(WEditor使用教程)

一、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字)

Published by

风君子

独自遨游何稽首 揭天掀地慰生平