WUI v1.1.0

基础说明

开始使用 Getting Started
底层方法 基础支撑
页面元素 规范 / 公共类
模块规范 使用 / 扩展
常见问题 FAQ
更新日志

页面元素

布局 容器 / 栅格 / 后台布局
颜色 主题色 / 内置背景色
图标 字体图标
动画 内置 CSS3 动画
按钮 button 组
表单 form 元素集合
导航 菜单 / 面包屑
选项卡 Tabs 切换
进度条 progress
面板 折叠 / 手风琴
表格 静态 table
徽章 小圆点 / 小边框
时间线 timeline
区块 引用 / 字段集
文字 颜色 / 链接 / 位置
辅助 边距 / 填充 / 横线等

内置模块

弹出层 layer
日期与时间选择 wdate
分页 wpage
模板引擎 wtpl
数据表格 table
表单 form
文件上传 upload
穿梭框 transfer
树形组件 tree
颜色选择器 colorpicker
常用元素操作 element
滑块 slider
评分 rate
轮播 carousel
流加载 flow
工具集 util
简单编辑器 wedit
富文本编辑器 tinymce
下拉菜单 menu
拖动排序 dragsort
自动完成 autocomplete
代码修饰器 code
通知控件 notice
下拉多选控件 xmSelect
滑块验证 sliderVerify
无限级联选择器 cascader
富文本编辑器 - wui.wedit

国内外有许多优秀、强大的HTML编辑器,但普遍都有一个共性:异常地臃肿(少则几千行,多则上万行代码)、UI陈旧,并且基本都好几年没更新了。而现在,随着wui的发布,我们有必要重新为富文本做一些新的定义。wedit仍旧遵循极简的设计风格,无论是UI上,还是接口使用上,都尽可能地避免一些繁杂的功能和配置。如果你正苦苦寻找一款轻量的Web富文本编辑器,那么wedit会是你不错的选择。
模块加载名称:wedit
跟那些过往的编辑器一样,你需要放置一个标签(一般为 textarea 文本域)作为编辑器的目标元素,然后调用 wedit.build('id') 即可,如下所示:
<textarea id="demo" style="display: none;"></textarea>
<script>
wui.use('wedit', function(){
  var wedit = wui.wedit;
  wedit.build('demo'); //建立编辑器
});
</script>
然后你会看到一个如下模样(部分工具Bar未配置出来),它跟wui的所有存在体一样,兼容IE6/7以外的全部浏览器。 wedit提供了相当精简的方法,如下:
方法名 描述
var index = wedit.build(id, options) 用于建立编辑器的核心方法
index:即该方法返回的索引
参数 id: 实例元素(一般为 textarea )的 id 值
参数 options:编辑器的可配置项,下文会做进一步介绍
wedit.set(options) 设置编辑器的全局属性
即上述 build 方法的 options
wedit.getContent(index) 获得编辑器的内容
参数 index: 即执行 wedit.build 返回的值
wedit.getText(index) 获得编辑器的纯文本内容
参数 index: 同上
wedit.sync(index) 用于同步编辑器内容到 textarea(一般用于异步提交)
参数 index: 同上
wedit.getSelection(index) 获取编辑器选中的文本
参数 index: 同上
在建立编辑器的方法 wedit.build(id, options) 的第二个参数(options)中,允许我们对编辑器进行一些设置,如:
wedit.build('id', {
  height: 180 //设置编辑器高度
});
options可提供支持的参数如下表
属性 类型 描述
tool Array 重新定制编辑器工具栏,如: tool: ['link', 'unlink', 'face']
hideTool Array 不显示编辑器工具栏,一般用于隐藏默认配置的工具bar
height Number 设定编辑器的初始高度
uploadImage Object 设定图片上传接口,如:uploadImage: {url: '/upload/', type: 'post'}
通过下述方式可自定义编辑器的工具Bar
wedit.build('id', {
  tool: ['left', 'center', 'right', '|', 'face']
});
目前wedit可选的Bar有(顺序可以自由排列):
tool: [
  'strong' //加粗
  ,'italic' //斜体
  ,'underline' //下划线
  ,'del' //删除线

  ,'|' //分割线

  ,'left' //左对齐
  ,'center' //居中对齐
  ,'right' //右对齐
  ,'link' //超链接
  ,'unlink' //清除链接
  ,'face' //表情
  ,'image' //插入图片
  ,'help' //帮助
]
wedit提供了向编辑器插入图片的支持,前提是配置了 uploadImage,如:
wedit.set({
  uploadImage: {
    url: '' //接口url
    ,type: '' //默认post
  }
});
//注意:wedit.set 一定要放在 build 前面,否则配置全局接口将无效。
wedit.build('demo'); //建立编辑器
也就是说wedit并不提供服务端的图片接受,但你需要在图片上传成功后对wedit返回如下格式的JSON信息:
{
  "code": 0 //0表示成功,其它失败
  ,"msg": "" //提示信息 //一般上传失败后返回
  ,"data": {
    "src": "图片路径"
    ,"title": "图片名称" //可选
  }
}
© 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile