easyui编辑器(kindeditor-4.1.10)

//1  重写kindedit    -建一个js文件 easyui_kindeditor.js

(function ($, K) {

if (!K)

throw "KindEditor未定义!";

function create(target) {

var opts = $.data(target, ‘kindeditor‘).options;

var editor = K.create(target, opts);

$.data(target, ‘kindeditor‘).options.editor = editor;

}

$.fn.kindeditor = function (options, param) {

if (typeof options == ‘string‘) {

var method = $.fn.kindeditor.methods[options];

if (method) {

return method(this, param);

}

}

options = options || {};

return this.each(function () {

var state = $.data(this, ‘kindeditor‘);

if (state) {

$.extend(state.options, options);

} else {

state = $.data(this, ‘kindeditor‘, {

options : $.extend({}, $.fn.kindeditor.defaults, $.fn.kindeditor.parseOptions(this), options)

});

}

create(this);

});

};

$.fn.kindeditor.parseOptions = function (target) {

return $.extend({}, $.parser.parseOptions(target, []));

};

$.fn.kindeditor.methods = {

editor : function (jq) {

return $.data(jq[0], ‘kindeditor‘).options.editor;

}

};

$.fn.kindeditor.defaults = {

resizeType : 1,

allowPreviewEmoticons : false,

allowImageUpload : false,

uploadJson : ‘${ctx}/wxMessage/uploadImg.yhtml‘,

fileManagerJson : ‘${ctx}/wxMessage/uploadImg.yhtml‘,

items : [

‘fontname‘, ‘fontsize‘, ‘|‘, ‘textcolor‘, ‘bgcolor‘, ‘bold‘, ‘italic‘, ‘underline‘,

‘removeformat‘, ‘|‘, ‘justifyleft‘, ‘justifycenter‘, ‘justifyright‘, ‘insertorderedlist‘,

‘insertunorderedlist‘, ‘|‘, ‘emoticons‘, ‘image‘, ‘link‘,‘fullscreen‘,‘wordpaste‘,‘source‘],

afterChange:function(){

this.sync();//这个是必须的,如果你要覆盖afterChange事件的话,请记得最好把这句加上.

}

};

$.parser.plugins.push("kindeditor");

})(jQuery, KindEditor);

//2   在页面引入  必要的文件   ——kindeditor-4.1.10可以在官方上下载到

<link href="../kindeditor-4.1.10/examples/index.css" rel="stylesheet" />

<script src="../kindeditor-4.1.10/kindeditor.js"></script>

<script src="../kindeditor-4.1.10/kindeditor-all.js"></script>

<script src="../kindeditor-4.1.10/kindeditor-all-min.js"></script>

<script src="../kindeditor-4.1.10/kindeditor-min.js"></script>

<script src="../kindeditor-4.1.10/lang/zh_CN.js"></script>

<script type="text/javascript"

src="<%=request.getContextPath()%>/js/easyui_kindeditor.js"></script>

// 3   页面上用

<input id="content" name="content" class="easyui-kindeditor" style="width: 90%; height: 140px;visibility: hidden;" options="validType:‘length[0,500]‘" />

//编辑器

<script type="text/javascript">

var editor;

KindEditor.ready(function (K) {

editor = K.create(‘textarea[name="content"]‘, {

allowFileManager: true,

resizeType: 1,

allowPreviewEmoticons: false,

items: [

‘fontname‘, ‘fontsize‘, ‘|‘, ‘forecolor‘, ‘hilitecolor‘, ‘bold‘, ‘italic‘, ‘underline‘,

‘removeformat‘, ‘|‘, ‘justifyleft‘, ‘justifycenter‘, ‘justifyright‘, ‘insertorderedlist‘,

‘insertunorderedlist‘, ‘|‘, ‘emoticons‘, ‘image‘, ‘link‘]

});

});

</script>

// 4   dataGrid 修改时  赋值  编辑框只能手动赋值    row-选中行的数据    content 编辑器id   填充内容row.content     KindEditor是我们上面重写kindedit是定义的名字

function editWxSendMessage(row){

$("#win").window(‘open‘);

$("#wxsendmessageInfoForm").form(‘clear‘);

$("#wxsendmessageInfoForm").form("load", row);

KindEditor.html(‘#content‘, row.content);

}

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-25 00:44:55

easyui编辑器(kindeditor-4.1.10)的相关文章

EasyUI在window中使用kindeditor 4.1.10在IE9中不能回显、获得焦点编辑的问题

描述 :kindeditor4.1.10版本是当前最新的版本,在浏览器兼容性和功能方面都是值得一赞的,在开发中能方便快捷的满足一些开发需求. 问题 :  问题总是有的.  在使用过程中,遇到EasyUI的window窗口中使用kindeditor编辑框,点击打开之后,在IE9中不能回显(修改功能).获得焦点编辑. 其他IE版本.火狐.chrome等常用浏览器都没问题. 问题原因 : 经过跟踪调试测试,初步了解问题原因在于,页面EasyUI和kindeditor样式加载顺序不一致,对应的ID选择器

KindEditor 4.1.10 (2013-11-23)首行空格不能显示在编辑器内

KindEditor版本: KindEditor 4.1.10 (2013-11-23) 一.BUG再现步骤: 1.文章前面插入二个全角空格作为缩进,因为并非所有段落都有缩进故不采用 CSS 的 text-indent. 2.发表后全角空格不存在,即使在编辑时转入源代码状态空格也会丢失. 二.修复方案: 在KindEditor.js中找到代码: var re = /(\s*)<(\/)?([\w\-:]+)((?:\s+|(?:\s+[\w\-:]+)|(?:\s+[\w\-:]+=[^\s&quo

富文本编辑器kindeditor配置

<!--富文本编辑器kindeditor配置↓ --> <link type="text/css" rel="stylesheet" href="kindeditor/themes/default/default.css" /> <link rel="stylesheet" href="kindeditor/plugins/code/prettify.css" /> &l

asp.net mvc 文本编辑器 kindeditor

他们的官网:http://kindeditor.net/demo.php 让我们最快的方式用起来吧. 首先我们先拉入他们官网下载下来的文件吧.下载地址 我们需要的文件夹不多,拉入以上的就可以了,其他的一些demo啥的就不拉入了,省得打包,包很大. 然后就可以开始用用了, views建立个界面 写入html <textarea id="editor_edit" name="content" style="width:auto;height:300px;

富文本编辑器KindEditor的使用

       富文本编辑器KindEditor,是一种可内嵌于浏览器,所见即所得的文本编辑器.它是一种解决可一般的用户不同html等网页标记但是需要在网页上设置字体的颜色.大小.样式等信息问题一个文本编辑器 第一步 引入三个文件(一个css,两个js) 第二步 创建textarea控件 第三步 创建初始化方法createEditor (1) (2)select代表textarea对象,return返回一个富文本编辑对象,也就是(1)中的itemAddEditor (3) 至此初始化完成 当需要提

将Ecshop后台fckeditor升级更改为kindeditor 4.1.10编辑器

ecshop在win8部分电脑上,不管用任何浏览器,都打不开,即使升级到最新版本都不行,问题应该吃在fckeditor兼容上.fckeditor 很久未升级,换掉该编辑器是最佳方法 第一步:下载kindeditor,下载地址为:http://www.kindsoft.net/down.php 下载最新版本的,现在是4.1.10 下载之后,把里面不要的语言和演示文件删除,有,asp.asp.net jsp和examples四个文件夹删掉. 把文件夹改名为:kindeditor,然后上传到根目录in

在线编辑器KindEditor的使用

1.官网下载:点击进入 2.解压后目录说明 ├── asp asp示例 ├── asp.net asp.net示例 ├── attached 空文件夹,放置关联文件attached ├── examples HTML示例 ├── jsp java示例 ├── kindeditor-all-min.js 全部JS(压缩) ├── kindeditor-all.js 全部JS(未压缩) ├── kindeditor-min.js 仅KindEditor JS(压缩)不包含plugins的JS代码 ├

django中富文本编辑器KindEditor的基本使用

1.简介: KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框. KindEditor 使用 JavaScript 编写,可以无缝地与 Java..NET.PHP.ASP 等程序集成,比较适合在 CMS.商城.论坛.博客.Wiki.电子邮件等互联网应用上使用 2.主要特点: 快速:体积小,加载速度快 开源:开放源代码,高水平,高品质 底层:内

EasyUI集成Kindeditor使用

在实际的项目中,我们需要在项目中集成富文本编辑器,而kindeditor作为一款优良的编辑器,在项目中或多或少都会用到! 实际效果图 使用方法: 1.首先下载Kindeditor编辑器,我这里使用的是4.1.10版本.下载地址:http://kindeditor.net/down.php: 2.在所需页面上引入Kindeditor相关js文件(注意引入路径): <!--引入引入kindeditor编辑器相关文件--><link rel="stylesheet" hre