12-tinyMCE文本编辑器+图片上传预览+页面倒计时自动跳转

文本编辑器插件：
1.将tinymce文件夹全部复制到webContent下
2.tinymce/js目录下放 jquery等三个js文件
3.语言包：tinymce/js/tinymce/langs目录下放zh_CN.js

4.测试：新建test.jsp
在页面中写一个<textarea></textarea>
在页面引入js文件

并在页面加入一段javascript代码

编辑器实例：

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE html>

<html>

<head>

<base href="<%=basePath%>"/>

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

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

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

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

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

</head>

<script type="text/javascript">

tinymce.init({

    selector: "textarea",

    height: 200,

    width:800,

    language:'zh_CN',

    plugins: [

        'advlist autolink lists link  charmap print preview hr anchor pagebreak',

        'searchreplace wordcount visualblocks visualchars code fullscreen',

        'insertdatetime media nonbreaking save table contextmenu directionality',

        'emoticons template paste textcolor colorpicker textpattern imagetools codesample toc help '

      ],

      toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',

      toolbar2: 'print preview media | forecolor backcolor emoticons | codesample help ',

    menubar: false

});

</script>

<body>

　　<form action="topic" method="post">

　　　　<textarea rows="" cols="" name="content"></textarea>

　　　　<input type="submit" value="提交"/>
　　</form>

</body>

</html>

图片上传预览实例：

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE html>

<html>

<head>

<base href="<%=basePath%>"/>

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>注册</title>

<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/gloab.css" rel="stylesheet">

<link href="css/index.css" rel="stylesheet">

<script src="js/jquery-1.11.1.min.js"></script>

<script src="js/register.js"></script>

</head>

<script type="text/javascript">

    //下面用于图片上传预览功能

    function setImagePreview(avalue) {

        var docObj = document.getElementById("doc");

        var imgObjPreview = document.getElementById("preview");

        if (docObj.files && docObj.files[0]) {

            //火狐下，直接设img属性

            imgObjPreview.style.display = 'block';

            imgObjPreview.style.width = '150px';

            imgObjPreview.style.height = '180px';

            //imgObjPreview.src = docObj.files[0].getAsDataURL();

            //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式

            imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);

        } else {

            //IE下，使用滤镜

            docObj.select();

            var imgSrc = document.selection.createRange().text;

            var localImagId = document.getElementById("localImag");

            //必须设置初始大小

            localImagId.style.width = "150px";

            localImagId.style.height = "180px";

            //图片异常的捕捉，防止用户修改后缀来伪造图片

            try {

                localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";

                localImagId.filters

                        .item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;

            } catch (e) {

                alert("您上传的图片格式不正确，请重新选择!");

                return false;

            }

            imgObjPreview.style.display = 'none';

            document.selection.empty();

        }

        return true;

    }

</script>

<body class="bgf4">

<form id="myform" action="register" method="post" enctype="multipart/form-data">

    <div class="item col-xs-12">

        <span class="intelligent-label f-fl"><b class="ftx04">*</b>头像：</span>

        <div class="f-fl item-ifo">

            <input type="file" name="file" id="doc" style="width: 150px;" onchange="setImagePreview()">

            <span class="ie8 icon-close close hide" style="right:55px"></span>

            <span class="showpwd" data-eye="rePassword"></span>

            <label class="icon-sucessfill blank hide"></label>

            <label class="focus">

            <div id="localImag">

        <img id="preview" src="" width="150" height="180"

            style="display: none; width: 150px; height: 180px;">

            </div>

            </label>

            <label class="focus valid"></label>

        </div>

    </div>

</form>

</body>

</html>

3秒后自动跳转实例：

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE html>

<html>

<head>

<base href="<%=basePath%>"/>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta http-equiv="refresh" content="3;URL=<%=basePath%>/website/index.jsp">

<title>Insert title here</title>

</head>

<body>

    <div align="center">

        欢迎注册成功，3秒返回首页！！！

    </div>

</body>

</html>

12-tinyMCE文本编辑器+图片上传预览+页面倒计时自动跳转的更多相关文章

html 图片上传预览
Html5 upload img 2012年12月27日 20:36 <!DOCTYPE HTML> <html> <head> <meta http-equ ...
模拟QQ心情图片上传预览
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...
signup图片上传预览经常总结
html <html> <head> <meta charset="utf-8" /> <meta http-equiv="X- ...
兼容好的JS图片上传预览代码
转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...
Jquery图片上传预览效果
uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...
[前端 4] 使用Js实现图片上传预览
导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...
Javascript之图片上传预览
使用Javascript之图片上传预览,我们无需上传到服务器中,兼容所有浏览器. 关键方法是使用微软库filter:progid:DXImageTransform.Microsoft.AlphaIma ...
HTML5 图片上传预览
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...
ASP.NET工作笔记之一：图片上传预览及无刷新上传
转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...

随机推荐

Chapter 4 Invitations——27
"Myself, obviously." He enunciated every syllable, as if he were talking to someone mental ...
阿里注册中心nacos使用整合Dubbo-原创
阿里注册中心nacos是今年开源的框架,一开始以为就是个zk.后面看了图才明白他对标的竟然是consul\eureka,最重要是完美支持dubbo.我想今年开源它也是别有用意 .(目前nacos0.7 ...
Linux基础知识第四讲,文件内容命令
目录一丶常用命令 1.cat命令演示以及常用选项 2.grep 搜索命令的使用 3.echo 以及重定向的使用 4.管道概念一丶常用命令序号命令对应英文作用 01 cat 文件名 con ...
云原生实践之 RSocket 从入门到落地：Servlet vs RSocket
技术实践的作用在于:除了用于构建业务,也是为了验证某项技术或框架是否值得大规模推广. 本期开始,我们推出<RSocket 从入门到落地>系列文章,通过实例和对比来介绍RSocket.主要围 ...
Shell编程(week4_day2)--技术流ken
本节内容 1. shell变量简介 2. 定义变量 3. 使用变量 4. 修改变量的值 5. 单引号和双引号的区别 6. 将命令的结果赋值给变量 7. 删除变量 8. 变量类型 9. 特殊变量列表 1 ...
k8s架构分析（二）--技术流ken
master节点 k8s的集群由master和node组成,节点上运行着若干k8s服务. master节点之上运行着的后台服务有kube-apiserver .kube-scheduler.kube- ...
第7章贡献 - Identity Server 4 中文文档(v1.0.0)
我们对社区贡献非常开放,但您应该遵循一些指导原则,以便我们可以毫不费力地处理这个问题. 7.1 如何贡献? 最简单的方法是打开一个问题并开始讨论.然后我们可以决定是否以及如何实现功能或更改.如果您应提 ...
Asp.net的DataGrid实现列冻结（C#）
# Asp.net的DataGrid实现列冻结(C#) 一.写在前面列冻结即在拖动横向滚动条时,冻结的列会随着滚动条移动,使得该列不会因为拖动滚动条而被隐藏,呈现出仿佛冻结的效果.列冻结与表头冻结是 ...
linux下tomcat启动很慢的解决办法
1.用vim编辑器打开tomcat的bin目录下的catalina.sh [root@iz09a32x1sghz3z bin]# vi /usr/local/src/java/tomcats/tomc ...
Axure rp8团队原型图开发
说道原型图大家都不陌生,Axure rp作为这类工具可以说在网页布局的设计给开发人员提供了很大便利,目前我只熟悉过这一种,不知道小伙伴们有没有其他好用的工具推荐给大家用一下吗.好了,废话不多说,今天给 ...

12-tinyMCE文本编辑器+图片上传预览+页面倒计时自动跳转

12-tinyMCE文本编辑器+图片上传预览+页面倒计时自动跳转的更多相关文章

随机推荐

热门专题