KindEditor编辑器的使用

本文详细介绍了如何将kindeditor与Rails3结合使用,实现了一个灵活且功能丰富的富文本编辑器。包括下载相关资源、配置编辑器的基本参数、设置上传文件的路径以及在Rails3页面中调用编辑器的方法。特别关注了如何处理图片上传和编辑器的自定义配置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

下载地址:http://www.kindsoft.net/down.php,版本用的是kindeditor-4.1.5.zip,使用的开发平台是rails3


_editor.rhtml页面代码

<script charset="utf-8"src="/kindeditor/kindeditor.js"></script>

<script charset="utf-8"src="/kindeditor/lang/zh_CN.js"></script>

<script>

 var editor;

 KindEditor.ready(function(K) {

    editor = K.create('#<%=id%>', {

         resizeType : 1,

         width:"<%= width%>px",

         height:"<%= height%>px",

         imageSizeLimit:"4MB",

         items:[

              'undo', 'redo', '|', 'fontname','fontsize', '|', 'forecolor', 'hilitecolor', 'bold',

             'italic', 'underline',  '|', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',

             'justifyfull','insertorderedlist', 'insertunorderedlist', '|', 'quickformat', 'removeformat','|',

              'image', 'multiimage',

             'media','table', 'emoticons','link'

         ],

         uploadJson : '/articles/upload_image',

         afterCreate : function() {

             var self = this;

             K.ctrl(document, 13, function() {

                 self.sync();

                K('form[name=Form1]')[0].submit();

             });

             K.ctrl(self.edit.doc, 13,function() {

                 self.sync();

                K('form[name=Form1]')[0].submit();

             });

        },

         afterBlur: function(){this.sync();}

    });

 });

 function get_content()

 {

   return editor.html();

 }

 function set_content(html)

 {

     editor.html(html);

 }

</script>

注意的地方:

uploadJson : '/articles/upload_image'   这个是上传得文件(包括图片、视频、其它合法文件的上传action)

imageSizeLimit:"4MB",表示图片的限制大小

在其它页面的调用方法

<%=render "editor",:id=>"article_article_content",:width=>800,:height=>400%>





hanwenyu


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值