搞了很久的KindEditor

原创 2013年12月03日 18:03:03

虽然KindEditor提供了将textarea同步到KindEditor的sync()方法,但是在实际的应用中还是在这个地方遇到了一点问题,

最终的解决方法是:将KindEditor在页面加载时就加载,源码是这样:

在页面初始化
<script>
        $(function () {
            kindEditorInit();
        });
    </script>
在js文件中写实现
var editor;

function kindEditorInit() {
    $.post('/SubForm/GetQuestionListFromDB'/*, { subFormID: 2 }*/, function (data) {
        editor.html(data);
    });

    KindEditor.ready(function (k) {
        editor = k.create('#questionEditor', {
            width: 1620,
            height: 690,
            fontSizeTable: ['9px', '10px', '12px', '14px', '16px', '18px', '24px', '32px'],
            items: [
                'undo', 'redo', '|',
                'cut', 'copy', 'paste', 'preview', '|',
                'plainpaste', 'wordpaste', '|',
                'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', '|',
                'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', '|',
                'subscript', 'superscript',
                'quickformat', 'selectall', '|',
                'fullscreen', '|',
                'strikethrough', 'removeformat', '|',
                'table', 'hr', 'emoticons', 'pagebreak'
            ],
            resizeType: 0,
            afterCreate: function () {
                var self = this;
                //self.sync();
                k.ctrl(document, 13, function () {
                    self.sync();
                    k('textarea[name=questionEditor]')[0].submit();
                });
                k.ctrl(self.edit.doc, 13, function () {
                    self.sync();
                    k('textarea[name=questionEditor]')[0].submit();
                });
            },
            afterChange: function () {
            },
            afertBlur: function () {
                var self = this;
                //self.sync();
                k.ctrl(document, 13, function () {
                    self.sync();
                    k('textarea[name=questionEditor]')[0].submit();
                });
                k.ctrl(self.edit.doc, 13, function () {
                    self.sync();
                    k('textarea[name=questionEditor]')[0].submit();
                });
            }
        });
    });
}
html部分:
<div>
                <form id="questionEditorForm">
                    <textarea id="questionEditor" name="content" style="width: 1620px; height: 690px; background-color: #FFFFFF; display: block">
                    </textarea>
                    <div style="margin: 10px 0">
                        <a href="javascript:editQuestionList()" class="easyui-linkbutton">编辑</a>
                        <a href="javascript:saveQuestionList()" class="easyui-linkbutton">保存</a>
                        <a href="javascript:cancelQuestionList()" class="easyui-linkbutton">退出</a>
                    </div>
                </form>
            </div>






kindeditor4.1.10图片上传配置及使用说明

1.1 点击图片上传按钮 1.2 弹出选择框,可以从已上传的图片中选择上传,也可以从本地上传。 1.3选择从图片空间上传,文件夹模式浏览所有已上传的图片 1.4从本地选择图片上传 1...
  • u010257671
  • u010257671
  • 2015年09月18日 21:30
  • 23743

kindeditor的使用方法简单介绍

1 编辑器选用之初我在大二下学期的时候想做一个基于JSP的类似于qq空间的的项目,不过只是简单实现了日志,说说,留言板,以及相册模块中的图片上传与显示功能,做的很水,当时唯一觉得还过得去的地方大概就是...
  • sushauai
  • sushauai
  • 2016年03月23日 01:05
  • 986

java常用的编辑器之kindeditor

先上图,没图差不多就看不下去的,我懂! 来个毛爷的,看着好像就能发财一样。。。。 首先下载必要的文件和jar包:http://download.csdn.net/detail/xb...
  • xb12369
  • xb12369
  • 2016年05月11日 17:17
  • 2268

kindeditor上传图片自动压缩过大的图片

kindeditor上传图片时自动将过大(像素以及图片长宽)的图片进行压缩,只需要在kindeditor中upload_json.ashx里面修改! /**  * KindEditor A...
  • lijunlinlijunlin
  • lijunlinlijunlin
  • 2015年04月15日 00:39
  • 2325

Kindeditor上传失败问题解决

(问题关键词: kindeditor 上传图片失败  kindeditor上传图片成功,但是页面上却提示失败  kindeditor得到Json正确,确提示失败) 今天又遇到了一个比较无奈的问题,...
  • sinat_32873711
  • sinat_32873711
  • 2017年03月26日 00:50
  • 1431

SpringMVC+KindEditor在线编辑器之文件上传

最近几个项目都要用到在线编辑器,由于之前做在线编辑器都只在php上,对于用java尤其是springmvc框架时,似乎并不如PHP那么简单,搜集了很多博文和资料,全部都不能达到效果,最后在参考各种资料...
  • u012131769
  • u012131769
  • 2015年08月12日 00:11
  • 3536

KindEditor 4 输入框限定字数

jquery 1.6.4   html 代码: KindEditor 4 输入框限定字数 //KindEditor $(function() { var edito...
  • myweishanli
  • myweishanli
  • 2014年05月14日 15:00
  • 2109

如何在自己的网站中使用KindEditor

1、什么是 KindEditorKindEditor 是一套开源的在线 HTML 编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(t...
  • u014695532
  • u014695532
  • 2016年05月19日 12:21
  • 1411

KindEditor基本使用

kindeidtor使用手册:http://download.csdn.net/detail/senssic/8272097 1.创建并使用定制item 这个items所配置的就是kindeditor...
  • Senssic
  • Senssic
  • 2014年12月18日 08:53
  • 875

如何自定义kindeditor编辑器的工具栏items即去除不必要的工具栏或者保留部分工具栏

kindeditor编辑器的工具栏主要是指编辑器输入框上方的那些可以操作的菜单,默认情况下编辑器是给予了所有的工具栏。针对不同的用户,不同的项目,不同的环境,可能就需要保留部分工具栏。那么我们应该如何...
  • HJ850126
  • HJ850126
  • 2015年01月21日 10:12
  • 12318
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:搞了很久的KindEditor
举报原因:
原因补充:

(最多只允许输入30个字)