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

随机推荐

只需要4步就可以将asp.net mvc变成SPA(单页面)应用,实现无刷新页面切换!
SENNA.js Senna.js是一个超快速的单页面应用程序引擎,轻松构建基于Web的现代应用程序,只有大约8KB的JavaScript而没有任何依赖性.还提供非常酷炫的动画效果.想要详细了解的朋友 ...
Linux常用命令详解（week1_day1_2）--技术流ken
本节内容 aliasunaliasunamesuhostnamehistorywhichwcwwhowhoamipingkillseqdudffreedate 命令详解 1. alias 设置.’查看 ...
c# Task 篇幅二
上面一篇https://i.cnblogs.com/EditPosts.aspx?postid=10444773我们介绍了Task的启动,Task的一些方法以及应用,今天我们着重介绍一下Task其它概 ...
MySQL 笔记整理（6） --全局锁和表锁：给表加个字段怎么有这么多阻碍
笔记记录自林晓斌(丁奇)老师的<MySQL实战45讲> 6) --全局锁和表锁:给表加个字段怎么有这么多阻碍数据库锁设计的初衷是处理并发问题.作为多用户共享的资源,当出现并发访问的时候, ...
vb.net MakeWParam
Private Function MakeWParam(loWord As Integer, hiWord As Integer) As Integer ) End Function
JavaScript 条件语句
if语句有些代码块只能在一定条件下运行,通过if.if else.else代码块,可以让你的代码按条件执行. // 控制流 var foo = true; var bar = false; ...
【小o地图Excel插件版】不止能做图表，还能抓58、大众点评网页数据...
小o地图Excel插件版:一款基于Excel软件开发的地图软件,提供基于Excel表格进行地理数据挖掘.地理数据分析.地图绘制.地图图表等功能的工具类软件.具有易用.高效.稳定的特点,能够满足地理数据 ...
js 颜色16进制转RGB方法
//颜色16进制转RGB方法 String.prototype.colorRgb = function(){ var sColor = this.toLowerCase(); //十六进制颜色值的正则 ...
SBC数据格式转换软件
北京博信施科技有限公司是一家专业从事数据格式转换.数据处理领域研发软件产品和解决方案实施的技术型公司.在当今信息时代,PDF文档格式是在Internet上进行电子文档发行和数字化信息传播的理想文档格式 ...
Android studio,第一个生成，调用成功的jni(说多了都是泪）
0x01 序言: 泪从何处说起呢?其实很早以前就用过android studio写过c++,但是,但是一直没有成功生成过so文件,所以心中一直有一个纠结...为什么不成功呢... 直到今天,由于工作的 ...

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

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

随机推荐

热门专题