码迷,mamicode.com
首页 > 其他好文 > 详细

TinyMCE(三)——编辑内容

时间:2015-08-13 19:46:52      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:

edit example

 

 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 2 <%
 3 String path = request.getContextPath();
 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 5 %>
 6 
 7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 8 <html>
 9 <head>
10     <script type="text/javascript" src="<%=path %>/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
11     <script type="text/javascript">
12     tinyMCE.init({
13         // General options
14         mode : "textareas",
15         theme : "advanced",
16         plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave,visualblocks",
17 
18         // Theme options
19         theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
20         theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
21         theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
22         theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft,visualblocks",
23         theme_advanced_toolbar_location : "top",
24         theme_advanced_toolbar_align : "left",
25         theme_advanced_statusbar_location : "bottom",
26         theme_advanced_resizing : true,
27 
28         // Example content CSS (should be your site CSS)
29         content_css : "css/content.css",
30 
31         // Drop lists for link/image/media/template dialogs
32         template_external_list_url : "lists/template_list.js",
33         external_link_list_url : "lists/link_list.js",
34         external_image_list_url : "lists/image_list.js",
35         media_external_list_url : "lists/media_list.js",
36 
37         // Style formats
38         style_formats : [
39             {title : ‘Bold text‘, inline : ‘b‘},
40             {title : ‘Red text‘, inline : ‘span‘, styles : {color : ‘#ff0000‘}},
41             {title : ‘Red header‘, block : ‘h1‘, styles : {color : ‘#ff0000‘}},
42             {title : ‘Example 1‘, inline : ‘span‘, classes : ‘example1‘},
43             {title : ‘Example 2‘, inline : ‘span‘, classes : ‘example2‘},
44             {title : ‘Table styles‘},
45             {title : ‘Table row 1‘, selector : ‘tr‘, classes : ‘tablerow1‘}
46         ],
47 
48         // Replace values for the template plugin
49         template_replace_values : {
50             username : "Some User",
51             staffid : "991234"
52         }
53     });
54     
55     function doedit(){
56         console.info(document.forms);
57         console.info(document.forms[0].action);
58         document.forms[0].action="${pageContext.request.contextPath }/DemoServlet"
59         document.forms[0].submit();
60     }
61     </script>
62 </head>
63 <body>
64 <form method="post" action="${pageContext.request.contextPath }/DemoServlet">
65     <h3>Full featured example</h3>
66     <!-- Gets replaced with TinyMCE, remember HTML in a textarea should be encoded -->
67     <textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%">
68             This is some example text that you can edit inside the &lt;strong&gt;TinyMCE editor&lt;/strong&gt;.
69     </textarea>
70     <br />
71     <input type="submit" name="save" value="Submit" />
72     <input type="reset" name="reset" value="Reset" />
73     <input type="button" onclick="doedit()" name="reset" value="edit" />
74 </form>
75 </body>
76 </html>

 

DemoServlet.java

 1 package servlet;
 2 
 3 import java.io.IOException;
 4 
 5 import javax.servlet.ServletException;
 6 import javax.servlet.http.HttpServlet;
 7 import javax.servlet.http.HttpServletRequest;
 8 import javax.servlet.http.HttpServletResponse;
 9 
10 public class DemoServlet extends HttpServlet{
11     private static final long serialVersionUID = 1L;
12 
13     @Override
14     protected void doGet(HttpServletRequest req, HttpServletResponse resp)
15             throws ServletException, IOException {
16             doPost(req, resp);
17     }
18     
19     @Override
20     protected void doPost(HttpServletRequest req, HttpServletResponse resp)
21             throws ServletException, IOException {
22         System.out.println("-----------------");
23         String content=req.getParameter("elm1");
24         System.out.println(content);
25         req.setAttribute("content", content);
26         req.getRequestDispatcher("/demo.jsp").forward(req, resp);
27     }
28 }


demo.jsp

 

 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 2 <%
 3 String path = request.getContextPath();
 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 5 %>
 6 
 7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 8 <html>
 9 <head>
10     <script type="text/javascript" src="<%=path %>/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
11     <script type="text/javascript">
12     tinyMCE.init({
13         // General options
14         mode : "textareas",
15         theme : "advanced",
16         plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave,visualblocks",
17 
18         // Theme options
19         theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
20         theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
21         theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
22         theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft,visualblocks",
23         theme_advanced_toolbar_location : "top",
24         theme_advanced_toolbar_align : "left",
25         theme_advanced_statusbar_location : "bottom",
26         theme_advanced_resizing : true,
27 
28         // Example content CSS (should be your site CSS)
29         content_css : "css/content.css",
30 
31         // Drop lists for link/image/media/template dialogs
32         template_external_list_url : "lists/template_list.js",
33         external_link_list_url : "lists/link_list.js",
34         external_image_list_url : "lists/image_list.js",
35         media_external_list_url : "lists/media_list.js",
36 
37         // Style formats
38         style_formats : [
39             {title : ‘Bold text‘, inline : ‘b‘},
40             {title : ‘Red text‘, inline : ‘span‘, styles : {color : ‘#ff0000‘}},
41             {title : ‘Red header‘, block : ‘h1‘, styles : {color : ‘#ff0000‘}},
42             {title : ‘Example 1‘, inline : ‘span‘, classes : ‘example1‘},
43             {title : ‘Example 2‘, inline : ‘span‘, classes : ‘example2‘},
44             {title : ‘Table styles‘},
45             {title : ‘Table row 1‘, selector : ‘tr‘, classes : ‘tablerow1‘}
46         ],
47 
48         // Replace values for the template plugin
49         template_replace_values : {
50             username : "Some User",
51             staffid : "991234"
52         }
53     });
54     </script>
55 </head>
56 <body>
57 <form method="post" action="${pageContext.request.contextPath }/DemoServlet">
58     <h3>Full featured example</h3>
59     <!-- Gets replaced with TinyMCE, remember HTML in a textarea should be encoded -->
60     <textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%">${content }</textarea>
61     <br />
62     <input type="submit" name="save" value="Submit" />
63     <input type="reset" name="reset" value="Reset" />
64 </form>
65 </body>
66 </html>

 

TinyMCE(三)——编辑内容

标签:

原文地址:http://www.cnblogs.com/sonlike/p/4727966.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!