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. 保姆级别的RabbitMQ教程！一看就懂！（有安装教程，送安装需要的依赖包，送Java、Golang两种客户端教学Case）

    保姆级别的RabbitMQ教程!一看就懂!(有安装教程,送安装需要的依赖包,送Java.Golang两种客户端教学Case)   目录 什么是AMQP 和 JMS? 常见的MQ产品 安装RabbitM ...

  2. 013.Ansible Playbook include

    一 include 当项目越大,tasks越多的时候.如果将多有的task写入一个playbook中,可读性很差,就需要重新组织playbook 可以把一个playbook分成若干份晓得palyboo ...

  3. HDFS 的内存存储是什么？

    引言 HDFS 的定位就是一个文件系统,用于存储文件,而 HDFS 对于文件的存储方式有两种: 内存存储 异构存储 内存存储 什么是内存存储? 首先,我们来了解一下到底什么是 "内存存储&q ...

  4. Kubernetes集群搭建 ver1.20.5

    目录 部署方式 1. 基础环境准备 1.1 基础初始化 1.2 安装docker 2. 部署harbor及haproxy高可用反向代理 2.1 镜像加速配置 2.2 高可用master可配置 3. 初 ...

  5. 我的Python书被台湾的出版社引进版权了，书的名字也更吸引人了

    我去年出了一本Python书,基于股票大数据分析的Python入门实战,在这本书里,我是用股票范例讲述Pythorn的爬虫,数据分析和机器学习知识点,如下是京东的连接. https://item.jd ...

  6. 火币HBAI量化币圈唯一免费量化炒币机器人

    量化交易是一种投资方法.以先进的数学模型替代人为的主观判断,利用计算机技术从庞大的历史数据中海选能带来超额收益的多种"大概率"事件以制定策略,极大地减少了投资者情绪波动的影响,避免 ...

  7. Paddle Inference原生推理库

    Paddle Inference原生推理库 深度学习一般分为训练和推理两个部分,训练是神经网络"学习"的过程,主要关注如何搜索和求解模型参数,发现训练数据中的规律,生成模型.有了训 ...

  8. CodeGen概述

    CodeGen概述 CodeGen是在协同开发环境中工作的软件开发人员可以用来生成源代码的工具.该代码可能是Synergy DBL代码,也可能是其他语言的源代码.CodeGen并不局限于为任何特定的开 ...

  9. 基于TensorRT车辆实时推理优化

    基于TensorRT车辆实时推理优化 Optimizing NVIDIA TensorRT Conversion for Real-time Inference on Autonomous Vehic ...

  10. C语言真正的编译过程

    说实话,很多人做了很久的C/C++,也用了很多IDE,但是对于可执行程序的底层生成一片茫然,这无疑是一种悲哀,可以想象到大公司面试正好被问到这样的问题,有多悲催不言而喻,这里正由于换工作的缘故,所以打 ...