你好,欢迎来到太康县华康电脑网络科技有限公司网站!
新闻动态   News
你的位置:首页 > 新闻动态 > 技术文档

最简单的kindEditor4.1.10编辑器使用方法!

2015-12-24 16:20:50      点击:

一、asp添加编辑器

1在该HTML页面添加以下脚本,注意红色代码路径:

<link rel="stylesheet" href=" kindeditor/themes/default/default.css" />

<script charset="utf-8" src="kindeditor/kindeditor.js"></script>

<script charset="utf-8" src="kindeditor/lang/zh_CN.js"></script>

<script>

      var editor;

      KindEditor.ready(function(K) {

              editor = K.create('#editor_id');

      });

</script>

注释:不含上传文件功能

<link rel="stylesheet" href=" kindeditor/themes/default/default.css" />

<script charset="utf-8" src="kindeditor/kindeditor.js"></script>

<script charset="utf-8" src="kindeditor/lang/zh_CN.js"></script>

<script>

      var editor;

      KindEditor.ready(function(K) {

              editor = K.create('#editor_id',{

              uploadJson : 'kindeditor/asp/upload_json.asp',

              fileManagerJson : 'kindeditor/asp/file_manager_json.asp',

              allowFileManager : true

      });

      });

</script>

注释:含有上传文件功能

2在需要显示编辑器的位置添加textarea输入框:

<textarea id="editor_id" name="content" style="width:700px;height:300px;">

&lt;strong&gt;HTML内容&lt;/strong&gt;

</textarea>

二、如需要单独调用组件:

1 在已经添加以下脚本下加入:

<script charset="utf-8" src="kindeditor/kindeditor.js"></script>

<script charset="utf-8" src="kindeditor/lang/zh_CN.js"></script>

<script>

      var editor;

      KindEditor.ready(function(K) {

              editor = K.create('#editor_id',{

              uploadJson : 'kindeditor/asp/upload_json.asp',

              fileManagerJson : 'kindeditor/asp/file_manager_json.asp',

              allowFileManager : true

      });

     --------------------------注意添加位置和红色代码名称----------------------                          

                   K('#image1').click(function() {

                   editor.loadPlugin('image', function() {

                   editor.plugin.imageDialog({

                   showRemote : false,

                   imageUrl : K('#img').val(),

                   clickFn : function(url, title, width, height, border, align) {

                                                      K('#img').val(url);

                                                      editor.hideDialog();

                                               }});});});

     --------------------------注意添加位置和红色代码名称----------------------

      });

</script>

2在需要显示编辑器的位置添加input输入框:

<input type="text" id="img" name="img" value="" size=50 /> <input type="button" id="image1" value="选择图片" />


三、部分脚本代码,更多参照官方演示文档:

1 上传图片弹出框

<html>

     <head>

            <meta charset="utf-8" />

            <title>ImageDialog Examples</title>

            <link rel="stylesheet" href="../themes/default/default.css" />

            <script src="../kindeditor.js"></script>

            <script src="../lang/zh_CN.js"></script>

            <script>

                   KindEditor.ready(function(K) {

                          var editor = K.editor({

                                 allowFileManager : true

                          });

                          K('#image1').click(function() {

                                 editor.loadPlugin('image', function() {

                                        editor.plugin.imageDialog({

                                               imageUrl : K('#url1').val(),

                                               clickFn : function(url, title, width, height, border, align) {

                                                      K('#url1').val(url);

                                                      editor.hideDialog();

                                               }

                                        });

                                 });

                          });

                          K('#image2').click(function() {

                                 editor.loadPlugin('image', function() {

                                        editor.plugin.imageDialog({

                                               showLocal : false,

                                               imageUrl : K('#url2').val(),

                                               clickFn : function(url, title, width, height, border, align) {

                                                      K('#url2').val(url);

                                                      editor.hideDialog();

                                               }

                                        });

                                 });

                          });

                          K('#image3').click(function() {

                                 editor.loadPlugin('image', function() {

                                        editor.plugin.imageDialog({

                                               showRemote : false,

                                               imageUrl : K('#url3').val(),

                                               clickFn : function(url, title, width, height, border, align) {

                                                      K('#url3').val(url);

                                                      editor.hideDialog();

                                               }

                                        });

                                 });

                          });

                   });

            </script>

     </head>

     <body>

            <p><input type="text" id="url1" value="" /> <input type="button" id="image1" value="选择图片" />(网络图片 + 本地上传)</p>

            <p><input type="text" id="url2" value="" /> <input type="button" id="image2" value="选择图片" />(网络图片)</p>

            <p><input type="text" id="url3" value="" /> <input type="button" id="image3" value="选择图片" />(本地上传)</p>

     </body></html>

2 批量上传图片弹出框

<html>

     <head>

            <meta charset="utf-8" />

            <title>MultiImageDialog Examples</title>

            <link rel="stylesheet" href="../themes/default/default.css" />

            <script src="../kindeditor.js"></script>

            <script src="../lang/zh_CN.js"></script>

            <script>

                   KindEditor.ready(function(K) {

                          var editor = K.editor({

                                 allowFileManager : true

                          });

                          K('#J_selectImage').click(function() {

                                 editor.loadPlugin('multiimage', function() {

                                        editor.plugin.multiImageDialog({

                                               clickFn : function(urlList) {

                                                      var div = K('#J_imageView');

                                                      div.html('');

                                                      K.each(urlList, function(i, data) {

                                                             div.append('<img src="' + data.url + '">');

                                                      });

                                                      editor.hideDialog();

                                               }

                                        });

                                 });

                          });

                   });

            </script>

     </head>

     <body>

            <input type="button" id="J_selectImage" value="批量上传" />

            <div id="J_imageView"></div>

     </body>

</html>

3 上传文件弹出框

<html>

     <head>

            <meta charset="utf-8" />

            <title>fileDialog Examples</title>

            <link rel="stylesheet" href="../themes/default/default.css" />

            <script src="../kindeditor.js"></script>

            <script src="../lang/zh_CN.js"></script>

            <script>

                   KindEditor.ready(function(K) {

                          var editor = K.editor({

                                 allowFileManager : true

                          });

                          K('#insertfile').click(function() {

                                 editor.loadPlugin('insertfile', function() {

                                        editor.plugin.fileDialog({

                                               fileUrl : K('#url').val(),

                                               clickFn : function(url, title) {

                                                      K('#url').val(url);

                                                      editor.hideDialog();

                                               }

                                        });

                                 });

                          });

                   });

            </script>

     </head>

     <body>

            <input type="text" id="url" value="" /> <input type="button" id="insertfile" value="选择文件" />

     </body>

</html>

四、部分脚本修改代码:

1 插入文件后,显示为路径如需修改为显示图标,在

kindeditor/plugins/insertfile/insertfile.js文件中把:

self.clickToolbar(name, function() {

            self.plugin.fileDialog({

                   clickFn : function(url, title) {

                          var html = '<a class="ke-insertfile" href="' + url + '" data-ke-src="' + url + '" target="_blank">' + title + '</a>';

                          self.insertHtml(html).hideDialog().focus();

替换成(注意红色代码路径):


self.clickToolbar(name, function() {

self.plugin.fileDialog({

 clickFn : function(url, title) {

   var ext=/\.[^\.]+$/.exec(url);

  img = 'rar.gif';

  if(ext == '.doc')  img='doc.gif';

   if(ext == '.xls')  img="execl.gif";

   if(ext == ".ppt")  img="ppt.gif";

  if(ext ==  ".rar")  img="rar.gif";

  if(ext ==  ".zip")  img="zip.gif";

  if(ext ==  ".txt")  img="txt.gif";

  if(ext ==  ".pdf")  img="pdf.gif";

  if(ext ==  ".docx") img="doc.gif";

  if(ext ==  ".xlsx") img="execl.gif";

     if(ext == ".pptx") img="ppt.gif";

  img = "/hkdnkjweb2014/SysImage/icon32/"+img;

  var html ='<a class="ke-insertfile" href="' + url + '" data-ke-src="' + url + '" target="_self">' + '<img src="'+img+'" border="0"/>' +  '</a>';

     self.insertHtml(html).hideDialog().focus();