大致效果图(对其中的功能可以增减):

实现方法1:调用js
<link href="../../platform/js/kindeditor/themes/default/default.css" rel="stylesheet" rel="stylesheet"/>
<link href="../../platform/js/kindeditor/plugins/code/prettify.css" rel="stylesheet" rel="stylesheet"/> <script charset="utf-8" src="../../platform/js/kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="../../platform/js/kindeditor/lang/zh-CN.js"></script>
<script charset="utf-8" src="../../platform/js/kindeditor/plugins/code/prettify.js"></script> <script type="text/javascript">
$(function() {
KindEditor.ready(function(K) {
var editor1 = K.create('textarea[name="articleContent"]', {
width : '100%',
height : '450px',
       //上传图片,保存图片的方法
uploadJson : 'editorUpload.do?folderType=gongGao',
allowFileManager : true,
afterBlur: function () {
this.sync();
}
});
});
});
</script> 文章内容:<textarea id="articleContent" name="articleContent" class="ckeditor">${cmsArticle.articleContent}</textarea>
实现方法二:调用js
<script src="../../platform/js/ckeditor/ckeditor.js"></script> <script type="text/javascript">
$(function() {
CKEDITOR.replace($("#articleContent")[],
{
toolbar : [
[ 'Bold', 'Italic', 'Underline', 'Subscript', 'Superscript', '-', 'RemoveFormat' ],
[ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ],
[ 'Image', 'Format', 'Font', 'FontSize', 'TextColor', 'BGColor' ] ],
filebrowserUploadUrl : 'ckeditorUpload.do?folderType=gongGao&fileType=file',//上传附件
filebrowserImageUploadUrl : 'ckeditorUpload.do?folderType=gongGao&fileType=file',//上传图片
language : 'zh-cn',
width : '100%',
height : '600px'
});
});
</script> 文章内容:<textarea id="articleContent" name="articleContent" class="ckeditor">${cmsArticle.articleContent}</textarea>

页面中word文本框的编辑,两种方式的更多相关文章

  1. Android中H5和Native交互的两种方式

    Android中H5和Native交互的两种方式:http://www.jianshu.com/p/bcb5d8582d92 注意事项: 1.android给h5页面注入一个对象(WZApp),这个对 ...

  2. python中字典的循环遍历的两种方式

    开发中经常会用到对于字典.列表等数据的循环遍历,但是python中对于字典的遍历对于很多初学者来讲非常陌生,今天就来讲一下python中字典的循环遍历的两种方式. 注意: python2和python ...

  3. C语言中存储多个字符串的两种方式

    C语言中存储多个字符串的两种方式 方式一    二维字符串数组 声明: char name[][] = { "Justinian", "Momo", " ...

  4. Jsp页面中使用fckeditor控件的两种方法 [转]

    fckeditor控件请到官方网站下载http://www.fckeditor.net,本例主要用到FCKeditor_2.6.3.zip.fckeditor-java-demo-2.4.1.zip. ...

  5. 在基于MVC的Web项目中使用Web API和直接连接两种方式混合式接入

    在我之前介绍的混合式开发框架中,其界面是基于Winform的实现方式,后台使用Web API.WCF服务以及直接连接数据库的几种方式混合式接入,在Web项目中我们也可以采用这种方式实现混合式的接入方式 ...

  6. java中读取配置文件ResourceBundle和Properties两种方式比较

    今天在开发的时候,需要把一些信息放到配置文件中,方便后续的修改,注意到用的是ResourceBundle读取配置文件的方式,记得之前也见过使用Properties的方式,就比较好奇这两种方式的区别,网 ...

  7. 程序中使用log4J打印信息的两种方式

    (1)通过org.apache.commons.logging.Log 接口实例化: public static Log log = LogFactory.getLog(String name); p ...

  8. html和jsp页面中把文本框禁用,只能读不能写的方法

    方法常用有三种: 第一种,使用   onfocus="this.blur()" <input name="deptno" type="text& ...

  9. web页面中快速找到html对应元素两种方法

    一.第一种方法(通过先进入开发模式然后再去选择网页元素) 1.打开IE.Chrome.FireFox等,按 F12 键进入开发模式 2.在打开的控制窗口左上角有个  箭头 按钮,点击它之后,此时将鼠标 ...

随机推荐

  1. oracle数据库视图,序列,索引的sql语句查看

    1.视图:相当于表,可以用select * from tab;查看所有表和视图: 2.序列和索引可以利用select * from user_indexes 或者user_sequences;进行查看 ...

  2. 使用No-Conflict模式,其实就是对jQuery进行重命名,再调用。

    <script type="text/javascript" src="/jquery/jquery.js"></script>< ...

  3. IE低版本和高级浏览器对文本输入事件兼容

    1 一般 使用oninput 事件可以监控文本输入事实触发 2 兼容需要使用onpropertychange . 3 兼容写法   var evenInput=DOM元素.oninput || DOM ...

  4. HDU 1465(错排公式)

    不容易系列之一 题意: 一个人要寄n个信封,结果装错了.信纸的编号为1到n,信封的编号为1到n,信纸的编号不能和信封的编号一样,全都不能一样. 思路:错排公式. D(n)表示n件信封装错的所有的情况. ...

  5. redis环境部署

    运维开发技术交流群欢迎大家加入一起学习(QQ:722381733) 一.Redis服务介绍: redis简单来讲就是一个数据库,一个用来存储缓存的数据库容器,主要是让项目数据能写进缓存,为用户提搞更舒 ...

  6. java堆排序实现

    代码如下: public class HeapSort { public static void heapSort(DataWrap[] data) { System.out.println(&quo ...

  7. BUPT2017 springtraining(16) #6 ——图论

    题目链接 A.容易发现最后字符的对应都是一对一的 或者说我们没办法出现最后多对一或者一对多的情况 所以只要算出 ‘a’ - 'z' 每个字符最后对应的字符即可 #include <cstdio& ...

  8. hdu 4786 最小生成树与最大生成树

    /* 题意 :有一些边权值为1和0,判断是否存在一个生成树使得他的总权值为一个斐波那契数. 解法:建立一个最小生成树向里面加权值为1的边替换为0的边,保证原来的联通.因为权值为1,可直接求出最大生成树 ...

  9. [Cogs728] [网络流24题#3] 最小路径覆盖 [网络流,最大流,二分图匹配]

    建图:源点—>边的起点(集合1中的)—>边的终点(集合2中的)—>汇点,所有边权均为1, 计算最大流,最后枚举起点的出边,边权为0的即为匹配上的, 可以这样理解:每条边表示起点和终点 ...

  10. N - Corporate Identity

    Beside other services, ACM helps companies to clearly state their “corporate identity”, which includ ...