wangEditer 总结回顾
来源:互联网 发布:网络售彩最新消息官方 编辑:程序博客网 时间:2024/06/07 06:55
自己从网上下载了个富文本编辑器,有layui的还有wangEditer的,但是layui的感觉有点问题,就总结一下自己引入引入的wangEditer的富文本编辑器吧,当做个人总结以后用,基本的。
从官网下载wangEditer源码集成
然后在项目里引入样式表和js文件
下面是完整的页面,还有自定义的富文本编辑器的选项,轻量级的富文本编辑器感觉应付一般的需要时够了
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="/css/wangEditor.min.css">
<script type="text/javascript" src="/js/lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/js/wangEditor.min.js"></script>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
Test wangEditor 的富文本编辑器
<div style="height:400px;max-height:500px;">
<div id="div1" style="height:400px;max-height:500px;">
<p></p>
</div>
</div>
<button id="btn1">获取内容</button>
<!--这里引用jquery和wangEditor.js-->
</body>
<script type="text/javascript">
// 获取元素
var div = $("#div1");
// 生成编辑器
var editor = new wangEditor(div);
editor.config.menus = [
'source',
'|',
'bold',
'underline',
'italic',
'strikethrough',
'eraser',
'forecolor',
'bgcolor',
'|',
'quote',
'fontfamily',
'fontsize',
'head',
'unorderlist',
'orderlist',
'alignleft',
'aligncenter',
'alignright',
'|',
'link',
'unlink',
'table',
'emotion',
'|',
'img',
'video',
'location',
'insertcode',
'|',
'undo',
'redo',
'fullscreen'
];
editor.create();
editor.$txt.html('<p>要初始化的内容</p>');
$('#btn1').click(function () {
// 获取编辑器区域完整html代码
// editor.$txt.html('<p>要初始化的内容</p>');
var html = editor.$txt.html();
// 获取编辑器纯文本内容
// var text = editor.$txt.text();
// // 获取格式化后的纯文本
// var formatText = editor.$txt.formatText();
});
</script>
</html>
- wangEditer 总结回顾
- 回顾总结
- 寒假学习回顾总结
- 项目升级 回顾总结
- NSN sprint904 总结回顾
- 回顾课程总结
- 及时总结,适时回顾
- AJAX回顾基础知识总结
- Ojective-C 回顾、总结
- seo回顾,总结
- 自学考试回顾总结
- 2014,回顾总结
- 软件工程的回顾总结
- CCC 2015 总结&回顾
- Java 基础知识总结回顾
- 2015回顾与总结
- GCT总结回顾战略
- 2015回顾总结
- C语言数组小程序
- java学习笔记
- 嵌入式系统的组成
- Android中使用WebView显示网页
- 新闻列表中如何让前几篇标题颜色和其他标题颜色不一样?
- wangEditer 总结回顾
- SQLServer常用的字符串函数
- pthread_cond_broadcast使用示例
- acm博弈论讲解
- Java利用Zxing生成二维码
- makefile(一)
- Google Protobuf
- Class类 究竟怎么用
- springMVC小结