所见即所得文章编辑器CKEditor的使用方法

duoerbasilu

浏览: 1479738 次

最近访客更多访客>>

Beryl

leontius

xld800

HBSU614

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1527)

社区版块

存档分类

2012-07 ( 651)
2012-06 ( 163)
2012-05 ( 163)
更多存档...

1、下载CKEditor 将解压后的ckedior文件夹放在网站目录下。

网址：http://ckeditor.com/

2、在 aspx 页面或者 master 模板页 <head> 标签中载入 ckeditor.js：

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

　　在<body>标签中使用ckeditor：

<asp:TextBox id="txtContent" class="ckeditor" TextMode="MultiLine" Text='<%# Bind("info") %>' runat="server"></asp:TextBox>

　　与其他 .net 控件使用方法相同，设置 Text='<%# Bind("info") %>' 可以方便与数据源进行交互。

3、config.js 的自定义

/*
Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.editorConfig = function(config) {

// Define changes to default configuration here. For example:
config.language = 'zh-cn'; //配置语言
// config.uiColor = '#FFF'; //背景颜色
// config.width = 400; //宽度
config.height = 400; //高度
config.skin = 'kama'; //编辑器样式

// 取消 “拖拽以改变尺寸”功能
config.resize_enabled = false;

// 基础工具栏
// config.toolbar = "Basic";

// 全能工具栏
// config.toolbar = "Full";

// 自定义工具栏通过"/" 来划分工具栏的行数，自己修改位置
config.toolbar =
[
['Source', '-', 'Preview'], ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'], ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'], ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'ShowBlocks'], '/',
['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'], ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['Link', 'Unlink', 'Anchor'], ['Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar'], '/',
['Styles', 'Format', 'Font', 'FontSize'], ['TextColor', 'BGColor'], ['Maximize', '-', 'About']
];

};

4、截图如下

5、若出现Request.From之类的错误，就在网页的第一行添加ValidateRequest="false"

既：<%@ Page Language="C#" AutoEventWireup="true" ValidateRequest="false" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

6、数据库的定义：将要存储的字段设置为string型即可

7、存储预读取代码，我用的是access数据库

protected void Button1_Click(object sender, EventArgs e)
{
string connection = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("~/App_Data/news.mdb");
OleDbConnection oledb = new OleDbConnection(connection);
oledb.Open();
string mess=FreeTextBox1.Text;
string sql = "insert into news(newmessage)values('" + mess + "')";
OleDbCommand cmd = new OleDbCommand(sql,oledb);
cmd.ExecuteNonQuery();
cmd.Dispose();
oledb.Close();
Response.Redirect("show.aspx");
}

protected void Page_Load(object sender, EventArgs e)
{
string connection = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("~/App_Data/news.mdb");
OleDbConnection oledb = new OleDbConnection(connection);
oledb.Open();
string sql = "select newmessage from news where id=6";
OleDbCommand cmd = new OleDbCommand(sql, oledb);
OleDbDataReader objDataReader =cmd.ExecuteReader();
int sname = objDataReader.GetOrdinal("newmessage");
if (objDataReader.Read())
{
Response.Write(objDataReader[sname]);
}
}

注：工具栏的样式有V2、kama、office2003三种样式。

分享到：