文本编辑器 CKEditor 用法
最新文本编辑器,FCK升级版:CKEditor.NET
CKEditor.NET.dll 版本:3.6.4.0
官方网址:http://ckeditor.com/
效果图:
配置web.config:
<system.web>
<pages>
<controls>
<add tagPrefix="CKEditor" assembly="CKEditor.NET" namespace="CKEditor.NET"/>
</controls>
</pages><system.web>
页面上加入标签:
<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
在aspx页面插入控件:
<CKEditor:CKEditorControl ID="txtRemark" runat="server" BasePath="~/UserControl/ckeditor/" Toolbar="Source|Preview|Templates|Cut|Copy|Paste|Undo|Redo|Bold|Italic|Underline|Font|FontSize|TextColor|BGColor|Maximize" Width="388px" Height="150px" >
工具栏设置,如在js中加载了此控件,那设置的工具栏则无效,需在js中重新设置工具栏:
3种方式设置:
1、在页面中设置:设置Toolbar属性 以"|"分隔每个菜单,"-"添加一个分割符,"/"添加一个换行
Toolbar="Source|Preview|Templates|Cut|Copy|Paste|Undo|Redo|Bold|Italic|Underline|Font|FontSize|TextColor|BGColor|Maximize"
2、cs代码:在代码中加入(默认全部工具栏显示)
"-" 分隔符,"/" 换行符,新的new object[] 为一个分组
txtRemark.config.toolbar = new object[]
{
new object[] { "Source", "-", "Preview", "-", "Templates" },
new object[] { "Cut", "Copy", "Paste", "PasteText", "PasteFromWord", "-", "Print", "SpellChecker", "Scayt" },
new object[] { "Undo", "Redo", "-", "Find", "Replace", "-", "SelectAll", "RemoveFormat" },
new object[] { "Form", "Checkbox", "Radio", "TextField", "Textarea", "Select", "Button", "ImageButton", "HiddenField" },
"/",
new object[] { "Bold", "Italic", "Underline", "-", "Subscript", "Superscript" },
new object[] { "NumberedList", "BulletedList", "-", "Outdent", "Indent"},
new object[] { "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock" },
new object[] { "Link", "Unlink", "Anchor" },
new object[] { "Image", "Flash", "Table", "HorizontalRule", "Smiley", "SpecialChar", "PageBreak", "Iframe" },
"/",
new object[] { "Styles", "Format", "Font", "FontSize" },
new object[] { "TextColor", "BGColor" },
new object[] { "Maximize" }
}
3、JS中设置:调用加载编辑器控件 (若使用此方法,在页面或代码中设置的工具栏则无效,如不需js调用控件可采用第1种方法)
$(
function ()
{
CKEDITOR.replace('txtRemark', {
toolbar : //重设工具栏
[['Source', 'Preview',],
['Bold', 'Italic', 'Underline'],
['Outdent', 'Indent'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
['Link', 'Unlink'],
'/',
['Font', 'FontSize'],
['TextColor', 'BGColor','-','Maximize']
]
}); //编辑器}
);
js取值和赋值:
赋值:CKEDITOR.instances.txtRemark.setData("值");
取值:var obj = CKEDITOR.instances.txtRemark.getData();
cs代码中获取值:
txtRemark.Text
文本编辑器 CKEditor 用法的更多相关文章
- MVC5富文本编辑器CKEditor配置CKFinder
富文本编辑器CKEditor的使用 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...
- Django实现的博客系统中使用富文本编辑器ckeditor
操作系统为OS X 10.9.2,Django为1.6.5. 1.下载和安装 1.1 安装 ckeditor 下载地址 https://github.com/shaunsephton/django-c ...
- 富文本编辑器 CKeditor 配置使用+上传图片
参考文献: 富文本编辑器 CKeditor 配置使用 CKEditor与CKFinder的配置(ASP.NET环境),老版本可以参考 CKEditor+CKFinder ASP版在本地电脑中的配置 ...
- 富文本编辑器CKEDITOR的使用配置(问题注解)
CKEDITOR是一款非常轻便的富文本编辑器,如上图:参考网上的使用方法,我以.net为例,在aspx页面使用, 准备工作:首先要下载控件包,将解压后的整个文件夹添加到项目根目录. 第一步:引用js, ...
- 富文本编辑器ckeditor继承
新建一个web项目ckfinder,导入lib包 加入java包,编码格式UTF-8 在WebRoot下添加ckedtior以及ckfinder两个文件夹,将config.xml拷入WEB-INF中 ...
- 富文本编辑器CKEditor的使用
由于最近在架构一个pc端b/s结构的项目,项目中有个论坛模块,当用户发帖时,需要用到富文本编辑器,考虑了一下,决定使用CKEditor富文本编辑器,虽然现在问世的富文本编辑器很丰富,比如还有百度的UE ...
- 富文本编辑器 CKeditor 配置使用 (带附件)
Ckeditor下载地址:http://ckeditor.com/download 1.CKeditor的基本配置 var textval=CKEDITOR.instances.TextArea1.g ...
- 富文本编辑器 CKeditor 配置使用
作者:Tyler Ning出处:http://www.cnblogs.com/tylerdonet/本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连 ...
- Vim文本编辑器详细用法
1 Vi.Vim文本编辑器 1.Vi.Vim Vi是Visual interface的简称. Vim是Vi的增强版,即Vi Improved.在后面的实例中将介绍Vim的使用. 为什么学vi? 1)所 ...
随机推荐
- c#接口深入一步探究其作用,适合新人了解
前言 前一篇浅显的述说了一下c#接口的作用,并用了一个不怎么好的例子述说了一下.时隔一天,在看完大家的评论后我在论坛中查看了很多前辈们对c#接口的描述,发现大家对例子的说明不是太容易让我们这些新人理解 ...
- 暑假集训(1)第二弹 -----Catch the cow(Poj3278)
Description Farmer John has been informed of the location of a fugitive cow and wants to catch her i ...
- VMProtect使用小计【一】
文章列表 VMProtect使用小计[一] – 初次使用VMProtect使用小计[二] – 加壳查看VMProtect使用小计[三] – 权限管理 说明 VMProtect的功能我就不说了,详情大家 ...
- 【转】主从同步出现一下错误:Slave_IO_Running: Connecting
主从同步出现一下错误: Slave_IO_Running: ConnectingSlave_SQL_Running: Yes 解决方法: 导致lave_IO_Running 为connecting 的 ...
- x264_param_t结构
typedef struct x264_param_t { unsigned int cpu; // CPU 标志位 int i_threads; // 并行编码多帧; 线程数,为0则自动多线程编码 ...
- 关于Linux内核学习的误区以及相关书籍介绍
http://www.hzlitai.com.cn/article/ARM9-article/system/1605.html 写给Linux内核新手-关于Linux内核学习的误区 先说句正经的:其实 ...
- C# DES
using System; //这个是使用DES的基础 using System.Security.Cryptography; //这个是处理文字编码的前提 using System.Text; // ...
- 有反斜杠时候,CakePHP往pgsql插入数据异常
原始数据:INSERT INTO “public”.”tables” (“table”, “columns”) VALUES (‘table1\’, ‘{“col1″:false,”col2″:tru ...
- 读取Android APK文件签名的方法
在微信开放平台等申请API key 和secret时经常要用到apk文件签名,那么如何读取呢? 下面贴一下相关读取源码: 一共两个文件MainActivity和MD5, package com.lcg ...
- 【 java版坦克大战--事件处理】 坦克动起来了
折腾了这么久,坦克总算能动了.只贴代码编辑不给上首页,花了半个小时的时间写了n多注释. 再顺便把绘图的原理发在这里: 绘图原理 Component类提供了两个和绘图有关的重要方法: ① paint ...