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

因为直接把内容作为字符串给编辑器的 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=...>");

赞 (0)

相关推荐

  • CKEditor网页编辑器 中文使用说明

    安装 安装CKEditor是一件容易的工作,只需要按照下面的简单步骤就可以完成. 1.从我们的网站http://www.jb51.net/codes/21295.html上下载CKEditor的最新版本. 2.将下载的文件解压到你网站目录下的"ckeditor"文件夹里. 注意:你也可以将这些文件放在你网站的任何一个地方,默认为"ckeditor". 测试你的安装 编辑器附带有一些用来验证安装结果是否能正常运行的简单的例子网页,请查看"_samples&q

  • FCK编辑器（FCKEditor）添加新按钮和功能的修改方法

    需要修改的文件: fckconfig.js zh-cn.js en.js fckeditorcode_gecko.js || fckeditorcode_ie.js(针对IE以外的浏览器||针对ie浏览器,如果要支持两种浏览器,就这两个包都修改) 第一步:在Toolbar中添加功能按钮 fckconfig.js:FCKConfig.ToolbarSets["Default"] 中添加按钮名称 FCKConfig.ToolbarSets["Default"] = [

  • fckeditor常用Js,获取fckeditor内容,统计fckeditor字数,向fckeditor写入指定代码

    content相当于你例子中的FCKeditor1. 复制代码 代码如下: //获取格式化的编辑器内容 function getEditorContents(){ var oEditor = FCKeditorAPI.GetInstance("content"); alert(oEditor.GetXHTML(true)); } //向编辑器插入指定代码 function insertHTMLToEditor(codeStr){ var oEditor = FCKeditorAPI.G

  • ckeditor的使用和配置方法分享

    一.使用方法: 1.在页面<head>中引入ckeditor核心文件ckeditor.js <script type="text/javascript" src="ckeditor/ckeditor.js"></script> 2.在使用编辑器的地方插入HTML控件<textarea> <textarea id="TextArea1" cols="20" rows=&quo

  • ckeditor syntaxhighlighter代码高亮插件，完美修复

    ckeditor syntaxhighlighter代码高亮插件，完美修复

    CKeditor的对象跟FCKeditor不大一样,不能直接调用innerHTML和outerHTML了,绕了个大弯子,在当前节点前插入一个新节点,然后删除原先的节点...很傻,不过解决了问题. 顺便给高级配置页多加了一个选项"不自动转换超链接",syntaxhighlighter默认会把代码里的网址转换成超链接,看起来很不爽,现在可以自由设置了,呵呵 来个图 使用方法: 1. 解压附件到plugins (sablog2.0在include\editor\plugins) 2. 打开C

  • FCKeditor .NET的配置、扩展与安全性经验交流

    FCKeditor .NET的配置、扩展与安全性经验交流

    前言 FCKeditor是使用非常广泛的HTML编辑器,本文从 ASP.NET 的使用场景对 FCKeditor 与 FCKeditor.NET 的配置.功能扩展(如自定义文件上传子目录.自定义文件名.上传图片的后期处理等).以及安全性进行初步的阐述. 希望能帮助有同样需求的同仁节省一点时间:也希望各位能指正其中的不足.谢谢. 一.自定义 FCKeditor 的 BasePath BasePath 即FCKeditor在网站中的相对路径,默认值是 /fckeditor/,最好在Web.confi

  • CKEditor 附插入代码的插件

    CKEditor 附插入代码的插件

    按照惯例,先来段废话:CKEditor是新一代的FCKeditor,是一个重新开发的版本.CKEditor是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站. 从官网下载ckeditor,我下载的是ckeditor_3.0.2.CKEditor与原来的FCKeditor有太大的不同了,作为开发人员,在做自己的博客的时候总是需要贴代码的,只好给它先做一个插入代码的插件了.高亮代码用的是"SyntaxHighlighter". 1.在"cked

  • CKEditor/FCKEditor 使用 CKeditor 3.0.1 快速使用教程（含插入图片）

    因为直接把内容作为字符串给编辑器的 Value 属性赋值使用的是 JavaScript 代码,要让 JS 代码不受内容中双引号.换行等的干扰,只有先读入到 textarea 最方便. 使用 CKeditor 3.0.1 复制代码 代码如下: <textarea cols="90" rows="10" id="content" name="content">cftea</textarea> <scr

  • CKEditor/FCKEditor 使用FCKeditor 2.6.5 快速使用教程（含插入图片）

    其开源协议是基于 GPL, LGPL 和 MPL 的.官方网站:http://ckeditor.com/ 一般来说,我们在编辑内容时,先是读入到 textarea,再将 textarea 的内容赋给编辑器.因为直接把内容作为字符串给编辑器的 Value 属性赋值使用的是 JavaScript 代码,要让 JS 代码不受内容中双引号.换行等的干扰,只有先读入到 textarea 最方便. 使用 FCKeditor 2.6.5 复制代码 代码如下: <div><textarea id=&qu

  • mysql 8.0.12 快速安装教程

    mysql 8.0.12 的安装,折腾了两天,遇到各种问题,现总结如下: 第一步,卸载掉之前安装的MySQL,参考彻底卸载mysql 个人亲测! 第二步,参考mysql 8.0.12 安装配置方法图文教程完成下载及解压等,按照该博客安装会出现会提示"MySQL服务无法启动.服务没有报告任何错误." 第三步,不需要在解压缩目录下手动创建data文件夹,cd到mysql的bin目录下,使用以下命令 mysqld --initialize-insecure --user=mysql 然后就会

  • CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】

    本文实例讲述了CKEditor 4.4.1 添加代码高亮显示插件功能.分享给大家供大家参考,具体如下: 随着CKEditor4.4.1的发布,以前一直困扰的代码高亮问题终于完美的得到解决,在CKEditor4.4中官方发布了Code Snippet这个代码片段的插件,终于可以完美的内嵌使用代码高亮了,以前都是使用网友自己开发的代码高亮插件.下面就来介绍如何使用Code Snippet这个代码高亮插件.本文还介绍了CKEditor中如何安装Code Snippet插件. 新版本附加信息 CKEdi

  • Linux系统MySQL8.0.19快速安装配置教程图解

    一.环境介绍 Linux系统使用yum安装MySQL需要从网上下载MySQL的一系列组件,这个过程非常耗时且有下载中断的可能,如果想要快速安装MySQL,可以先在网上将MySQL的离线包下载下来传到系统内进行安装,本文以CentOS7和MySQL8.0.19为例讲解 MySQL的快速安装和配置方法. 1.操作系统:CentOS7_x64 2.数据库版本:MySQL-8.0.19 离线包下载: 链接: https://pan.baidu.com/s/1OdehL8MoCe44nJ-SkkW8xw

  • MySQL8.0 如何快速加列

    前言: 很早就听说 MySQL8.0 支持快速加列,可以实现大表秒级加字段.笔者自己本地也有8.0环境,但一直未进行测试.本篇文章我们就一起来看下 MySQL8.0 快速加列到底要如何操作. 1.了解背景信息 表结构的变更是业务运行过程中比较常见的需求之一,在 MySQL 的环境中,可以使用 Alter 语句来完成这些操作,这些 Alter 语句对应的操作通常也称之为 DDL 操作.通常情况下大表的 DDL 操作都会对业务有很明显的影响,需要在业务空闲,或者是维护的时候做.MySQL 5.7 支

  • vue3.0项目快速搭建的完整步骤记录

    vue3.0项目快速搭建的完整步骤记录

    目录 一.我们要确保vue/cli版本在4.5.0以上,才能更好的支持3.0 二.通过vue/cli3创建我们的第一个项目 Router CSS 预编译 ESLint 语法校验 运行项目 升级vue 三.vue3.0相比vue2.0改进和新特性 总结 如何搭建一个vue3.0基础项目? 一.我们要确保vue/cli版本在4.5.0以上,才能更好的支持3.0 //安装最新vue/cli yarn global add @vue/cli //或 npm install -g @vue/cli 用vu

  • mysql 8.0.19 win10快速安装教程

    本文教程为大家分享了mysql 8.0.19安装教程,供大家参考,具体内容如下 1.下载.zip安装文件 2.根目录存放my.ini,文件路径用"/"分割,例如: [mysqld] port=3306 basedir=F:/mysql-8.0.19-winx64/bin datadir=F:/mysql-8.0.19-winx64/data max_connections=200 max_connect_errors=10 character-set-server=UTF8MB4 de

  • jQuery Easyui快速入门教程

    jQuery Easyui快速入门教程

    1.什么是JQuery EasyUI jQuery EasyUI是一组基于JQuery的UI插件集合,而JQueryEasyUI的目标就是帮助开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的JavaScript,也不需要对css样式有深入的了解,开发者需要了解的只是一些简单的html标签. 2.学习jQuery EasyUI的条件 因为JQueryEasyUI是基于jQuery的UI库,所以,必须需要JQuery课程的基础. 3.JQuery EasyUI的特点 基于JQu

  • ReactJs快速入门教程(精华版)

    ReactJs快速入门教程(精华版)

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略ReactJs的风采吧~~ 文章有点长,耐心读完,你会有很大收获哦~   一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西

随机推荐