TinyMCE(三)——编辑内容

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>
时间: 2024-10-25 05:17:40

TinyMCE(三)——编辑内容的相关文章

HTML1网页三部份内容

网页三部份内容:HTML CSS Javascript 路径:一般做网页的时候用的相对路径. images/aaa.jpg 网页同一个目录中找images文件夹,再在images里面找aaa.jpg images/1000/aaa.jpg 网页同一个目录中找images文件夹,再在images里面找1000文件夹,再在1000文件夹中找aaa.jpg ../images/aaa.jpg 找网页上一级文件,在网页上一级文件夹中找images文件夹,在images文件夹中找aaa.jpg ../..

8月第4周业务风控关注 |国家网信办:坚决将“三俗”内容从网络短视频中清理出去

易盾业务风控周报每周呈报值得关注的安全技术和事件,包括但不限于内容安全.移动安全.业务安全和网络安全,帮助企业提高警惕,规避这些似小实大.影响业务健康发展的安全风险. 1. 国家网信办:坚决将"三俗"内容从网络短视频中清理出去 8月23日消息,近日,国家网信办依法约谈"快视频"企业,对其继续大肆传播低俗不良信息,采取暂停更新15天和下架处理.下一步,国家网信办将继续检查相关平台落实整改情况,加大巡查力度,扩大巡查范围,坚决将"三俗"内容从网络短视

利用localStorage实现对ueditor编辑内容定时保存为草稿

直接看代码吧 1.引入ueditor和ueditor的使用我就不细说了 详情请戳http://blog.csdn.net/wangdianyong/article/details/39780709 2.ueditor.jsp <head> <!-- 引入jquery --> <script type="text/javascript" src="js/jQuery2.0.js"></script> <!-- 引入

WordPress 如何修改编辑器TinyMCE里的内容

//获取编辑器对象,wp中的编辑器ID是"content" var editor = tinymce.get('content'); //获取编辑器内容 var content = editor.getContent(); //更改编辑器内容 content = content+"通过JS更改编辑器内容."; //将内容保存到编辑器 editor.setContent(content); 参考: 为WordPress添加简码选择按钮 How to dynamical

Javascript:基础(输出/编辑内容、编辑属性、事件响应、输入验证)

Javascript是目前最流行的服务器脚本语言,使用Javascript可以为网页添加丰富的逻辑和更加复杂动态效果. 代码整理自w3school:http://www.w3school.com.cn 效果图: 示例代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

jquery获取标签内容,编辑内容

一.获取页面元素 三种方式获取页面中元素的内容. input标签使用:.val()获取 标签下的html及文本内容:.html() 仅获取标签下的纯文本内容:.text() <head> <script type="text/javascript"> $(function(){ console.log($(".1").html());//会获取其中包含html的所有值<p>a</p> console.log($(&qu

ComboGrid 行内点击编辑内容

最近easyui需要在行内编辑选中项,但是编辑的内容出了当前选中列值,还有其他的,比较麻烦, 先看下这段代码 columns: [[ { field: 'GuestID', title: '编号', align: 'center', width: 20 }, { field: 'Name', title: '姓名', align: 'center', width: 25 }, { field: 'PassPort', title: '身份证', align: 'center', width: 4

第三章内容小结

1.内容小结:在第三章的学习中我们学习到了两种特殊的线性表:栈和队列. (1)特殊性:栈:限定仅在表尾(栈顶)进行插入或者删除的线性表,后进先出. 队列:只允许在表的一端进行插入(队尾),而在另一端(队头)进行删除的线性表.先进先出. (2)存储方式:顺序存储(顺序栈:循环队列)和链式存储(链栈:链队). (3)主要操作: 栈:入栈和出栈.对于顺序栈的入栈和出栈操作前要判断栈满或栈空. 队列:入队和出队.对于顺序队的循环队列进队和出队操作要判断队满或队空.涉及队头或队尾指针的修改都要将其对MAX

第三周内容

项目第一次站会 开会时间:3月22日  15:28--16:00 与会人员:何美琪,臧润强,郭又铭,杨若鹏 会议纪要: 1. 确立人员技术能力范围 首先统一开发语言和开发工具,开发语言:Java,jsp,开发工具:Eclipse,Web容器:Tomcat,包管理工具:maven,项目版本控制工具:github 2. 项目阶段边界 郭列举出了25项系统功能点,首先对几个核心功能进行边界分析,这几个功能点为:上传(txt,word,pdf,csv),统计(单词个数),展现(图+列表) 3. 需求分工