首页 资讯 关注 民生 区域 汽车 房产 图片 视频 本地新闻

技术

旗下栏目: 美食 商家 技术 优惠

编辑器KindEditor4.1.7怎么实现点击按钮后 把内容 插入到 KindEd

来源:未知 作者:湛江网管理员 人气: 发布时间:2020-11-26
摘要:编辑器KindEditor4.1.7怎么实现点击按钮后 把内容 插入到 KindEditor 光标处 解答:官方有自定义插件配置的文档和demo . 链接如下: http://kindeditor.net/ke4/examples/custom-plugin.html 怎么配置可以查看KindEditor官方文档 http://kindeditor.net/doc.

编辑器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


责任编辑:湛江网管理员
首页 | 资讯 | 关注 | 民生 | 区域 | 汽车 | 房产 | 图片 | 视频 | 本地新闻

湛江网_碧海银沙_湛江碧海银海网_银沙网_湛江碧海银沙论坛,湛江影响力大的论坛社区,关注湛江社会百态。湛江网友可在论坛内相互交流、分享快乐,设有聚焦港城、街拍湛江、银沙杂谈、湛江楼市、亲子乐园、饮食男女、驴游户外等版块。  技术支持:湛江易联

电脑版 | 移动版