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

实现方法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. PHP 魔术方法浅谈

    php中把以两个下划线(__)开头的方法称之为魔术方法.魔术方法包括: __construct()    类的构造方法  构建方法时被调用 __destruct()      类的析构方法  明确销毁 ...

  2. [JS]window.location获取url各项参数详解

    window.location方法后还还可以带href,search等参数,下面我们来看看获取url各项参数的办法. URL即:统一资源定位符 (Uniform Resource Locator, U ...

  3. models中,对于(Small)IntegerField类型字段的choices参数在前端的展示

    # models.py class UserInfo(models.Model): gender_choices = ( (1, "男"), (2, "女"), ...

  4. JS布尔值(Boolean)转换规则

    原文作者: louis 原文链接: http://louiszhai.github.io/2015/12/11/js.boolean/ 语法 众所周知, JavaScript有五个基本的值类型:num ...

  5. android 彩信附件添加删除

    http://blog.csdn.net/yuzhu_guan2012/article/details/6679154

  6. SVG格式图片转成HTML中SVG的Path路径

    AI图标制作完成之后,保存的svg文件包含许多AI的信息,如果要在HTML中使用,我们需要在svg文件中提取/修改信息,重新保存. 1.在AI中已经完成图标,要保存SVG文件,点击“文件(File)” ...

  7. noip模拟赛 时之终末

    题目背景 圣乔治:不用拘泥,剩下的时间已不多…… 圣乔治:直呼我的真名—— 丝佩碧雅:圣乔治大人 圣乔治:如今,已无法维持结界,或是抑制深渊的前进 圣乔治:既然如此,我将献上这副身躯,期望最后的战斗 ...

  8. c语言文件包含

    文件包含是指一个C语言源程序中将另一个C语言源程序包含进来,通过include预处理指令实现. 一般形式: #include”被包含文件名” 或#include<被包含文件名> 2.  作 ...

  9. Linux网络编程——浅谈 TCP 三次握手和四次挥手

    一.tcp协议格式 二.三次握手 在 TCP/IP 协议中.TCP 协议提供可靠的连接服务,採用三次握手建立一个连接. 第一次握手:建立连接时,client发送 syn 包(tcp协议中syn位置1. ...

  10. spark streaming updateStateByKey 使用方法

    updateStateByKey 解释: 以DStream中的数据进行按key做reduce操作,然后对各个批次的数据进行累加 在有新的数据信息进入或更新时.能够让用户保持想要的不论什么状.使用这个功 ...