富文本编辑器CKEDITOR的使用配置(问题注解)

CKEDITOR是一款非常轻便的富文本编辑器,如上图:参考网上的使用方法,我以.net为例,在aspx页面使用,

准备工作:首先要下载控件包,将解压后的整个文件夹添加到项目根目录。

第一步:引用js, <script charset="utf-8" type="text/javascript" src="../ckeditor/ckeditor.js"></script>

第二步:放置服务器控件,<asp:TextBox ID="tbContent" runat="server" TextMode="MultiLine" class="ckeditor inputstyle4"></asp:TextBox>

第三步:调用控件,

<script type="text/javascript">CKEDITOR.replace(‘<%=tbContent.ClientID.Replace("_","$") %>‘);</script>

记住:第二步和第三步的代码要放在一起,要有顺序的放置;如图:

还有一种引用方法

<script type="text/javascript">CKEDITOR.replace(‘tbContent‘);</script>方法,此方法引用服务器控件不可用,当然也可以把script代码写在head中

<script type="text/javascript">

//window.onload = function()

//{

//    CKEDITOR.replace(‘tbContent‘);

//};

</script>

完成以上步骤即可查看效果,如果需要配置该控件宽,高,颜色等等,可以打开文件夹内的config.js文件,如图:

config.width = 660; //设置宽度

config.height = 600; //设置高度

config.uiColor = ‘#ced9df‘;//设置背景颜色

如果要调整边距的话,我的解决方法是在控件外围放置一个div来控制边距,如下图:

如果你想使用jquery提交表单,也可以使用下述方法:

<textarea id="tbContent"  class="inputstyle4"  ></textarea>

<script type="text/javascript">CKEDITOR.replace(‘txtContent‘);</script>

或在head内引用

$(function () {
    CKEDITOR.replace(‘txtContent‘, { height: ‘300px‘, width: ‘500px‘ });
});

使用此方法,唯一的缺点就是,如果将textarea加上runat=server的话,就会识别不出, CKEDITOR会调用不了,textarea加上runat=server的话就成了服务器控件,CKEDITOR是客户端控件会识别不了,所以调用不了,如果你把控件放在了UpdatePanel(局部刷新)服务器控件内,如果控件内已经输入值,你只要点击其他的服务器控件按钮的话,就会引发异常或者清空了控件内的值,不过我的解决方案是

页面第一次加载的时候,就判断该页面上特有的文本框内的值是否为空,如果不为空,直接为该文本框回填值,如下:

protected void Page_Load(object sender, EventArgs e)

{

if(!Page.IsPostBack)

{

if(!string.IsNullOrWhiteSpace(this.txttuwen_title.Value.ToString()))

{

this.txttuwen_title.Value = this.txttuwen_title.Value.ToString();

}

if (!string.IsNullOrWhiteSpace(this.txttuwen_author.Value.ToString()))

{

this.txttuwen_author.Value = this.txttuwen_author.Value.ToString();

}

}

}

至此CKEDITOR富文本控件使用中的问题结束。

时间: 2024-08-25 00:45:15

富文本编辑器CKEDITOR的使用配置(问题注解)的相关文章

MVC富文本编辑器CKEditor配置CKFinder

富文本编辑器CKEditor的使用 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table, pre { margin:

富文本编辑器 CKeditor 配置使用 (带附件)

Ckeditor下载地址:http://ckeditor.com/download 1.CKeditor的基本配置 var textval=CKEDITOR.instances.TextArea1.getData(); //获取带HTML的值 var stemTxt=CKEDITOR.instances.TextArea1.document.getBody().getText();//获取纯文本 CKEDITOR.instances.TextArea1.setData(data.content)

富文本编辑器CKEditor的使用

由于最近在架构一个pc端b/s结构的项目,项目中有个论坛模块,当用户发帖时,需要用到富文本编辑器,考虑了一下,决定使用CKEditor富文本编辑器,虽然现在问世的富文本编辑器很丰富,比如还有百度的UEditor等等,但是我选择使用CKEditor的原因是它能快速引入到我的项目中去.马上附上详细步骤: (1).工具准备,下载CKEditor:http://ckeditor.com/download(我的项目下载使用的是标准版本:ckeditor_4.7.1_standard)(2).部署到自己项目

富文本编辑器ckeditor使用(angular中)

1.下载ckeditor 地址:https://ckeditor.com/ckeditor-4/download/,选择合适的版本 2.将下载的压缩文件解压后放在项目相关目录下 3.在index.html中引入 <!-- 引入ckeditor --> <script src="assets/ckeditor/ckeditor.js"></script> 4.在需要使用富文本编辑器的html文件中写 <!-- 富文本框 --><cke

富文本编辑器 CKeditor 配置使用

作者:Tyler Ning出处:http://www.cnblogs.com/tylerdonet/本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,如有问题,可以通过以下邮箱地址[email protected] 联系我,非常感谢. Ckeditor下载地址:http://ckeditor.com/download 一.使用方法:1.在页面<head>中引入ckeditor核心文件ckeditor.js script type="

富文本编辑器ckeditor继承

新建一个web项目ckfinder,导入lib包 加入java包,编码格式UTF-8 在WebRoot下添加ckedtior以及ckfinder两个文件夹,将config.xml拷入WEB-INF中 修改config.xml配置文件 再修改config.js文件,文件路径指向WebRooT下的ckfinder,并可以修改工具栏显示等. web.xml中配置servlet <!-- CKEditor+CKFinder文本编辑器,being --> <servlet> <serv

两种富文本编辑器-ckeditor和ueditor

本文的使用环境是ASP.NET MVC4: 一.cheditor的使用方法:   第1步,在Scripts文件夹下新建一文件夹,在文件夹中添加cheditor使用包的如下文件: 第2步,在模板中添加引用: <script src="~/Scripts/ckeditor/ckeditor.js"></script> 第3步,对要用富文本的textarea元素进行以下编辑: <div> @Html.TextAreaFor(model => mode

富文本编辑器-ueditor基本配置

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码..相对于其他流行的富文本编辑器如ckeditor等具有配置简单.更具有中国特色!以下主要是涉及的内容是关于百度富文本编辑器的上传配置以及如何与struts2等结合问题. 1 版本问题 一般而言建议使用UMEditor版本,同时百度web前端开发部也提供了定制版本.如果使用定制版本要注意的一点就是将工具栏的图标添加上分割线!分割线添加的方法如下就

搭建自己的博客(十三):为博客后台添加ckeditor富文本编辑器

使用django默认的编辑器感觉功能太少了,所以集成一下富文本编辑器. 1.安装和使用 (1).安装 pip install django-ckeditor (2).注册应用 在django的settings中添加‘ckeditor’的app (3).配置models 将需要用到富文本编辑器的字段改成RichTextField 上面三步配置过后是不能上传图片的,下面配置上传图片的功能. (4).安装pillow库 pip install pillow (5).注册应用 添加'ckeditor_u