CKEditor 是著名的 HTML 编辑器,IBM、Oracle、Adobe 等都在用。CKEditor 创建于 2003 年,其前身为 FCKEditor,在 2009 年的时候把“F”去掉了,更名为 CKEditor。其开源协议是基于 GPL, LGPL 和 MPL 的。官方网站:http://ckeditor.com/
一般来说,我们在编辑内容时,先是读入到 textarea,再将 textarea 的内容赋给编辑器。因为直接把内容作为字符串给编辑器的 Value 属性赋值使用的是 JavaScript 代码,要让 JS 代码不受内容中双引号、换行等的干扰,只有先读入到 textarea 最方便。
使用 CKeditor 3.0.1
<textarea cols="90" rows="10" id="content" name="content">cftea</textarea>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
<!--
CKEDITOR.replace("content");
//-->
</script>
可以看出,3.x 版本的使用非常方便,也不用担心会形成两个同名的 content。实际上 textarea 的 id 省略了也是可以的,因为 CKEditor 会先按 name 来查找,查找不到,再按 id 来查找。
并且编辑器会在 textarea 的位置替换原有的 textarea。
设置编辑器皮肤、宽高
<textarea cols="90" rows="10" id="content" name="content">cftea</textarea>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
<!--
CKEDITOR.replace("content",
{
skin: "kama", width:700, height:300
});
//-->
</script>
skin 值应该是 ckeditor/skins 文件夹下的某个文件夹名称,如果指向不存在的皮肤,则不会显示编辑器。
设置值、取值
设置值
CKEDITOR.instances.content.setData("输入文字"); // content 就是前面 CKEDITOR.replace 的第一个参数值
或
var editor = CKEDITOR.replace("content");
editor.setData("输入文字");
取值
alert(CKEDITOR.instances.content.getData()); // content 就是前面 CKEDITOR.replace 的第一个参数值
或
var editor = CKEDITOR.replace("content");
alert(editor.getData());
插入图片
若要演示此示例,最好是放在按钮的事件处理程序中,目的是有些延迟。
CKEDITOR.instances.content.insertHtml("<img src=...>");
分享到:
相关推荐
CKEditor 是著名的 HTML 编辑器,IBM、Oracle、Adobe 等都在用。CKEditor 创建于 2003 年,其前身为 FCKEditor,在 2009 年的时候把“F”去掉了,更名为 CKEditor。
CKEditor(之前被称为FCKEditor)是一款流行的网页富文本编辑器,它允许用户在网页上直接编辑内容,并通过JavaScript与HTML页面实现交互。CKEditor 3.0.1版本的快速使用教程将帮助开发者了解如何在网页中集成和使用...
在asp中使用ckeditor开启图片上传功能的设置方法: 1、下载asp版本的ckfinder,放到ckeditor目录下 2、修改ckeditor\config.js,加上如下内容: CKEDITOR.editorConfig ...-- #INCLUDE file="ckeditor/ckeditor.asp" -->
- `FCKeditor/editor/fckeditor.html`用于图片上传等功能,可能存在安全隐患。 ##### 9. 目录权限漏洞 - **版本**:2.4.1及以下版本。 - **描述**:通过修改`CurrentFolder`参数来访问不同的目录。 - **示例**: ...
集成 CKFinder 到 CKEditor/FCKEditor: 1. **HTML 结构**:确保编辑器和 CKFinder 文件夹在服务器上的正确位置,例如 `/ckeditor/` 和 `/ckfinder/`。 2. **JavaScript 集成**:在 HTML 页面中引入 `ckeditor.js` ...
本资源包含三款知名的在线编辑器:CKEditor、FCKEditor以及SinaEditor,这三者都是JavaScript库,用于在Web应用程序中集成文本编辑功能。 CKEditor(前身为FCKeditor)是一款功能强大的开源富文本编辑器。它支持...
private const string CKEDITORJS = @"<script language='javascript' src='{0}ckeditor/ckeditor.js' type='text/javascript'></script>"; ``` 这些字符串模板将在页面加载时替换为具体的值,并插入到 HTML 文档中...
CKEditor插件什么是CKEditor? CKEditor是一个所见即所得的文本编辑器。 有关更多详细信息,请参见。什么插件有: 警报-使用此插件,您可以添加引导样式的警报。 在ckeditor 4.5.1 , Ubuntu 14.04 , Redmine 3.0.4...
可以通过修改ckeditor/config.js来调整ckeditor的位置(测试的test必须放在根目录,否则上传图片时会找不到upload.php文件 而实际开发中,我们可能希望将ckeditor放在一个共享的资源目录中,而不是放在test中) 修改...
用法找见自己的ckeditor地址让后放到ckeditor/plugins/ 下,最后修改ckeditor/config.js,如果之前添加过工具则在 config.extraPlugins = 'gongju'; 这里面直接跟到后面 config.extraPlugins = 'gongju,lineheight'; ...
CKFinder、CKEditor和FCKEditor都是此类编辑器的实例,广泛应用于内容管理系统(CMS)、论坛、博客等场景。 CKFinder是一款强大的文件管理器,与CKEditor紧密集成。它提供了上传、浏览、删除、预览和管理服务器上...
@ckeditor/ckeditor5-dev-utils @ckeditor/ckeditor5-dev-webpack-plugin @ckeditor/jsdoc-plugins 克隆 克隆此存储库。 是否将yarn install在内部(此包装使用纱线工作区)。 您准备好出发了! 测验 ...
《CKEditor 5 Build:Classic Edition 10.0.0 深度解析》 CKEditor 5 是一个先进的富文本编辑器框架,致力于提供卓越的文本编辑体验。其构建版本CKEditor5-build-classic-10.0.0是经典版的一个稳定发布,专为满足...
<script src="ckeditor/ckeditor.js"></script> CKEDITOR.replace('content', { filebrowserBrowseUrl : 'ckeditor/filemanager/browser/default/browser.html?Connector=ckeditor/connectors/php/connector.php'...
标准图片上传按钮建立整合 npm install ckeditor5-simple-upload 添加此插件并删除ckfinder和easyimage插件// src/ckeditor.jsimport UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter'...
<url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern> </servlet-mapping> <servlet-name>SimpleUploader</servlet-name> <url-pattern>/FCKeditor/editor/...
- **ASPX环境**:`/FCKeditor/editor/filemanager/browser/default/connectors/aspx/connector.aspx?Command=GetFoldersAndFiles&Type=File&CurrentFolder=/shell.asp` - **测试命令**:通过修改`CurrentFolder`...
config.filebrowserImageUploadUrl = '/ckeditor/upload.action?Type=Image'; config.filebrowserFlashUploadUrl = '/ckeditor/upload.action?Type=Flash'; }; ``` 此外,为了实现图片和Flash的预览功能,...
<script type="text/javascript" src="/fckeditor/fckeditor.js"></script> <script type="text/javascript"> var oFCKeditor = new FCKeditor('editor') ; oFCKeditor.BasePath = '/fckeditor/' ; oFCKeditor....
直接在ckeditor的按钮中显示文件浏览... config.js中添加名为File的按钮 config.js中添加 ... 创建目录 /ckeditor/plugins/file,把plugin.js放到里面 把图标file.gif复制到每个skin里,例如 ckeditor/skins/v2/file.gif