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

最新推荐文章于 2024-07-31 16:33:32 发布

weixin_30633507

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量651

点赞数

文章标签： javascript java ViewUI

原文链接：http://www.cnblogs.com/wlxslsb/p/10769287.html

版权

文本编辑器插件：
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>

转载于:https://www.cnblogs.com/wlxslsb/p/10769287.html

weixin_30633507

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
12-tinyMCE文本编辑器+图片上传预览+页面倒计时自动跳转

文本编辑器插件：1.将tinymce文件夹全部复制到webContent下2.tinymce/js目录下放 jquery等三个js文件3.语言包：tinymce/js/tinymce/langs目录下放zh_CN.js4.测试：新建test.jsp 在页面中写一个<textarea></textarea> 在页面引入js文件并在页面加入一段javascript...
复制链接

扫一扫