`
xuedong
  • 浏览: 298271 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

CKEditor/FCKEditor取值 赋值

 
阅读更多

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/FCKEditor 使用FCKeditor 2.6.5 快速使用教程(含插入图片)

    CKEditor 是著名的 HTML 编辑器,IBM、Oracle、Adobe 等都在用。CKEditor 创建于 2003 年,其前身为 FCKEditor,在 2009 年的时候把“F”去掉了,更名为 CKEditor。

    CKEditor/FCKEditor 使用 CKeditor 3.0.1 快速使用教程(含插入图片)

    CKEditor(之前被称为FCKEditor)是一款流行的网页富文本编辑器,它允许用户在网页上直接编辑内容,并通过JavaScript与HTML页面实现交互。CKEditor 3.0.1版本的快速使用教程将帮助开发者了解如何在网页中集成和使用...

    asp使用ckeditor和ckfinder上传图片设置

    在asp中使用ckeditor开启图片上传功能的设置方法: 1、下载asp版本的ckfinder,放到ckeditor目录下 2、修改ckeditor\config.js,加上如下内容: CKEDITOR.editorConfig ...-- #INCLUDE file="ckeditor/ckeditor.asp" --&gt;

    FCKeditor漏洞总结

    - `FCKeditor/editor/fckeditor.html`用于图片上传等功能,可能存在安全隐患。 ##### 9. 目录权限漏洞 - **版本**:2.4.1及以下版本。 - **描述**:通过修改`CurrentFolder`参数来访问不同的目录。 - **示例**: ...

    CKEditor FCKEditor 使用-集成 CKFinder(上传文件、浏览文件)

    集成 CKFinder 到 CKEditor/FCKEditor: 1. **HTML 结构**:确保编辑器和 CKFinder 文件夹在服务器上的正确位置,例如 `/ckeditor/` 和 `/ckfinder/`。 2. **JavaScript 集成**:在 HTML 页面中引入 `ckeditor.js` ...

    在线编辑器+ckeditor+FCKEditor+SinaEditor

    本资源包含三款知名的在线编辑器:CKEditor、FCKEditor以及SinaEditor,这三者都是JavaScript库,用于在Web应用程序中集成文本编辑功能。 CKEditor(前身为FCKeditor)是一款功能强大的开源富文本编辑器。它支持...

    ckeditor 3 自定义控件

    private const string CKEDITORJS = @"&lt;script language='javascript' src='{0}ckeditor/ckeditor.js' type='text/javascript'&gt;&lt;/script&gt;"; ``` 这些字符串模板将在页面加载时替换为具体的值,并插入到 HTML 文档中...

    CKEditor-Plugins:自举样式的插件

    CKEditor插件什么是CKEditor? CKEditor是一个所见即所得的文本编辑器。 有关更多详细信息,请参见。什么插件有: 警报-使用此插件,您可以添加引导样式的警报。 在ckeditor 4.5.1 , Ubuntu 14.04 , Redmine 3.0.4...

    可以上传图片到bcs的ckeditor包及demo及使用说明

    可以通过修改ckeditor/config.js来调整ckeditor的位置(测试的test必须放在根目录,否则上传图片时会找不到upload.php文件 而实际开发中,我们可能希望将ckeditor放在一个共享的资源目录中,而不是放在test中) 修改...

    lineheight支持最新的ckeditor

    用法找见自己的ckeditor地址让后放到ckeditor/plugins/ 下,最后修改ckeditor/config.js,如果之前添加过工具则在 config.extraPlugins = 'gongju'; 这里面直接跟到后面 config.extraPlugins = 'gongju,lineheight'; ...

    asp.net所见即所得控件CKFinder,CKEditor,FCKEditor

    CKFinder、CKEditor和FCKEditor都是此类编辑器的实例,广泛应用于内容管理系统(CMS)、论坛、博客等场景。 CKFinder是一款强大的文件管理器,与CKEditor紧密集成。它提供了上传、浏览、删除、预览和管理服务器上...

    ckeditor5-dev:CKEditor 5开发工具包

    @ckeditor/ckeditor5-dev-utils @ckeditor/ckeditor5-dev-webpack-plugin @ckeditor/jsdoc-plugins 克隆 克隆此存储库。 是否将yarn install在内部(此包装使用纱线工作区)。 您准备好出发了! 测验 ...

    ckeditor5-build-classic-10.0.0

    《CKEditor 5 Build:Classic Edition 10.0.0 深度解析》 CKEditor 5 是一个先进的富文本编辑器框架,致力于提供卓越的文本编辑体验。其构建版本CKEditor5-build-classic-10.0.0是经典版的一个稳定发布,专为满足...

    PHPMyWind更换编辑器ckeditor批量上传图片

    &lt;script src="ckeditor/ckeditor.js"&gt;&lt;/script&gt; CKEDITOR.replace('content', { filebrowserBrowseUrl : 'ckeditor/filemanager/browser/default/browser.html?Connector=ckeditor/connectors/php/connector.php'...

    ckeditor5-simple-upload

    标准图片上传按钮建立整合 npm install ckeditor5-simple-upload 添加此插件并删除ckfinder和easyimage插件// src/ckeditor.jsimport UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter'...

    在jsp环境中配置使用FCKEditor

    &lt;url-pattern&gt;/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector&lt;/url-pattern&gt; &lt;/servlet-mapping&gt; &lt;servlet-name&gt;SimpleUploader&lt;/servlet-name&gt; &lt;url-pattern&gt;/FCKeditor/editor/...

    Fckeditor 漏洞最新整理.

    - **ASPX环境**:`/FCKeditor/editor/filemanager/browser/default/connectors/aspx/connector.aspx?Command=GetFoldersAndFiles&Type=File&CurrentFolder=/shell.asp` - **测试命令**:通过修改`CurrentFolder`...

    Ckeditor新闻编辑器

    config.filebrowserImageUploadUrl = '/ckeditor/upload.action?Type=Image'; config.filebrowserFlashUploadUrl = '/ckeditor/upload.action?Type=Flash'; }; ``` 此外,为了实现图片和Flash的预览功能,...

    FCKEditor(Java)完整资料包

    &lt;script type="text/javascript" src="/fckeditor/fckeditor.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; var oFCKeditor = new FCKeditor('editor') ; oFCKeditor.BasePath = '/fckeditor/' ; oFCKeditor....

    ckeditor文件管理按钮

    直接在ckeditor的按钮中显示文件浏览... config.js中添加名为File的按钮 config.js中添加 ... 创建目录 /ckeditor/plugins/file,把plugin.js放到里面 把图标file.gif复制到每个skin里,例如 ckeditor/skins/v2/file.gif

Global site tag (gtag.js) - Google Analytics