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

随机推荐

Babel presets stage
在一些新框架的代码中,常基于es6/7标准来书写代码.鉴于这些标准被没有被浏览器广泛支持,我们一般使用babel来将使用e6/7标准书写的代码降级编译(或者说转译)为浏览器可解析的es3/5代码. 以 ...
Linux基础知识第三讲,拷贝文件跟移动文件命令
目录 Linux基础知识第三讲,拷贝文件跟移动文件命令一丶常用命令 1.tree命令常用选项 2.cp复制文件命令 3.mv 命令的使用 Linux基础知识第三讲,拷贝文件跟移动文件命令一丶常用命 ...
java内置线程池ThreadPoolExecutor源码学习记录
背景公司业务性能优化,使用java自带的Executors.newFixedThreadPool()方法生成线程池.但是其内部定义的LinkedBlockingQueue容量是Integer.MAX ...
Django 系列博客（十四）
Django 系列博客(十四) 前言本篇博客介绍在 html 中使用 ajax 与后台进行数据交互. 什么是 ajax ajax(Asynchronous Javascript And XML)翻译 ...
(4)Maven快速入门_4在Spring+SpringMVC+MyBatis+Oracle+Maven框架整合运行在Tomcat8中
利用Maven 创建Spring+SpringMVC+MyBatis+Oracle 项目分了三个项目 Dao (jar) Service (jar) Controller (web) ...
Ubuntu16.04 安装ROS及其IDE
一. ROS的安装 1. 进入ROS官方网站 http://wiki.ros.org/ 2. Install -> ROS Kinetic Kame -> Ubuntu 3. 详情可参考所 ...
nginx系列1：认识nginx
nginx介绍 nginx是什么呢?可以看下官方网站的定义: nginx [engine x] is an HTTP and reverse proxy server, a mail proxy se ...
Elasticsearch单机双节点集群部署实战
一.安装第一个ElasticSearch(主节点) 1.创建es用户,启动es不能使用root用户 useradd es passwd es12 root用户进入/home/es目录下 2.获取Ela ...
JavaScript函数继承
在ES6中有了继承,使用extends关键字就能实现.但这里讲的讲的不是这种,而是ES6之前的几种实现继承的方式. (一)原型继承 ECMAScript中将原型链作为实现继承的主要方法.其基本思想是利 ...
安卓开发：UI组件-RadioButton和复选框CheckBox
2.5RadioButton 为用户提供由两个及以上互斥的选项组成的选项集. 2.5.1精简代码在按钮变多之后,多次重复书写点击事件有些繁琐,我们在这里创建一个事件OnClick,每次点击时调用该事 ...

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

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

随机推荐

热门专题