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 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...

随机推荐

初学Java Web(8)——过滤器和监听器
什么是过滤器过滤器就是 Servlet 的高级特性之一,就是一个具有拦截/过滤功能的一个东西,在生活中过滤器可以是香烟滤嘴,滤纸,净水器,空气净化器等,在 Web 中仅仅是一个实现了 Filter ...
cache2go - cachetable源码分析
今天我们来看cachetable.go这个源码文件,除了前面介绍过的主要数据结构CacheTable外还有如下2个类型: 下面先看剩下2个类型是怎么定义的: CacheItemPair非常简单,注释一 ...
DriverManager 驱动管理器类简介 JDBC简介（三）
驱动程序管理器是负责管理驱动程序的,驱动注册以后,会保存在DriverManager中的已注册列表中后续的处理就可以对这个列表进行操作简言之,驱动管理器,就是字面含义,主要负责就是管理驱动概述 ...
Java提高班（五）深入理解BIO、NIO、AIO
导读:本文你将获取到:同/异步 + 阻/非阻塞的性能区别:BIO.NIO.AIO 的区别:理解和实现 NIO 操作 Socket 时的多路复用:同时掌握 IO 最底层最核心的操作技巧. BIO.NIO ...
痞子衡嵌入式：ARM Cortex-M调试那些事（1）- 4线协议标准(JTAG)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家讲的是嵌入式调试里的接口标准JTAG. 在结束<ARM Cortex-M文件那些事>系列文章之后,痞子衡休整了一小段时间,但是讲课的 ...
Zuul上实现限流（spring-cloud-zuul-ratelimit）
简述 Spring Cloud Zuul RateLimit项目Github地址: https://github.com/marcosbarbero/spring-cloud-zuul-ratelim ...
Java的几个基本类型之间的相互转换
前言: 转载申明: 作者:王蒙链接:http://matt33.com/2015/10/27/TheTransformOfJava/ 之前在写java程序的时候,经常会遇到很多的需要需要转换基础数据 ...
DSAPI多功能组件编程应用-文件类
[DSAPI.DLL下载地址] 本节内容,是属于"无需过多说明"就能使用的功能.由于实在是太简单,我就简单地示例一下. DSAPI.文件类.获取可读性强的字节大小信息(&q ...
[转]Gitlab-CI持续集成之Runner配置和CI脚本
本文转自:https://www.cnblogs.com/jiukun/p/7481287.html 一.简介 1. 为实现持续集成,需为该项目准备以下两样东西: 1)软件集成脚本.(gitlab-c ...
python-操作文件和目录
操作文件和目录为文件和目的操作经常用到os模块和shutil模块. 常用方法: 获取当前脚本工作的目录路径:os.getcwd(),返回的是str类型. 返回指定目录下的所有文件和目录名:os.li ...

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

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

随机推荐

热门专题