富文本编辑器KindEditor完整应用代码+完整JS配置

KindEditor 编辑器

1、HTML代码

         <textarea id="article_content"></textarea>  

对，就是这么简洁，核心就是一对textarea标签，还有一个id="xxx" ,xxx与JS代码对应

2、JS配置代码

复制取用就可以，JS末尾两段不需要就删除就OK.

<script>

       //富文本编辑器

      KindEditor.ready(function(K) {

                window.editor = K.create('#article_content',{

                width :'921px',

                height:'620px',

                cssData:'body {font-family: "微软雅黑"; font-size: 14px}',

                allowImageUpload:true,//允许上传图片

              allowImageRemote :false,//上传图片框网络图片的功能，false为隐藏，默认为true

              filterMode :false,//HTML特殊代码过滤

              uploadJson:"{:url('Herbal/uploadImg_article')}",

            afterUpload :function(url) {

            var img =new Image();img.src = url;

            img.onload =function(){

                if(img.width>640)editor.html(editor.html().replace('<img src="' + url +'"','<img src="' + url +'" width="640"'))

            }

        },

    items: [

        'source','|','undo','redo','|','preview','template',

        'plainpaste','|','justifyleft','justifycenter','justifyright',

        'justifyfull','insertorderedlist','insertunorderedlist','indent','outdent','subscript',

        'superscript','clearhtml','quickformat','/','formatblock','fontname','fontsize','|','forecolor','hilitecolor','bold','italic','underline','strikethrough','lineheight','removeformat','|','image','multiimage','table','hr','link','unlink'

              ],

});

});

$(function () {

var scrollTop = -1;// 鼠标进入到区域后，则存储当前window滚动条的高度

          $('.ke-container').hover(function(){

scrollTop =$(window).scrollTop();

},function(){

scrollTop = -1;

});

// 鼠标进入到区域后，则强制window滚动条的高度

          $(window).scroll(function(){

scrollTop!==-1 &&$(this).scrollTop(scrollTop);

})

});

</script>