TinyMce 使用



参考:http://www.tinymce.com/    官网

         http://www.tinymce.com/wiki.php    wiki 尤其第二项Configuration尤为有用

   http://blog.csdn.net/chenloveyue/article/details/7039913     相关配置文件中文注释

版本: TinyMce 4.X 


 

1. 安装

    下载解压缩即可

2. Demo

    


<html>

<head><title></title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- 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({

     selector: "textarea",

    forced_root_block: "",

    theme: "modern",

     language : "zh_CN",

    width: 700,

    height: 600,

    resize: "both",

    plugins: [

         "advlist autolink link image lists charmap preview hr anchor pagebreak",

         "searchreplace visualblocks visualchars code fullscreen insertdatetime media nonbreaking",

         "save table contextmenu directionality emoticons template paste textcolor"

   ],

   content_css: "./tinymce/skins/lightgray/content.min.css",

   toolbar: "undo redo | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | link image preview fullpage | forecolor backcolor emoticons | formatselect | fontselect | fontsizeselect",

   style_formats: [

        {title: 'Bold text', inline: 'b'},

        {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},

        {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},

        {title: 'Example 1', inline: 'span', classes: 'example1'},

        {title: 'Example 2', inline: 'span', classes: 'example2'},

        {title: 'Table styles'},

        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}

    ]

 }); 

</script>



<!-- /tinyMCE --> 


</head>

<body>


the tinymce:

<form>


<textarea  name="content" id="content"   style="width:700px; height:200px;">  </textarea>

<a href="javascript:verifyImgs()" > Showme</a> 

</form>


</body>

</html> 


3. 读取编辑框内容、设定编辑框内容

参考: http://www.tinymce.com/wiki.php/api4:method.tinymce.Editor.setContent

         http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.setContent

 

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值