页面中word文本框的编辑,两种方式
大致效果图(对其中的功能可以增减):

实现方法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文本框的编辑,两种方式的更多相关文章
- Android中H5和Native交互的两种方式
Android中H5和Native交互的两种方式:http://www.jianshu.com/p/bcb5d8582d92 注意事项: 1.android给h5页面注入一个对象(WZApp),这个对 ...
- python中字典的循环遍历的两种方式
开发中经常会用到对于字典.列表等数据的循环遍历,但是python中对于字典的遍历对于很多初学者来讲非常陌生,今天就来讲一下python中字典的循环遍历的两种方式. 注意: python2和python ...
- C语言中存储多个字符串的两种方式
C语言中存储多个字符串的两种方式 方式一 二维字符串数组 声明: char name[][] = { "Justinian", "Momo", " ...
- Jsp页面中使用fckeditor控件的两种方法 [转]
fckeditor控件请到官方网站下载http://www.fckeditor.net,本例主要用到FCKeditor_2.6.3.zip.fckeditor-java-demo-2.4.1.zip. ...
- 在基于MVC的Web项目中使用Web API和直接连接两种方式混合式接入
在我之前介绍的混合式开发框架中,其界面是基于Winform的实现方式,后台使用Web API.WCF服务以及直接连接数据库的几种方式混合式接入,在Web项目中我们也可以采用这种方式实现混合式的接入方式 ...
- java中读取配置文件ResourceBundle和Properties两种方式比较
今天在开发的时候,需要把一些信息放到配置文件中,方便后续的修改,注意到用的是ResourceBundle读取配置文件的方式,记得之前也见过使用Properties的方式,就比较好奇这两种方式的区别,网 ...
- 程序中使用log4J打印信息的两种方式
(1)通过org.apache.commons.logging.Log 接口实例化: public static Log log = LogFactory.getLog(String name); p ...
- html和jsp页面中把文本框禁用,只能读不能写的方法
方法常用有三种: 第一种,使用 onfocus="this.blur()" <input name="deptno" type="text& ...
- web页面中快速找到html对应元素两种方法
一.第一种方法(通过先进入开发模式然后再去选择网页元素) 1.打开IE.Chrome.FireFox等,按 F12 键进入开发模式 2.在打开的控制窗口左上角有个 箭头 按钮,点击它之后,此时将鼠标 ...
随机推荐
- Django - 获取表单数据的三种方式
1.query set 对象 2.字典 3.query set 元组 备注:对象通过 ”对象.列名"方式访问,元组通过“对象.索引”方式访问.
- office 2016最新安装及激活教程(KMS)【亲测有效】!!
前言 博主的一个朋友,咳咳--你们懂得,想装office,于是我就上网找了一下激活的方法,亲测有效,而且也没有什么广告病毒之类的,还比较方便,所以传上来方便大家.好了,进入正题: 安装office 首 ...
- Linux之FTP/TFTP(vsftp、vsftpd) HTTP(httpd、apache) DHCP(dhcpd)
FTP/TFTP(vsftp.vsftpd): FTP是File Transfer Protocol(文件传输协议)而中文简称为"文传协议".用于Internet上的控制文件的双向 ...
- bupt summer training for 16 #8 ——字符串处理
https://vjudge.net/contest/175596#overview A.设第i次出现的位置左右端点分别为Li,Ri 初始化L0 = 0,则有ans = sum{ (L[i] - L[ ...
- springMVC+springJDBC+Msql注解模式
最近基于Spring4.X以上的版本写了一个springMVC+springJDBC+Msql注解模式的一个项目,之中也遇到过很多问题 ,为了防止以后遇到同样问题现记录一下知识点以及详细配置. 首先我 ...
- noip模拟赛 赤の夜
题目背景 下发压缩包链接: https://pan.baidu.com/s/1geC4ooz 密码: 3vpt(同T1) 正在想这么说的时候—— 突然涌出一种强烈的晕眩感. 这是,什么……? 眼花吗? ...
- hdu 1532&&poj1273 基础最大流
#include<stdio.h> #include<string.h> #include<queue> #include<iostream> usin ...
- spring boot.定时任务问题记录(TaskScheduler/ScheduledExecutorService异常)
一.背景 spring boot的定时任务非常简单,只需要在启动类中加上@EnableScheduling注解,然后在对应的方法上配置@Scheduled就可以了,系统会自动处理并按照Schedule ...
- supervisord进程管理工具小结
前言 昨天临近下班,发现业务队列处理不及时,正好想到不久之前,上了一个新功能:通过队列异步转发微信消息.可能是消息太多了处理不过来,没怎么多想,处理不过来了,多增加处理进程就可以了,后来发现自己so ...
- Ambari-部署常见问题
重新启动ambari-server端后调用install.start API后返回200 导致该问题的解决办法是server在启动后没有收到agent的心跳即没有与agent建立连接,在此时进行API ...