KindEditor
Jun 4
KindEditor提交用jquery获取不到数据的解决方法
如果说用php接收的话,在HTML中这样写就可以了
var editor;
KindEditor.ready(function(K) {
  editor = K.create('#editor_id');
如果是用ajax方式提交的话,这样是获取不到数据的,最关键的是数据不同步
在html页面中的javascript程序要这样写
<script type="text/javascript">
   KindEditor.ready(function(K){
                K.create('textarea[name="content"]', {
                themeType: 'simple',
                resizeType: 1,
                uploadJson: 'common/KEditor/upload_json.php',
                fileManagerJson: 'common/KEditor/file_manager_json.php',
                allowFileManager: true,
        //经测试,下面这行代码可有可无,不影响获取textarea的值
       // afterCreate: function(){this.sync();}
        //下面这行代码就是关键的所在,当失去焦点时执行 this.sync();
        afterBlur: function(){this.sync();}////假如没有这一句,获取到的id为content的值空白
});
});
</script>
afterBlur
这个函数作用是同步KindEditor的值到textarea文本框。
官方文档解释:
sync()
将编辑器的内容设置到原来的textarea控件里。
参数: 无
Tags:
Mar 17

编辑器KindEditor4.1.7怎么实现点击按钮后 把内容 插入到 KindEditor 光标处
解答:官方有自定义插件配置的文档和demo .
链接如下:
http://kindeditor.net/ke4/examples/custom-plugin.html
怎么配置可以查看KindEditor官方文档
http://kindeditor.net/doc.php
具体配置自定义插件的官方文档如下
添加自定义插件http://kindeditor.net/docs/plugin.html

1. 添加”inserthtml”插件
1.1 添加plugins/insertcontent/insertcontent.js文件 到kindeditor编辑器的插件目录下,记得新建文件夹insertcontent,然后把insertcontent.js 放入。
/*******************************************************************************
*
* @author lijianshe 305347185@qq.com
* @site http://www.itlife365.com/
* @licence http://www.kindsoft.net/license.php
*******************************************************************************/
KindEditor.plugin('insertcontent', function(K) {
        var editor = this, name = 'insertcontent';
        // 点击图标时执行
        editor.clickToolbar(name, function() {
          //editor.insertHtml('这里插入要自动插入的内容哦 by itlife365.com 分享,不能换行哦,不然为无法插入哦');
         editor.insertHtml('<a href="http://jiandanjie.com/gotourl/527278012027.html"><img src="/uploadfile/image/jiandanjie.com-readmore.gif" width="30" height="19" title="点击查看宝贝详情" alt="点击查看宝贝详情" />点击这里购买——背带阔腿裤两件套</a>');
       
    });
});

1.2 定义语言,在页面的<script>标签里添加以下脚本
// 自定义插件 #1
KindEditor.lang({
        insertcontent : '自动插入导购内容'
});
说明:如果是在单独的页面引入kindeditor,则直接在页面上添加。
如果和我一样是通过类似于<script charset="utf-8" src="../include/kindeditor/lang/zh_CN.js"></script>
的方式引入的话,则通过需要到指定目录下打开文件zh_CN.js 添加内容
,
 insertcontent : '自动插入导购内容by itlife365.com'
 到最后 }, 'zh_CN'); 的前面,这样按钮就会在最后显示了。你也可以自己调整。
 
1.3 定义工具栏图标的CSS,在页面的<style>标签里添加以下CSS
.ke-icon-insertcontent {
        background-image: url(default.png);/* 菜单的显示图片也可以自己修改,注意图片的路径哦 */
        background-position: 0px -672px;
        width: 16px;
        height: 16px;
}
如果你也是通过类似文件引人的 <link rel="stylesheet" href="../include/kindeditor/themes/default/default.css" />
这也可以在这个文件里修改

1.4 最后调用编辑器时items数组里添加hello
K.create('#info', { /* info 是你的页面调用kindeditor控件的id */
        items : ['insertcontent']
});
或者在添加编辑器的页面添加
KindEditor.plugin('insertcontent', function(K) {
    var self = this, name = 'insertcontent';
    self.clickToolbar(name, function() {
     self.insertHtml('<strong>自动插入导购内容</strong>');
    });
   });
##说明:items 一般是在文件kindeditor.js 中的,如果你也是像下面这样引人的话
<script charset="utf-8" src="../include/kindeditor/kindeditor.js"></script>
则可以在这个文件里面添加about 后面添加,即
about,'insertcontent'
,但是比较麻烦哦。

1.5 最后
如果没有效果,有可能是浏览器缓存。可以通过F12 ,查看代码。或者换个浏览器 或者清空浏览器缓存 (itlife365我就是这么做的)
效果demo:

--end by itlife365.com

分页: 1/1 第一页 1 最后页 [ 显示模式: 摘要 | 列表 ]