jquery的wysiwyg富文本编辑器使用

最新推荐文章于 2024-04-16 09:53:17 发布

wenanshi

最新推荐文章于 2024-04-16 09:53:17 发布

阅读量5.5k

点赞数 1

分类专栏： JQuery 文章标签：文本编辑 jquery stylesheet html action function

本文链接：https://blog.csdn.net/wenanshi/article/details/7783705

版权

JQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

wysiwyg是jquery的一个富文本编辑器，可以应用在网站编辑中。
1、下载wysiwyg。
2、将wysiwyg解压缩导入到web工程的WebRoot文件夹下
3、新建一个jsp页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Example: Full - jWYSIWYG</title>
<link rel="stylesheet" type="text/css" href="jwysiwyg/help/lib/blueprint/screen.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="jwysiwyg/help/lib/blueprint/print.css" media="print" />
<!--[if lt IE 8]><link rel="stylesheet" href="../lib/blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-->
<link rel="stylesheet" href="jwysiwyg/jquery.wysiwyg.css" type="text/css"/>
<script type="text/javascript" src="jwysiwyg/lib/jquery1.5.js"></script>
<script type="text/javascript" src="jwysiwyg/jquery.wysiwyg.js"></script>
<script type="text/javascript" src="jwysiwyg/controls/wysiwyg.image.js"></script>
<script type="text/javascript" src="jwysiwyg/controls/wysiwyg.link.js"></script>
<script type="text/javascript" src="jwysiwyg/controls/wysiwyg.table.js"></script>
<script type="text/javascript" src="jwysiwyg/plugins/wysiwyg.i18n.js"></script>
<script type="text/javascript" src="jwysiwyg/i18n/lang.zh-cn.js"></script>
<script type="text/javascript">
(function($) {
	$(document).ready(function() {
		$('#wysiwyg').wysiwyg({
			plugins: {
					autoload: true,
					i18n: { lang: "zh-cn" },
					rmFormat: { rmMsWordMarkup: true }
				},
		  controls: {
			bold          : { visible : true },
			italic        : { visible : true },
			underline     : { visible : true },
			strikeThrough : { visible : true },
			
			justifyLeft   : { visible : true },
			justifyCenter : { visible : true },
			justifyRight  : { visible : true },
			justifyFull   : { visible : true },

			indent  : { visible : true },
			outdent : { visible : true },

			subscript   : { visible : true },
			superscript : { visible : true },
			
			undo : { visible : true },
			redo : { visible : true },
			
			insertOrderedList    : { visible : true },
			insertUnorderedList  : { visible : true },
			insertHorizontalRule : { visible : true },

			h4: {
				visible: true,
				className: 'h4',
				command: ($.browser.msie || $.browser.safari) ? 'formatBlock' : 'heading',
				arguments: ($.browser.msie || $.browser.safari) ? '<h4>' : 'h4',
				tags: ['h4'],
				tooltip: 'Header 4'
			},
			h5: {
				visible: true,
				className: 'h5',
				command: ($.browser.msie || $.browser.safari) ? 'formatBlock' : 'heading',
				arguments: ($.browser.msie || $.browser.safari) ? '<h5>' : 'h5',
				tags: ['h5'],
				tooltip: 'Header 5'
			},
			h6: {
				visible: true,
				className: 'h6',
				command: ($.browser.msie || $.browser.safari) ? 'formatBlock' : 'heading',
				arguments: ($.browser.msie || $.browser.safari) ? '<h6>' : 'h6',
				tags: ['h6'],
				tooltip: 'Header 6'
			},
			
			cut   : { visible : true },
			copy  : { visible : true },
			paste : { visible : true },
			html  : { visible: true },
			increaseFontSize : { visible : true },
			decreaseFontSize : { visible : true },
			exam_html: {
				exec: function() {
					this.insertHtml('<abbr title="exam">Jam</abbr>');
					return true;
				},
				visible: true
			}
		  },
		  events: {
			click: function(event) {
				if ($("#click-inform:checked").length > 0) {
					event.preventDefault();
					alert("You have clicked jWysiwyg content!");
				}
			}
		  }
		});

		$('#wysiwyg').wysiwyg("insertHtml", "Sample code");
	});
})(jQuery);
</script>
</head>
<body><div class="container">
	<h1>jWYSIWYG</h1>
	<h2>Example: Full</h2>
	<noscript>Enable JavaScript to use WYSIWYG features.</noscript>
	<form action="test.action" method="post">
	<textarea id="wysiwyg" rows="5" cols="103" name="wysiwyg"></textarea>
	<input type="submit" value="提交"/>
	</form>
	<form action="test2.action" method="post">
	<input type="submit" value="显示"/>
	</form>
	<label><input type="checkbox" value="1" id="click-inform" /> Inform about clicks.</label>

	<hr/>
	<a href="index.html">Index</a>
</div></body>
</html>

4.连接书写action、dao等代码，插入到数据库中

数据库里有了传入的值和html标签

5.保存好后，我们就像看看能不能输出成功。点击上面html的显示按钮，触发action查询数据库，在成功页面里显示
这里<s:property value="wysiwyg" escape="false"/>的escape属性很重要，没有的话，会直接将html标签作为字符输出的

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'test_success.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  
  <body> 
    Success! <br>
    <s:property value="wysiwyg" escape="false"/>
    
  </body>
</html>

6.看我们的test变粗体了

wenanshi

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
jquery的wysiwyg富文本编辑器使用

wysiwyg是jquery的一个富文本编辑器，可以应用在网站编辑中。1、下载wysiwyg。2、将wysiwyg解压缩导入到web工程的WebRoot文件夹下3、新建一个jsp页面Example: Full - jWYSIWYG(function($) { $(document).ready(function() { $('#wysiw
复制链接

扫一扫