参考:http://www.tinymce.com/
http://blog.csdn.net/chenloveyue/article/details/7039913
版本: TinyMce 4.X
1. 安装
2. Demo
<html>
<head><title></title>
<!-- tinyMCE -->
<script language="javascript" type="text/javascript" src="./tinymce/tinymce.min.js"></script>
<script src="/opt/app/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
<script>
function verifyImgs(){
var isBig=false;
var imgs=tinymce.activeEditor.$('img');
console.log("========imgs:"+imgs.length);
imgs.each(function(){
if ($(this).attr("width")>700){
isBig=true;
}
});
if(isBig){
alert("图片宽度不能大于700px,请重新设置图片大小:)");
}
}
</script>
<script language="javascript" type="text/javascript">
tinymce.init({
</script>
<!-- /tinyMCE -->
</head>
<body>
the tinymce:
<form>
<textarea
<a href="javascript:verifyImgs()" > Showme</a>
</form>
</body>
</html>
3. 读取编辑框内容、设定编辑框内容
参考:
5. 图片
//判断图片大小,防止图片撑破格式
function verifyImgs(){
var isBig=false;
var imgs=tinymce.activeEditor.$('img');
console.log("========imgs:"+imgs.length);
imgs.each(function(){
if ($(this).attr("width")>700){
isBig=true;
}
});
if(isBig){
alert("图片宽度不能大于700px,请重新设置图片大小:)");
}
}
6.预览功能其实是用<iframe>实现,src来源为src=";javascript:;,....",省略号部分为整体网页HTML代码UTF8编码后内容,可F12查看tinymce预览功能显示的源码,不推荐不编码直接显示内容。
7. 模板功能
参考:http://www.tinymce.com/wiki.php/Plugin:template