kindEditor文档编辑-创建知识

WCP-创建知识内容https://gitee.com/macplus/WCP.git

creat.jsp

创建一个<textarea> 标签，定义多行的文本输入控件。有一个唯一的id标识；
<div class="row">
   <div class="col-md-12">
      <textarea name="text" id="contentId"
         style="height: 500px; width: 100%;">${doce.texts.text1}</textarea>
   </div>
</div>

2. 在文件中写入函数编辑部分，KindEditor是一套开源的HTML可视化编辑器，使用kindeditor让textarea标签就会变成KindEditor编译器，items表示编辑器目录上具有多少个可用功能。

editor = KindEditor.create('textarea[id="contentId"]', {
   resizeType : 1,
   afterChange : function() {
      //生成导航目录
      initLeftMenuFromHtml(this.html());
   },
   cssPath : '<PF:basePath/>text/lib/kindeditor/editInner.css',
   uploadJson : basePath + 'actionImg/PubFPuploadImg.do',
   formatUploadUrl : false,
   allowPreviewEmoticons : false,
   allowImageUpload : true,
   items : [ 'source', 'fullscreen', '|', 'fontsize', 'forecolor',
         'bold', 'italic', 'underline','strikethrough', 'removeformat', '|',
         'justifyleft', 'justifycenter', 'justifyright',
         'insertorderedlist', 'insertunorderedlist', 'lineheight',
         '|', 'formatblock', 'quickformat', 'table', 'hr',
         'pagebreak', '|', 'link', 'image', 'code', 'insertfile',
         'wcpknow','newlinkk' ]
});

3. 将编辑器的内容设置到原来的textarea控件里。

editor.sync();

4. 添加自定义功能items：newlink

KindEditor.lang({ newlink: '新链接' });//新建一个js文件，定义newlink一个功能

//编写newlink功能的函数
KindEditor.plugin('newlink', function(K) {
    var self = this, name = 'newlink';
    self.plugin.newlink= {
        edit : function() {
            var lang = self.lang(name + '.'),
                html = '<div style="padding:20px;">' +
                    //url
                    '<div class="ke-dialog-row">' +
                    '<label for="keUrl" style="width:60px;">链接</label>' +
                    '<input class="ke-input-text" type="text" id="keUrl" name="url" value="" style="width:260px;" /></div>' +
                    //type
                    '<div class="ke-dialog-row"">' +
                    '<label for="keTitle" style="width:60px;">标题</label>' +
                    '<input class="ke-input-text" type="text" id="keTitle" name="title" value="" style="width:260px;" /></div>' +
                    '</div>' +
                    '</div>',
                dialog = self.createDialog({
                    name : name,
                    width : 450,
                    title : self.lang(name),
                    body : html,
                    yesBtn : {
                        name : self.lang('yes'),
                        click : function(e) {
                            var url = K.trim(urlBox.val());
                            var title=K.trim(titleBox.val());
                            if (url == 'http://' || K.invalidUrl(url)) {
                                alert(self.lang('invalidUrl'));
                                urlBox[0].focus();
                                return;
                            }
                            var itemStr="<a data-type=\"0\" biz-itemid=\"null\" data-tmpl=\"350x100\" data-tmplid=\"6\" data-rd=\"2\" data-style=\"2\" data-border=\"1\" href=\""+url+"\">"+title+"</a>";
                            self.insertHtml(itemStr).hideDialog().focus();
                        }
                    }
                }),
                div = dialog.div,
                urlBox = K('input[name="url"]', div),
                titleBox=K('input[name="title"]', div);
            urlBox.val('http://');
            self.cmd.selection();
            var a = self.plugin.getSelectedLink();
            if (a) {
                self.cmd.range.selectNode(a[0]);
                self.cmd.select();
                urlBox.val(a.attr('data-ke-src'));
                titleBox.val(a.text());
            }
            urlBox[0].focus();
            urlBox[0].select();
        },
        'delete' : function() {
            self.exec('unlink', null);
        }
    };
    self.clickToolbar(name, self.plugin.newlink.edit);
});
KindEditor.lang({ newlink: '链接' });

页面里添加的位置图标定义的CSS文件。
.ke-icon-newlink{
        background-image: url(..hfut.png);
        width: 16px;
        height: 16px;
}

最后调用编辑器时items数组里添加newlink。
参考文档http://kindeditor.net/doc3.php?cmd=plugin

kindEditor文档编辑-创建知识

猜你喜欢