Java 下拉框多选、富文本【只列出关键部分】

最新推荐文章于 2024-03-13 09:25:19 发布

原创最新推荐文章于 2024-03-13 09:25:19 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#富文本编辑器 #多选下拉框

java 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何在Java项目中使用TinyEditor作为富文本编辑器，并结合Bootstrap-Select和DropDownBox实现多选下拉框功能。通过jsp代码示例，展示了具体实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码块

jsp代码富文本使用TinyEditor、下拉框使用Bootstrap-Select 、DropDownBox[其中所需的js、css请自行下载]，例如：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

<!-- 富文本 -->
    <link rel="stylesheet" href="static/desk/testyle.css">

<!-- 多选框 -->
  <link rel="stylesheet" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
  <link rel="stylesheet" href="static/Bootstrap-select/dist/css/bootstrap-select.css">

  <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>
  <script src="static/Bootstrap-select/dist/js/bootstrap-select.js"></script>

</head>
<body>
    <div>
        <form action=" " name="Form" id="Form" method="post">
    <div>
        <table> 
            <tr>
            <td >通知部门:</td>
        <div>
            <select id="receiveorglist" name="receiveorglist" class="selectpicker" multiple data-done-button="true">
             <option value="1">1</option> 
            <option value="2">2</option>    
            <option value="3">3</option>    
            <option value="4">4</option>    
            <option value="5">5</option>    
        //也可以根据自己开发的实际情况 ，使用<c:forEach>遍历<option>的选项    
         </select>
     </div>
        </td>
    </tr>
</table>
    <table id="table_report">
    <tr>
        <td>通知内容:</td>
        <!-- 富文本 -->
        <td>
        <textarea id="contentdetail"  name="contentdetail" style="width: 400px; height: 200px;" ></textarea>
        </td>
        </tr>
    </table>
        <table>
            <tr>
            <td ><a onclick="save();">保存</a> 
            //返回使用的处理机制是：返回上一级访问页面
        <input type="button" name="button1" id="button1" value="返回" onclick="history.go(-1)"/>
        </td>
        </tr>
        </table>
    </div>
    </form>
</div>
<!-- 多选框 -->
<script src="static/dropDownBox/js/jquery.multiselect.filter.js"></script>
<script src="static/dropDownBox/js/jquery.multiselect.filter.min.js"></script>
<script src="static/dropDownBox/js/jquery.multiselect.js"></script>
<script src="static/dropDownBox/js/jquery.multiselect.min.js"></script>

<!-- 富文本 -->
<script type="text/javascript" src="static/desk/tinyeditor.js"></script>
<script type="text/javascript">
    //富文本
new TINY.editor.edit('editor',{
        id:'contentdetail', 
    // (必须)上面第二步中定义的textarea的id
        width:584, 
    // (选填) 编辑器宽度
        height:175,
     // (选填) 编辑器高度
        cssclass:'te',
     // (选填) 编辑器的class，用来通过css控制样式
        controlclass:'tecontrol',
     // (选填) 编辑器上按钮的class
        rowclass:'teheader',
     // (选填) 编辑器按钮行的class
        dividerclass:'tedivider', 
    // (选填) 编辑器按钮间分割线的样式
        controls:['bold', 'italic', 'underline', 'strikethrough', '|', 'subscript', 'superscript', '|', 'orderedlist', 'unorderedlist', '|' ,'outdent' ,'indent', '|', 'leftalign', 'centeralign', 'rightalign', 'blockjustify', '|', 'unformat', '|', 'undo', 'redo', 'n', 'font', 'size', 'style', '|', 'image', 'hr', 'link', 'unlink', '|', 'cut', 'copy', 'paste', 'print'],
     // (必须) 要根据需要在编辑器上添加按钮控件, 其中'|'代表功能按钮间的竖分割线，'n'代表按钮行间的分割线
        footer:true, 
    // (选填) 是否显示编辑器底部
        fonts:['Verdana','Arial','Georgia','Trebuchet MS'],  
    // (选填) 编辑器中可选择的字体
        xhtml:true, 
    // (选填) 编辑器生成xhtml还是html标记
        cssfile:'style.css', 
    // (选填) 要为编辑器附加的外部css文件
        content:'starting content', 
    // (选填) 设置编辑器编辑区域中的初始内容
        css:'body{background-color:#ccc}',
     // (选填) 设置编辑器编辑区域背景
        bodyid:'editor', 
    // (选填) 设置编辑区域ID
        footerclass:'tefooter', 
    // (选填) 设置编辑器底部class
        toggle:{text:'源代码',activetext:'可视化',cssclass:'toggle'},
     // (选填) 设置源代码浏览切换文字，及切换按钮的class
        resize:{cssclass:'resize'} 
    // (选填) 设置编辑器大小调整按钮的class
    });
});

    //保存
function save() {
    //设置状态值
    //富文本设置数据   
    $("#contentdetail").val('txtContent');
    $("#subtype").value= 'subtype';
    if($("#title").val()==''){
        alert("请输入标题");
        return false;
    }
   if($("#contentdetail").val()==''){
        alert("请输入内容");
        return false;
    } 
    //加载textarea --富文本数据
    editor.post();
    $("#Form").submit();
    }

/* 下拉框 多选*/
$(document).ready(function () {
    var mySelect = $('#first-disabled2');

    $('#special').on('click', function () {
      mySelect.find('option:selected').prop('disabled', true);
      mySelect.selectpicker('refresh');
    });

    $('#special2').on('click', function () {
      mySelect.find('option:disabled').prop('disabled', false);
      mySelect.selectpicker('refresh');
    });
  });
</script>
</body>
</html>