1， 安装方法

下载CKEditor插件，然后解压到对应的文件中。建议解压到JS文件夹下面的CKEditor这个文件夹下。下载地址 : http://down.chinaz.com/soft/25168.htm

在需要使用可视化编辑插件时调用CKEditor.js文件。<script type="text/javascript" src="js/CKEditor/ckeditor.js"></script>，然后在当前页面中的window.onload中添加以下语句

var txtMsg = document.getElementById("Msg");

var editor_1 = CKEDITOR.replace(txtMsg);

Msg所在ID代码  ：  <textarea id="Msg" name="Msgname" ></textarea>  /*  在这里限制宽度无效，必须要是这个元素上级或以上才能设置大小高、宽。 可在JS中设置  */

JS获取值得方法为： 获取text值，editor.document.getBody().getText();       获取html， editor.document.getBody().getHtml();

JS赋值方法为 ：editor.setData("<p>DDD</p>");  测试成功

插件是自动适应框架的大小，只能通过外围设置，不能直接在textarea设置，直接在JS中调用时可以设置，代码如下 ：

var editor_1 = CKEDITOR.replace(txtMsg, { skin: "kama", width:700px, height:300px } );  //  宽度700px，高 300px

参考代码如下 ： 

    

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Demo For Ckeditor</title>

        <script type="text/javascript" src="ckeditor_3.6/ckeditor.js"></script>

    </head>

    <body>

        <textarea id="Msg" name="Msg" width="200" height="200"></textarea>

        <input type="button" name="btn_Submit" id="btn_Submit" value="保存" onclick="save()" />

        <script type="text/javascript">

            var txtMsg = document.getElementById("Msg");

            var editor_1 = CKEDITOR.replace(txtMsg, { skin: "kama", width:700, height:300 } );

            editor_1.setData("<p>测试数据</p>");

            function save() {

                alert(editor_1.document.getBody().getHtml());

            }

        </script>

    </body>

</html>

　　

使用 CKEditor编辑插件的更多相关文章

  1. Grid行编辑插件

    //操作列不显示应该就是autoLoad的问题.         Ext.onReady(function () {             Ext.BLANK_IMAGE_URL = "E ...

  2. WordPress 前端投稿/编辑插件 DJD Site Post（支持游客和已注册用户）

    转自:http://www.wpdaxue.com/front-end-publishing.html 说到前端用户投稿,倡萌之前推荐过3个不错的插件: WordPress匿名投稿插件:DX-Cont ...

  3. Eclipse 安装mybatis的编辑插件

    1.MyEditor安装的方式 Eclipse 安装mybatis的编辑插件有以下4种方式,您可以使用下列方法之一来安装MyBatis的编辑器: Eclipse 3.7的(市场客户机安装):此图像拖放 ...

  4. eclipse安装Veloeclipse（Velocity编辑插件）

    eclipse安装Veloeclipse(Velocity编辑插件) Help-->install new software-->Add 增加 Name:Veloeclipse Value ...

  5. ckeditor自定义插件--一键给所有的图片添加链接

    ckeditor自定义插件在网上查了查,感觉还是比较好用的,写了一个一键给编辑器中的所有图片添加链接. 在ckeditor目录下的plugins下建以插件为名的文件夹,在里边建plugin.js文件, ...

  6. easyui+webuploader+ckeditor实现插件式多图片上传-添加图片权限(图片上传人是谁，只能看到自己的图片)

    需求: 实现过程及思路 1.先页面布局 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=" ...

  7. easyui+webuploader+ckeditor实现插件式多图片上传

    需求:在ckeditor编辑器上实现多图片上传并要求另外单独选择ckeditor上传的图片作为封面 页面效果说明: 动态效果图: 第一步:页面布局 <html xmlns="http: ...

  8. jquery编辑插件tinyMCE的使用方法

    jquery编辑插件tinyMCE是一个非常容易集成到您系统的一个html编辑插件,它不像FckEditor那样需要针对专门的后台语言集成,tinyMCE既能做到轻松集成asp.net,php,jav ...

  9. WordPress用户角色及其权限管理编辑插件：User Role Editor汉化版

    如果Wordpress默认的用户角色及权限不能满足您的需求,又觉得修改代码编辑用户权限太麻烦.那不妨试试User Role Editor,Wordpress用户角色及其权限管理编辑插件. User R ...

随机推荐

  1. https://www.jqhtml.com/30047.html strace + 命令: 这条命令十分强大，可以定位你程序到底是哪个地方出了问题

    https://www.jqhtml.com/30047.html 我的Linux手册 服务器 浏览数:72 2019-1-30 原文链接 基础安装 # CentOS sudo yum install ...

  2. 014.Python函数

    一 函数的概念 1.1 函数的含义 功能 (包裹一部分代码 实现某一个功能 达成某一个目的) 1.2 函数特点 可以反复调用,提高代码的复用性,提高开发效率,便于维护管理 1.3 函数的基本格式 # ...

  3. linux 修改IP， DNS -(转自fighter)

    linux下修改IP.DNS.路由命令行设置 ubuntu 版本命令行设置IP cat /etc/network/interfaces # This file describes the networ ...

  4. 存储单位 KB MB bit

  5. 『动善时』JMeter基础 — 31、JMeter中BeanShell断言详解

    目录 1.BeanShell简介 2.Beanshell的内置变量和方法 3.BeanShell断言界面详解 4.BeanShell断言的使用 (1)测试计划内包含的元件 (2)登陆接口请求界面内容 ...

  6. Redis 内存大小限制+键值淘汰策略配置

    限制最大内存 windows 的 maxmemory-policy 策略可能会少一些 # 指定 Redis 最大内存限制,Redis 在启动时会把数据加载到内存中,达到最大内存后,Redis 会先尝试 ...

  7. python实现布隆过滤器及原理解析

    python实现布隆过滤器及原理解析     布隆过滤器( BloomFilter )是一种数据结构,比较巧妙的概率型数据结构(probabilistic data structure),特点是高效地 ...

  8. 学习Python中出现的错误集合（不定时更新）jupyter平台

    出现的问题:1. 本图的错误,一个是line 7 init的两侧应该是是双下划线"__"导致所示错误 2. 本图的错误是 line 12 Student.student_tatal ...

  9. CAP 5.1 版本发布通告 - 你期待的 Redis 来了

    前言 今天,我们很高兴宣布 CAP 发布 5.1 版本正式版,在这个版本里我们同样引入了更多令人激动的新特性和改进,同时也得到越来越多人的喜爱. 得益于社区的反馈和贡献者的支持,在过去的两个月里,我们 ...

  10. 如何保证Qt状态机的最佳性能

    如何保证Qt状态机的最佳性能 How to ensure the best Qt state machine performance 如果您使用Qt进行应用程序开发,并且使用状态机,那么很可能您正在使 ...