使用 CKEditor编辑插件
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编辑插件的更多相关文章
- Grid行编辑插件
//操作列不显示应该就是autoLoad的问题. Ext.onReady(function () { Ext.BLANK_IMAGE_URL = "E ...
- WordPress 前端投稿/编辑插件 DJD Site Post（支持游客和已注册用户）
转自:http://www.wpdaxue.com/front-end-publishing.html 说到前端用户投稿,倡萌之前推荐过3个不错的插件: WordPress匿名投稿插件:DX-Cont ...
- Eclipse 安装mybatis的编辑插件
1.MyEditor安装的方式 Eclipse 安装mybatis的编辑插件有以下4种方式,您可以使用下列方法之一来安装MyBatis的编辑器: Eclipse 3.7的(市场客户机安装):此图像拖放 ...
- eclipse安装Veloeclipse（Velocity编辑插件）
eclipse安装Veloeclipse(Velocity编辑插件) Help-->install new software-->Add 增加 Name:Veloeclipse Value ...
- ckeditor自定义插件--一键给所有的图片添加链接
ckeditor自定义插件在网上查了查,感觉还是比较好用的,写了一个一键给编辑器中的所有图片添加链接. 在ckeditor目录下的plugins下建以插件为名的文件夹,在里边建plugin.js文件, ...
- easyui+webuploader+ckeditor实现插件式多图片上传-添加图片权限(图片上传人是谁，只能看到自己的图片)
需求: 实现过程及思路 1.先页面布局 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=" ...
- easyui+webuploader+ckeditor实现插件式多图片上传
需求:在ckeditor编辑器上实现多图片上传并要求另外单独选择ckeditor上传的图片作为封面 页面效果说明: 动态效果图: 第一步:页面布局 <html xmlns="http: ...
- jquery编辑插件tinyMCE的使用方法
jquery编辑插件tinyMCE是一个非常容易集成到您系统的一个html编辑插件,它不像FckEditor那样需要针对专门的后台语言集成,tinyMCE既能做到轻松集成asp.net,php,jav ...
- WordPress用户角色及其权限管理编辑插件：User Role Editor汉化版
如果Wordpress默认的用户角色及权限不能满足您的需求,又觉得修改代码编辑用户权限太麻烦.那不妨试试User Role Editor,Wordpress用户角色及其权限管理编辑插件. User R ...
随机推荐
- 【转载】Linux踢出其他正在SSH登陆用户
Linux踢出其他正在SSH登陆用户 在一些生产平台或者做安全审计的时候往往看到一大堆的用户SSH连接到同一台服务器,或者连接后没有正常关闭进程还驻留在系统内.限制SSH连接数与手动断开空闲连 ...
- IT菜鸟之思科模拟实验（PT）
思科官方的模拟软件:cisco packet tracer 网卡端口类型: Ethernet(以太网) 十兆 FastEthernet 百兆 GigabitEthernet 千兆 交换机的端口默认都是 ...
- 回归(regression)与分类(classification)的区别
术语监督学习,意指给出一个算法,需要部分数据集已经有正确的答案. " 分类和回归的区别在于输出变量的类型. 定量输出称为回归,或者说是连续变量预测:定性输出称为分类,或者说是离散变量预测. ...
- Python数模笔记-StatsModels 统计回归（4）可视化
1.如何认识可视化? 图形总是比数据更加醒目.直观.解决统计回归问题,无论在分析问题的过程中,还是在结果的呈现和发表时,都需要可视化工具的帮助和支持. 需要指出的是,虽然不同绘图工具包的功能.效果会有 ...
- （数据科学学习手札123）Python+Dash快速web应用开发——部署发布篇
1 简介 这是我的系列教程Python+Dash快速web应用开发的第二十期,在上一期中我介绍了利用内网穿透的方式,将任何可以联网的电脑作为"服务器"向外临时发布你的Dash应用. ...
- 第12讲 | TCP协议（下）：西行必定多妖孽，恒心智慧消磨难
第12讲 | TCP协议(下):西行必定多妖孽,恒心智慧消磨难 如何做个靠谱的人? 有问有答,任务发送和接收有记录,完成有反馈. 如何实现一个靠谱的协议? TCP 协议使用的也是同样的模式.为了保证顺 ...
- Django（43）restful接口规范
restful接口规范 什么是接口规范?接口规范就是为了采用不同的后台语言,也能使用同样的接口获取到同样的数据.如何写接口:接口规范是规范化书写接口的,写接口要写url.响应数据 注:如果将 ...
- Linux 安装配置 tftp 服务器
1.安装TFTP服务 安装服务端 sudo apt-get install tftpd-hpa 安装客服端 sudo apt-get install tftp-hpa 2.创建TFTP服务器目录 cd ...
- 如何查看Oracle SID即instance_name 和 dbname区别
SID 和 instance_name是一个实例名字db_name 是数据库名字搞清两个概念,数据库和实例 实例:实例是数据库启动时初始化的一组进程和内存结构 数据库:数据库则指的是用户存储数据的一 ...
- Resnet-50网络结构详解
解决的问题: 由于梯度消失,深层网络很难训练.因为梯度反向传播到前面的层,重复相乘可能使梯度无穷小.结果就是,随着网络的层数更深,其性能趋于饱和,甚至迅速下降. 核心思想: 引入一个恒等快捷键(也称之 ...