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

随机推荐

【Python3爬虫】第一个Scrapy项目
Python版本:3.5 IDE:Pycharm 今天跟着网上的教程做了第一个Scrapy项目,遇到了很多问题,花了很多时间终于解决了== 一.Scrapy终端(scrapy shell) Sc ...
mongodb分片扩展架构
目录一.简介二.分片集群三.数据分布策略四.Mongos访问模式五.Config元数据六.分片均衡参考文档一.简介 MongoDB目前3大核心优势:『灵活模式』+ 『高可用性』 + 『 ...
[整理+原创]ubuntu Thunderbird Mail设置自动提醒
开机启动的设置方法 // 在终端输入 gnome-session-properties 然后添加thunderbird为启动项方法1——自动提醒下载插件:Thunderbird Mail客户端菜单 ...
【Vue.js】加载更多—vue-infinite-scroll
引言今天用到了一个加载更多的插件,用起来很方便,插件的名字叫做vue-infinite-scroll 我们可以去npmjs.com官网看一下这个vue-infinite-scroll的用法,官网上面 ...
跨站脚本攻击xss学习
0.认识跨站脚本举一个跨站脚本的简单例子. 假设一个页面将用户输入的参数直接显示到页面之中.(比如有如下代码) 在实际的浏览器中,在param中提交的参数正常会展示到页面之中.比如输入下面的URL: ...
Electron 创建一个空白的界面
添加应用首先添加一个Lorikeet版本的Electron应用. 'use strict' const electron = require('electron'); const app = ele ...
.NET平台下使用MongoDB入门教程
适合人群:完全没有接触MongoDB或对MongoDB有一点了解的C#开发人员.因为本文是一篇入门级的文章. 一.了解MongoDB MongoDB是一个基于分布式文件存储的数据库.由C++语言编写 ...
详解原生JS回到顶部
第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS返回顶部. HTML代码: ? 1 ...
文件类型解析漏洞防御与攻击（PHP）
简介: 解析漏洞主要是一些特殊文件被iis.Apache.Nginx等服务在某种情况下解释成脚本文件格式并得以执行而产生的漏洞,一般的思路都是用图片木马来欺骗服务器,上传webshell,达到提权的目 ...
Dynamics 365中的非交互式账号(Non-interactive User)介绍
摘要: 本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复272或者20180616可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyon ...

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

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

随机推荐

热门专题