怎么在easyui框架增加富文本编辑器

1.首先，想在项目中引入相关的jar包

2.html页面中加入相关的引用

<!-- kindeditor -->

<script type="text/javascript"

th:src="@{/lib/kindeditor/kindeditor.js}"></script>

<script type="text/javascript"

th:src="@{/lib/kindeditor/lang/zh_CN.js}"></script>

<th>公告内容:</th>

<td>

<textarea id="detail" name="detail" style="width:100%height:200px">

</textarea>

</td>

3.js文件中的方法的处理

//介绍富文本编辑器

KindEditor.ready(function(K) {

introEditor = K.create("#detail", {

width : 100,

minHeight : '300px',

uploadJson : parent.baseUrl + "file/kindeditorUploadImg",

items : [ 'source', '|', 'undo', 'redo', '|', 'preview', 'print',

'template', 'code', 'cut', 'copy', 'paste', 'plainpaste',

'wordpaste', '|', 'justifyleft', 'justifycenter',

'justifyright', 'justifyfull', 'insertorderedlist',

'insertunorderedlist', 'indent', 'outdent', 'subscript',

'superscript', 'clearhtml', 'quickformat', 'selectall',

'|', 'formatblock', 'fontname', 'fontsize', '|',

'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',

'strikethrough', 'lineheight', 'removeformat', '|',

'image', 'flash', 'media', 'insertfile', 'table', 'hr',

'pagebreak', 'anchor', 'link', 'unlink', '|', 'about',

'fullscreen' ],

})

})

首先，为需要编辑的列设置编辑器

例如：

{field:'F1',title:'编辑咧列',width:100,align:'center',

editor: {

type: 'numberbox',

options: {

min:1

}

}

}

第二步，按钮点击事件中添加代码

$('#dg').datagrid('appendRow',{

F1: '新名称'

})

三，开启编辑列

$('#dg').datagrid("beginEdit", i)//i为需要编辑的行号

定义一个变量存放正在编辑的行，通过updateRow这个方法从新执行formatter这个方法通过这个变量判断选择哪个就可以

field: 'operate',

title: ' *** 作',

//title: $res_entry('SCB.label.status'),

width: 100,

formatter: function(value, rowData, rowIndex){

var operate = '<a href="javascript:void(0)" onclick="modify(' + rowIndex + ')">修改</a>'

if (editorRow != -1 editorRow == rowIndex) {

operate = '<a href="javascript:void(0)" onclick="saveEdit(' + rowIndex + ')">保存</a>' +

'<a href="javascript:void(0)" onclick="cancelEdit(' +

rowIndex +

')">取消</a>'

}

return operate

}

/**

* 修改

*/

function modify(index){

//判断是否只有一行在修改

var num = POSStockRowTable.datagrid('getSelections')

if (editorRow == -1) {

//当没有数据编辑时则进行编辑

//打开编辑器进行编辑

POSStockRowTable.datagrid('beginEdit', index)

//将当前编辑的行号给记录在编辑的行变量中

editorRow = index

//更新当前编辑行的内容，用于改变 *** 作的数据 operate 列值

POSStockRowTable.datagrid('updateRow', {

index: index,

row: {

operate: ""

},

})

}

else {

//当有数据编辑时提示是否保存

$.messager.confirm('提示', '是否保存正在修改的数据', function(btn2){

//点击确定则保存,否则取消

if (btn2) {

//存放正在编辑的行号

var index = editorRow

editorRow = -1

POSStockRowTable.datagrid('endEdit', index)

}

})

}

}

---