zoukankan      html  css  js  c++  java
  • KindEditor配置步骤

    KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IEFirefoxChromeSafariOpera等主流浏览器。 KindEditor使用JavaScript编写,可以无缝的与Java.NETPHPASP等程序接合。

    KindEditor非常适合在CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用,20067月首次发布2.0以来,KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率,目前在国内已经成为最受欢迎的编辑器之一。

     

    目前最新版本 KindEditor 3.5.2,官网及下载地址

     

    KindEditor配置步骤:

     

    1、在项目中建立KindEditor文件夹,把下载下来后的文件解压,将其中的skinspluginskindeditor.js 拷到该KindEditor文件夹目录下;

     

    2、在.aspx文件中放入TextBox控件,并设置控件ID

     

        如:<asp:TextBox ID="txtContent" TextMode="MultiLine"  runat="server"></asp:TextBox>

     

    3、在.aspx文件中引入kindeditor.js文件及Js代码,可将TextBox控件设置成KindEditor在线编辑器,代码如下:

    view sourceprint?

      <script src="../kindeditor/kindeditor.js" type="text/javascript"></script>

      <script type="text/javascript">

          KE.show({

              id: txtContent,

              imageUploadJson: '/handler/upload_json.ashx',

              items : [

              'source', '|', 'fullscreen', 'undo', 'redo', 'print', 'cut', 'copy', 'paste',

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

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

              'superscript', '|', 'selectall', '-',

              'title', 'fontname', 'fontsize', '|', 'textcolor', 'bgcolor', 'bold',

              'italic', 'underline', 'strikethrough', 'removeformat', '|', 'image',

              'flash', 'media', 'advtable', 'hr', 'emoticons', 'link', 'unlink'

             ]

        });

      </script>

     

    其中,idTextBox控件的IDimageUploadJson: '/handler/upload_json.ashx'可设置图片上传(文件上传设置同理)item为设置编辑器工具栏上的每一个功能是否显示,可根据需要手动增删对应单词,如不需要“HTML代码”功能则删除“'source',”;

     

    4、在.aspx页面的第一句话及Page指令中加上validaterequest=false”,禁止.net自动屏蔽上传Html代码;

     

      如:<%@ Page Language="C#" ValidateRequest="false"...

     

    5、设置完毕,后台可直接通过TextBoxtext属性来获取编辑器内容;

     

    另:设置KindEditor的图片上传功能

    1、在刚才在.aspx页面中添加的js代码中添加imageUploadJson参数,

     

      如:imageUploadJson: '/handler/upload_json.ashx'

    2、建立一般处理程序页面upload_json.ashx,该页面用于编写文件上传代码,在下载下来的源码有,在asp.net中,稍作修改,代码如下:

    view sourceprint?

      using System;

      using System.Collections.Generic;

      using System.Linq;

      using System.Web;

      using System.Collections;

      using System.IO;

      using System.Globalization;

      using LitJson; // 需先手动添加LitJson.dll的引用,在asp.net/bin

       

      namespace Yongbin.Shop.Web.handler

      {

          /// <summary>

          /// upload_json 的摘要说明

          /// </summary>

          public class upload_json : IHttpHandler

          {

              //文件保存目录路径

            private String savePath = "/upload/" + DateTime.Now.ToString("yyyyMMdd") + "/";  // 修改上传目录

            //文件保存目录URL(显示在kindeditor编辑器中的地址)

            private String saveUrl = "/upload/" + DateTime.Now.ToString("yyyyMMdd") + "/";

            //定义允许上传的文件扩展名

              private String fileTypes = "gif,jpg,jpeg,png,bmp";

            //最大文件大小

            private int maxSize = 1000000;

     

            private HttpContext context;

     

              public void ProcessRequest(HttpContext context)

            {

                  this.context = context;

     

                  HttpPostedFile imgFile = context.Request.Files["imgFile"];

                if (imgFile == null)

                {

                    showError("请选择文件。");

                }

     

                String dirPath = context.Server.MapPath(savePath);

                if (!Directory.Exists(dirPath))

                {

                      Directory.CreateDirectory(dirPath);  // 复制过来的代码改了这里,自动创建目录

                }

       

                  String fileName = imgFile.FileName;

                String fileExt = Path.GetExtension(fileName).ToLower();

                ArrayList fileTypeList = ArrayList.Adapter(fileTypes.Split(','));

     

                if (imgFile.InputStream == null || imgFile.InputStream.Length > maxSize)

                {

                    showError("上传文件大小超过限制。");

                }

       

                  if (String.IsNullOrEmpty(fileExt) || Array.IndexOf(fileTypes.Split(','), fileExt.Substring(1).ToLower()) == -1)

                {

                      showError("上传文件扩展名是不允许的扩展名。");

                }

     

                  String newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt;

                  String filePath = dirPath + newFileName;

     

                  imgFile.SaveAs(filePath);

     

                String fileUrl = saveUrl + newFileName;

     

                  Hashtable hash = new Hashtable();

                hash["error"] = 0;

                hash["url"] = fileUrl;

                context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8");

                  context.Response.Write(JsonMapper.ToJson(hash));

                context.Response.End();

            }

     

            private void showError(string message)

            {

                Hashtable hash = new Hashtable();

                hash["error"] = 1;

                  hash["message"] = message;

                context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8");

                context.Response.Write(JsonMapper.ToJson(hash));

                  context.Response.End();

            }

     

              public bool IsReusable

            {

                  get

                  {

                      return false;

                  }

              }

          }

      }

     

    3、配置成功

  • 相关阅读:
    C++ CGI Helloword
    国内外12个免费域名解析服务网站推荐
    U制作LFS linux
    LFS 中文版手册发布:如何打造自己的 Linux 发行版
    windows下的BT服务器搭建方案
    Linux下搭建BT服务器
    Codeforces 842B Gleb And Pizza【几何,水】
    Codeforces 842A Kirill And The Game【暴力,水】
    Wannafly模拟赛 A.矩阵(二分答案+hash)
    数据结构学习笔记【持续更新】
  • 原文地址:https://www.cnblogs.com/ywcz060/p/3524333.html
Copyright © 2011-2022 走看看