dotnet封装的kindeditor编辑器控件

KindEditor很不错，刚接触不久，非常喜欢。KindEditor网站有ForPHP等扩展的，没有ForNet的。
我是搞.net开发的，就用它简单封装了一个控件，拖过来即可使用，使用更加简单。源码提供给大家，有兴趣的朋友可以进一步完善。

1、第一次使用，需要配置一下web.config。


代码如下:

<configSections>
<section name="KindEditor" type="KindEditorForDotNet.ConfigHandler,KindEditorForDotNet"/>
</configSections>
<KindEditor>
<!--编辑的所在路径-->
<item key="BasePath" value="~/KindEditor"/>
<!--上传文件的路径-->
<item key="UploadPath" value="~/Upload"/>
<!--主题类型-->
<item key="Theme:simple" value="'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'emoticons', 'image', 'link'"/>
<item key="Theme:book" value="'forecolor', 'hilitecolor', 'bold', 'italic', 'underline','removeformat'"/>
</KindEditor>

2、然后引用DLL文件，包括KindEditorForDotNet、LitJSON.dll；

3、使有的时候，直接把控件拖到webform中即可，如果控件没有出现在控件栏目，直接引用也可以

代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="EditorDemo._Default" %>
<%@ Register Assembly="KindEditorForDotNet" Namespace="KindEditorForDotNet" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<div>
说明：该控件继承自TextBox; 可以设置Width、Height、Enabled（是否只读）<hr />
默认风格<br />
<cc1:editor id="Editor1" runat="server" Height="100px" Width="100%"></cc1:editor><br />
自定义风格（风格来自于web.config中配置）<br />
<cc1:Editor ID="Editor2" runat="server" ThemeType="simple" Height="100px"></cc1:Editor></div>
显示字数 （已经输入：<span class="count"></span>）
<br />
<cc1:Editor ID="Editor3" runat="server" ThemeType="book" afterChange="function(){K('.count').html(this.count('text'))}" Height="60px" Width="300px"></cc1:Editor>
<hr />
</form>
</body>
</html>

赞 (0)

相关推荐

  • kindeditor修复会替换script内容的问题

    kindeditor一些个人修改 1.替换script里面的内容的问题 2.颜色选择器扩展,复制的fck编辑器选颜色 3.swfupload.swf上传前图片预览功能 kindeditor.js function _formatHtml(html, htmlTags, urlType, wellFormatted, indentChar) { if (html == null) { html = ''; } //2015-03-25 html = html.replace(/textarea__

  • 对GridView的行加颜色并弹出Kindeditor的实现思路

    前台代码: 复制代码 代码如下: <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript"> function tureDelete() { if (c

  • 使用JavaScript为Kindeditor自定义按钮增加Audio标签

    流程比较简单,主要有以下步骤: 注册插件(按钮.Lang.htmlTags.插件脚本) 基于media插件代码修改 注册插件 首先,全局配置kindeditor参数: KindEditor.lang({ audio : 'MP3' }); KindEditor.options.htmlTags['audio'] = ['src','controls','autoplay','type']; KindEditor.options.htmlTags['source'] = ['src','contr

  • KindEditor图片上传的Asp.net代码实例

    复制代码 代码如下: using System;using System.Globalization;using System.Collections;using System.Configuration;using System.Data;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.HtmlControls;using System.Web.UI.WebControls;u

  • jQuery读取和设定KindEditor值的方法

    jQuery读取和设定KindEditor值的方法

    在使用Kindeditor的时候,想要利用Ajax传值,但是通过editor封装的方法是行不通的,原因在于编辑器我们是放在另一个jsp页面,通过iframe来加载的,同时这个iframe的display="none"的,要通过一个事件来触发. 复制代码 代码如下: <iframe src="../common/editor.jsp" frameborder="0" scrolling="no" style="m

  • Angularjs编写KindEditor,UEidtor,jQuery指令

    目前angularJS非常火热,本人也在项目中逐渐使用该技术,在angularJS中,指令可以说是当中非常重要的一部分,这里分享一些自己编写的指令: 注:本人项目中用了oclazyload进行部分JS文件加载 1.KindEditor 复制代码 代码如下: angular.module('AdminApp').directive('uiKindeditor', ['uiLoad', function (uiLoad) {     return {         restrict: 'EA',

  • ASP.NET网站使用Kindeditor富文本编辑器配置步骤

    ASP.NET网站使用Kindeditor富文本编辑器配置步骤

    1. 下载编辑器 下载 KindEditor 最新版本,下载页面: http://www.kindsoft.net/down.php 2. 部署编辑器 解压 kindeditor-x.x.x.zip 文件,将editor文件夹复制到web目录下  3.在网页中加入(ValidateRequest="false") 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" Validat

  • nodejs 整合kindEditor实现图片上传

    kindEditor官网上中提供了ASP,ASP.NET,JSP相关的整合应用,http://kindeditor.net/docs/upload.html可以参照实现nodejs的整合,发现实用nodejs更简单 环境: unbuntu 14.10 nodejs 0.10.35 express 4.11.2 formidable 1.0.16 kindEditor 4.1.10 webStorm 8 1.通过IDE或终端创建一个名称为test的工程 2.编辑package.json添加form

  • jQuery编辑器KindEditor4.1.4代码高亮显示设置教程

    编辑器KindEditor官网: http://www.kindsoft.net/ 1.需要加载的JS和CSS文件为: 复制代码 代码如下: <script src="kindeditor-4.1.4/kindeditor.js" type="text/javascript" charset="utf-8"></script> <script src="kindeditor-4.1.4/plugins/co

  • kindeditor编辑器点中图片滚动条往上顶的bug

    kindeditor编辑器点中图片滚动条往上顶的bug

    比如现在我插入两张图片, 无论我点击哪张图片,里边的滚动条都会往上顶. 本来以为往上会有解决方法,一查结果没有:然后想着去官网查查,然而什么都没有,想到官网提交这个bug,结果没地方提交. 怎么解决,如果单是解决这个bug,去研究源码,我觉的是吃力不讨好的. 然后我就直接从 click.mousedown 这两个事件找起,找它们获得高度的地方,然后 感觉是的话就console.log下,看是不是.然后就找到了. 在这个函数里 pos : function() { var self = this,

随机推荐