8000 GitHub - Heller-HE/wangEditor: wangEditor —— 轻量级web富文本框
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Heller-HE/wangEditor

 
 

Repository files navigation

  1. 本次更新说明 === 更新时间为:2015-03-30,更新版本为1.3版。本次更新的主要内容:
  • 对代码做了一次彻底的重构,更加面向对象的编程;
  • 重构UI界面,增加易用性;
  • 增加插入简洁代码的功能;
  • 支持一个页面生成多个编辑器;
  • 增加上传图片功能;
  1. 介绍 === wangEditor——轻量级web富文本编辑器,配置方便,使用简单。支持IE7+浏览器。

  1. 如何使用? === 引用wangEditor.css、jquery.js和wangEditor.js之后,一行代码即可把textarea变为富文本框,简单易用。
$(function(){
	$('#textarea1').wangEditor();

	//想要获取编辑框的内容,只需要取得textarea的内容即可
	var html = $('#textarea1').val();
});

如果想要在一个页面创建多个富文本编辑器,也很简单(源码中demo-multi-text.html页面有演示)。

//先在html中定义两个textarea,然后:
$(function(){
    $('#textarea1').wangEditor();
    $('#textarea2').wangEditor();
});

在基本应用的基础上,wangEditor还支持自定义配置:

$('#textarea1').wangEditor({
	'$initContent': ...    //配置要初始化的内容
	'menuConfig': ...      //配置要显示的菜单(其他的隐藏)
	'onchange': ...        //配置onchange事件
	'uploadUrl': ...       //配置上传图片的Url
});

具体的配置说明,可下载源码,源码中相应的demo页面有详细使用说明。

  • demo.html (demo演示)
  • demo-basic.html (基本配置说明)
  • demo-initContent.html (配置初始化时要显示的内容)
  • demo-menuConfig.html (配置要显示的菜单按钮,其他的隐藏)
  • demo-onchange.html (配置onchange事件)
  • demo-uploadImg.html (配置图片上传)
  1. 自定义主题颜色 === wangEditor默认的主题颜色为深灰色,你也可以自定义符合网站主题风格的颜色。
    找到css/wangEditor-1.3.less文件,搜索“begin:颜色配置”关键字,然后你就可以找到wangEditor的所有颜色配置。在这里自由发挥的修改吧!
    最后不要忘记,把less编译成css
//-----------------------------------begin:颜色配置-----------------------------------

//开发者可自定义以下颜色。通过定义颜色,可实现不同的主题风格。

@editor-container-border-color:#ccc;        //整个编辑器外边框的颜色

@fore-color:#505050;                        //默认字体颜色、按钮颜色
@reverse-color:#fff;                        //反转后的字体颜色、按钮颜色(如按钮tooltip中的字体颜色)
@selected-bg-color:#aec5e6;                 //按钮选中时的背景色

@btn-container-bg-color:#f3f3f3;            //菜单按钮容器的背景色
@btn-container-border-color:#d2d4d1;        //菜单按钮容器的边框颜色

@txt-container-bg-color:#dfdfdf;            //编辑框容器的背景色
@txt-border-color:#a8aaa7;                  //编辑框边框颜色
@txt-bg-color:#fff;                         //编辑框背景色
//-----------------------------------end:颜色配置-----------------------------------
  1. 不喜欢word风格? === wangEditor默认的编辑风格类似于 office word 的样子。如果不喜欢,只需要注释掉一下less中的两个两个样式即可。
    找到css/wangEditor-1.3.less文件,搜索“begin: word样式”关键字,然后将其中的内容注释掉即可。
    最后不要忘记,把less编译成css
//---------begin: word样式-----------
margin:20px 40px; 
border:1px solid @txt-border-color;
//---------end: word样式-----------
  1. 交流 === 交流QQ群:164999061
    二次开发联系:wangfupeng1988#163.com(#->@)

About

wangEditor —— 轻量级web富文本框

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 63.2%
  • CSS 19.6%
  • HTML 17.2%
0