KindEditor使用

墨蓝 2022-05-16 10:47 174阅读 0赞

### KindEditor ###

富文本编辑器  
纯JS开发，与后台语言没有关系  
此外，还有UEditor、CKEditor等编辑器

官网  
[http://kindeditor.net/demo.php][http_kindeditor.net_demo.php]

### 使用方式 ###

引入CSS、JS文件  
语言包，默认是中文，可加可不加

<link href="/js/kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>

在表单form元素中 添加一个textarea控件

<tr>
        <td>商品描述:</td>
        <td>
            <textarea style="width:800px;height:300px;visibility:hidden;" name="desc"></textarea>
        </td>
    </tr>

### 实现原理 ###

Textarea，隐藏的，不可见  
富文本编辑器，可见的

富文本编辑器，不能随着表单提交  
提交表单时，把数据内容，存放到Textarea里面  
随着表单一起提交

初始化富文本编辑器  
页面加载完成之后，初始化编辑器  
此时，从textarea里面读取数据，展示到页面上

数据内容  
实际上存储的是带HTML标签的文本  
保存到存到数据库，是整个带HTML标签的文本

提交重置

<div style="padding:5px">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">重置</a>
    </div>

### JS代码 ###

<script type="text/javascript"> var itemAddEditor ; //页面初始化完毕后执行此方法 $(function(){ //创建富文本编辑器 itemAddEditor = TAOTAO.createEditor("#itemAddForm [name=desc]"); //初始化类目选择和图片上传器 TAOTAO.init({fun:function(node){ //根据商品的分类id取商品 的规格模板，生成规格信息。第四天内容。 //TAOTAO.changeItemParam(node, "itemAddForm"); }}); }); //提交表单 function submitForm(){ //有效性验证 if(!$('#itemAddForm').form('validate')){ $.messager.alert('提示','表单还未填写完成!'); return ; } //取商品价格，单位为“分” $("#itemAddForm [name=price]").val(eval($("#itemAddForm [name=priceView]").val()) * 100); //同步文本框中的商品描述 itemAddEditor.sync(); //取商品的规格 /* var paramJson = []; $("#itemAddForm .params li").each(function(i,e){ var trs = $(e).find("tr"); var group = trs.eq(0).text(); var ps = []; for(var i = 1;i<trs.length;i++){ var tr = trs.eq(i); ps.push({ "k" : $.trim(tr.find("td").eq(0).find("span").text()), "v" : $.trim(tr.find("input").val()) }); } paramJson.push({ "group" : group, "params": ps }); }); //把json对象转换成字符串 paramJson = JSON.stringify(paramJson); $("#itemAddForm [name=itemParams]").val(paramJson); */ //ajax的post方式提交表单 //$("#itemAddForm").serialize()将表单序列号为key-value形式的字符串 alert($("#itemAddForm").serialize()); $.post("/item/save",$("#itemAddForm").serialize(), function(data){ if(data.status == 200){ $.messager.alert('提示','新增商品成功!'); } }); } function clearForm(){ $('#itemAddForm').form('reset'); itemAddEditor.html(''); } </script>

页面初始化完成  
执行初始化编辑器的方法

itemAddEditor  
保存创建的编辑器

TAOTAO.createEditor(“\#itemAddForm \[name=desc\]”);  
创建编辑器，并返回

createEditor : function(select){
        return KindEditor.create(select, TT.kingEditorParams);
    }

KindEditor  
编辑器的JS提供的对象  
调用create方法，创建一个编辑器

Select  
绑定的页面textarea控件  
作为编辑器的初始化控件，jQuery的name选择器

TT.kingEditorParams  
指定图片上传的参数信息

// 编辑器参数
    kingEditorParams : {
        //指定上传文件参数名称
        filePostName  : "uploadFile",
        //指定上传文件请求的url。
        uploadJson : '/pic/upload',
        //上传类型，分别为image、flash、media、file
        dir : "image"
    }

itemAddEditor.sync();  
表单提交之前，把编辑器的内容  
同步到textarea控件

[http_kindeditor.net_demo.php]: http://kindeditor.net/demo.php

发表评论取消回复

表情：

评论列表（有 0 条评论，174人围观）

还没有评论，来说两句吧...

相关阅读

相关 kindeditor 如何使用

简单使用方法 1. 解压文件，并把所有文件上传到您的网站程序目录下，例如：http://你的域名/editor/。 2. 要添加编辑器的页面头部添加以下代码，id为text

谁践踏了优雅/ 2022年08月27日 01:13/ 0 赞/ 186 阅读

相关 Kindeditor使用

kindeditor编辑器，他上传后需要接收一个content-type 为 text/html; charset=UTF-8类型的参数。如果我们直接使用@Respons

古城微笑少年丶/ 2022年08月21日 09:41/ 0 赞/ 167 阅读

相关富文本框KindEditor的使用技巧

富文本框KindEditor的使用技巧 > 最近在项目中经常遇到使用富文本框的情况，当然我们所接触的富文本.框有很多，我个人还是比较偏向于KE(KindEditor)),

悠悠/ 2022年08月21日 07:58/ 0 赞/ 200 阅读

相关 Asp.net MVC使用KindEditor4

http://blog.csdn.net/dyllove98/article/details/9070125 最近转入Asp.net MVC开发，WebFor

Myth丶恋晨/ 2022年08月21日 03:30/ 0 赞/ 171 阅读

相关 kindeditor在Ext的使用

在 [http://kindeditor.net/][http_kindeditor.net] 下载 kindeditor。可以自己查阅 kindeditor的使用说明：[ht

你的名字/ 2022年08月06日 10:05/ 0 赞/ 205 阅读

相关 kindEditor编辑器的使用

1.在官网下载 [http://kindeditor.net/down.php][http_kindeditor.net_down.php] 2.导入必须的js

川长思鸟来/ 2022年05月17日 07:29/ 0 赞/ 270 阅读

相关 KindEditor使用

KindEditor 富文本编辑器纯JS开发，与后台语言没有关系此外，还有UEditor、CKEditor等编辑器官网 [http://kindedi

墨蓝/ 2022年05月16日 10:47/ 0 赞/ 175 阅读

相关 KindEditor 编辑器

KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器

偏执的太偏执、/ 2022年04月22日 03:56/ 0 赞/ 252 阅读

相关 jsp如何使用kindeditor

1.[https://github.com/kindsoft/kindeditor][https_github.com_kindsoft_kindeditor] 下载kinde

蔚落/ 2022年03月09日 09:44/ 0 赞/ 212 阅读

相关 kindeditor简单使用

一、下载编辑器下载KindEditor最新版本(本版本为4.1.10) 下载页面:http://kindeditor.net/down.php 二、部署编辑器 ...

朱雀/ 2020年10月24日 18:05/ 0 赞/ 961 阅读