will/Open-Source-Access-Control-Web-Interface
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adding wysiwyg and settings

Browse Source
This commit is contained in:
Will Bradley
2013-09-28 04:59:19 -07:00
parent f03ffcd356
commit 2c204a8f9d
171 changed files with 26473 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
public/wymeditor/examples/01-basic.html Normal file
View File

@@ -0,0 +1,56 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
* WYMeditor : what you see is What You Mean web-based editor
* Copyright (c) 2005 - 2009 Jean-Francois Hovinne, http://www.wymeditor.org/
* Dual licensed under the MIT (MIT-license.txt)
* and GPL (GPL-license.txt) licenses.
*
* For further information visit:
* http://www.wymeditor.org/
*
* File Name:
* 01-basic.html
* WYMeditor integration example.
* See the documentation for more info.
*
* File Authors:
* Jean-Francois Hovinne - http://www.hovinne.com/
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WYMeditor</title>
<!-- jQuery library is required, see http://jquery.com/ -->
<script type="text/javascript" src="../jquery/jquery.js"></script>
<!-- WYMeditor main JS file, minified version -->
<script type="text/javascript" src="../wymeditor/jquery.wymeditor.min.js"></script>
<script type="text/javascript">
/* Here we replace each element with class 'wymeditor'
* (typically textareas) by a WYMeditor instance.
*
* We could use the 'html' option, to initialize the editor's content.
* If this option isn't set, the content is retrieved from
* the element being replaced.
*/
jQuery(function() {
jQuery('.wymeditor').wymeditor();
});
</script>
</head>
<body>
<h1>WYMeditor integration example</h1>
<p><a href="http://www.wymeditor.org/">WYMeditor</a> is a web-based XHTML WYSIWYM editor.</p>
<form method="post" action="">
<textarea class="wymeditor">&lt;p&gt;Hello, World!&lt;/p&gt;</textarea>
<input type="submit" class="wymupdate" />
</form>
</body>
</html>

56
public/wymeditor/examples/02-custom-language.html Normal file
View File

@@ -0,0 +1,56 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
* WYMeditor : what you see is What You Mean web-based editor
* Copyright (c) 2005 - 2009 Jean-Francois Hovinne, http://www.wymeditor.org/
* Dual licensed under the MIT (MIT-license.txt)
* and GPL (GPL-license.txt) licenses.
*
* For further information visit:
* http://www.wymeditor.org/
*
* File Name:
* 02-custom-language.html
* WYMeditor integration example - custom language.
* See the documentation for more info.
*
* File Authors:
* Jean-Francois Hovinne - http://www.hovinne.com/
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WYMeditor</title>
<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript" src="../wymeditor/jquery.wymeditor.min.js"></script>
<script type="text/javascript">
/* Use 3 options, one to set the html content,
* one to set the language, and one the set the classes
*/
jQuery(function() {
jQuery('.wymeditor').wymeditor({
html: '<p>Hello, World!<\/p>',
lang: 'fr',
stylesheet: 'styles.css'
});
});
</script>
</head>
<body>
<h1>WYMeditor integration example - custom language</h1>
<p><a href="http://www.wymeditor.org/">WYMeditor</a> is a web-based XHTML WYSIWYM editor.</p>
<form method="post" action="">
<textarea class="wymeditor"></textarea>
<input type="submit" class="wymupdate" />
</form>
</body>
</html>

64
public/wymeditor/examples/03-plugin.html Normal file
View File

@@ -0,0 +1,64 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
* WYMeditor : what you see is What You Mean web-based editor
* Copyright (c) 2005 - 2009 Jean-Francois Hovinne, http://www.wymeditor.org/
* Dual licensed under the MIT (MIT-license.txt)
* and GPL (GPL-license.txt) licenses.
*
* For further information visit:
* http://www.wymeditor.org/
*
* File Name:
* 03-plugin.html
* WYMeditor integration example - plugin activation.
* See the documentation for more info.
*
* File Authors:
* Jean-Francois Hovinne - http://www.hovinne.com/
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WYMeditor</title>
<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript" src="../wymeditor/jquery.wymeditor.min.js"></script>
<script type="text/javascript" src="../wymeditor/plugins/hovertools/jquery.wymeditor.hovertools.js"></script> <!-- load the plugin -->
<script type="text/javascript">
// Use the 'postInit' option, which will execute the function passed in the parameter.
jQuery(function() {
jQuery('.wymeditor').wymeditor({
html: '<p>Hello, World!<\/p>',
stylesheet: 'styles.css',
postInit: function(wym) {
//postInit is executed after WYMeditor initialization
//'wym' is the current WYMeditor instance
//we generally activate plugins after WYMeditor initialization
//activate 'hovertools' plugin
//which gives advanced feedback to the user:
wym.hovertools();
}
});
});
</script>
</head>
<body>
<h1>WYMeditor integration example - plugin activation</h1>
<p><a href="http://www.wymeditor.org/">WYMeditor</a> is a web-based XHTML WYSIWYM editor.</p>
<form method="post" action="">
<textarea class="wymeditor"></textarea>
<input type="submit" class="wymupdate" />
</form>
</body>
</html>

67
public/wymeditor/examples/04-multiple-instances.html Normal file
View File

@@ -0,0 +1,67 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
* WYMeditor : what you see is What You Mean web-based editor
* Copyright (c) 2005 - 2009 Jean-Francois Hovinne, http://www.wymeditor.org/
* Dual licensed under the MIT (MIT-license.txt)
* and GPL (GPL-license.txt) licenses.
*
* For further information visit:
* http://www.wymeditor.org/
*
* File Name:
* 04-multiple-instances.html
* WYMeditor integration example - multiple instances.
* See the documentation for more info.
*
* File Authors:
* Jean-Francois Hovinne - http://www.hovinne.com/
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WYMeditor</title>
<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript" src="../wymeditor/jquery.wymeditor.min.js"></script>
<script type="text/javascript">
// Each textarea with class 'wymeditor' is replaced by a WYMeditor instance.
jQuery(function() {
jQuery('.wymeditor').wymeditor({
html: '<p>Hello, World!<\/p>',
stylesheet: 'styles.css'
});
});
</script>
</head>
<body>
<h1>WYMeditor integration example - multiple instances</h1>
<p><a href="http://www.wymeditor.org/">WYMeditor</a> is a web-based XHTML WYSIWYM editor.</p>
<form method="post" action="">
<textarea class="wymeditor"></textarea>
<input type="submit" class="wymupdate" />
</form>
<br />
<form method="post" action="">
<textarea class="wymeditor"></textarea>
<input type="submit" class="wymupdate" />
</form>
<br />
<form method="post" action="">
<textarea class="wymeditor"></textarea>
<input type="submit" class="wymupdate" />
</form>
</body>
</html>

102
public/wymeditor/examples/05-custom-dialog.html Normal file
View File

@@ -0,0 +1,102 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
* WYMeditor : what you see is What You Mean web-based editor
* Copyright (c) 2005 - 2009 Jean-Francois Hovinne, http://www.wymeditor.org/
* Dual licensed under the MIT (MIT-license.txt)
* and GPL (GPL-license.txt) licenses.
*
* For further information visit:
* http://www.wymeditor.org/
*
* File Name:
* 05-custom-dialog.html
* WYMeditor integration example - custom dialog.
* See the documentation for more info.
*
* File Authors:
* Jean-Francois Hovinne - http://www.hovinne.com/
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WYMeditor</title>
<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript" src="../wymeditor/jquery.wymeditor.min.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery('.wymeditor').wymeditor({
html: '<p>Hello, World!<\/p>',
stylesheet: 'styles.css',
postInitDialog: function(wym,wdw) {
//postInitDialog is executed when the dialog is ready
//'wym' is the WYMeditor instance
//'wdw' is the dialog's window
var body = wdw.document.body;
//add a select box populated with predefined values to the dialog
//construct the string with the needed controls
var selectLink = "<div class='row row-indent'>"
+ "<select class='wym_select_link'>"
+ "<option selected value='WYMeditor http://www.wymeditor.org/'>"
+ "WYMeditor<\/option>"
+ "<option value='SourceForge http://www.sourceforge.net/'>"
+ "SourceForge<\/option>"
+ "<option value='GNU http://www.gnu.org/'>"
+ "GNU<\/option>"
+ "<\/select>"
+ "<input class='wym_choose' type='button'"
+ " value='{Choose}' />"
+ "<\/div>";
//the {Choose} string will automagically be localized
//by replaceStrings()
//add the controls to the dialog
jQuery(body)
.filter('.wym_dialog_link').find('fieldset').eq(0)
.prepend(wym.replaceStrings(selectLink));
//bind a function which will populate the URL and title fields
//when the user clicks on the wym_choose button
jQuery(body)
.find('.wym_choose')
.click(function() {
var myval = jQuery(body).find('.wym_select_link').val();
//get the URL and the title
jQuery(body)
.find('.wym_href')
.val(myval.substring(myval.lastIndexOf(' ') + 1));
jQuery(body)
.find('.wym_title')
.val(myval.substr(0, myval.lastIndexOf(' ')));
});
}
});
});
</script>
</head>
<body>
<h1>WYMeditor integration example - custom dialog</h1>
<p><a href="http://www.wymeditor.org/">WYMeditor</a> is a web-based XHTML WYSIWYM editor.</p>
<form method="post" action="">
<textarea class="wymeditor"></textarea>
<input type="submit" class="wymupdate" />
</form>
</body>
</html>

73
public/wymeditor/examples/06-custom-menu.html Normal file
View File

@@ -0,0 +1,73 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
* WYMeditor : what you see is What You Mean web-based editor
* Copyright (c) 2005 - 2009 Jean-Francois Hovinne, http://www.wymeditor.org/
* Dual licensed under the MIT (MIT-license.txt)
* and GPL (GPL-license.txt) licenses.
*
* For further information visit:
* http://www.wymeditor.org/
*
* File Name:
* 06-custom-menu.html
* WYMeditor integration example - custom menu.
* See the documentation for more info.
*
* File Authors:
* Jean-Francois Hovinne - http://www.hovinne.com/
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WYMeditor</title>
<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript" src="../wymeditor/jquery.wymeditor.min.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery('.wymeditor').wymeditor({
html: '<p>Hello, World!<\/p>',
stylesheet: 'styles.css',
//customize the tools menu with toolsItems option
//'name' is the name of the command which will be executed
//when the user clicks on the button
//'title' is the button's title (automagically localized)
//'css' is the button's class name
toolsItems: [
{'name': 'Bold', 'title': 'Strong', 'css': 'wym_tools_strong'},
{'name': 'Italic', 'title': 'Emphasis', 'css': 'wym_tools_emphasis'},
{'name': 'CreateLink', 'title': 'Link', 'css': 'wym_tools_link'},
{'name': 'Unlink', 'title': 'Unlink', 'css': 'wym_tools_unlink'},
{'name': 'InsertImage', 'title': 'Image', 'css': 'wym_tools_image'},
{'name': 'InsertOrderedList', 'title': 'Ordered_List',
'css': 'wym_tools_ordered_list'},
{'name': 'InsertUnorderedList', 'title': 'Unordered_List',
'css': 'wym_tools_unordered_list'},
{'name': 'InsertTable', 'title': 'Table', 'css': 'wym_tools_table'},
{'name': 'Paste', 'title': 'Paste_From_Word',
'css': 'wym_tools_paste'},
{'name': 'Undo', 'title': 'Undo', 'css': 'wym_tools_undo'},
{'name': 'Redo', 'title': 'Redo', 'css': 'wym_tools_redo'}
]
});
});
</script>
</head>
<body>
<h1>WYMeditor integration example - custom menu</h1>
<p><a href="http://www.wymeditor.org/">WYMeditor</a> is a web-based XHTML WYSIWYM editor.</p>
<form method="post" action="">
<textarea class="wymeditor"></textarea>
<input type="submit" class="wymupdate" />
</form>
</body>
</html>

74
public/wymeditor/examples/07-custom-button.html Normal file
View File

@@ -0,0 +1,74 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
* WYMeditor : what you see is What You Mean web-based editor
* Copyright (c) 2005 - 2009 Jean-Francois Hovinne, http://www.wymeditor.org/
* Dual licensed under the MIT (MIT-license.txt)
* and GPL (GPL-license.txt) licenses.
*
* For further information visit:
* http://www.wymeditor.org/
*
* File Name:
* 07-custom-button.html
* WYMeditor integration example - custom button.
* See the documentation for more info.
*
* File Authors:
* Jean-Francois Hovinne - http://www.hovinne.com/
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WYMeditor</title>
<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript" src="../wymeditor/jquery.wymeditor.min.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery('.wymeditor').wymeditor({
html: '<p>Hello, World!<\/p>',
stylesheet: 'styles.css',
postInit: function(wym) {
//construct the button's html
var html = "<li class='wym_tools_newbutton'>"
+ "<a name='NewButton' href='#'"
+ " style='background-image:"
+ " url(../wymeditor/skins/default/icons.png)'>"
+ "Do something"
+ "</a></li>";
//add the button to the tools box
jQuery(wym._box)
.find(wym._options.toolsSelector + wym._options.toolsListSelector)
.append(html);
//handle click event
jQuery(wym._box)
.find('li.wym_tools_newbutton a').click(function() {
//do something
wym.paste('Lorem ipsum dolor sit amet, consectetuer adipiscing elit.');
return(false);
});
}
});
});
</script>
</head>
<body>
<h1>WYMeditor integration example - custom button</h1>
<p><a href="http://www.wymeditor.org/">WYMeditor</a> is a web-based XHTML WYSIWYM editor.</p>
<form method="post" action="">
<textarea class="wymeditor"></textarea>
<input type="submit" class="wymupdate" />
</form>
</body>
</html>

63
public/wymeditor/examples/08-custom-panel.html Normal file
View File

@@ -0,0 +1,63 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
* WYMeditor : what you see is What You Mean web-based editor
* Copyright (c) 2005 - 2009 Jean-Francois Hovinne, http://www.wymeditor.org/
* Dual licensed under the MIT (MIT-license.txt)
* and GPL (GPL-license.txt) licenses.
*
* For further information visit:
* http://www.wymeditor.org/
*
* File Name:
* 08-custom-panel.html
* WYMeditor integration example - custom panel.
* See the documentation for more info.
*
* File Authors:
* Jean-Francois Hovinne - http://www.hovinne.com/
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WYMeditor</title>
<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript" src="../wymeditor/jquery.wymeditor.min.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery('.wymeditor').wymeditor({
html: '<p>Hello, World!<\/p>',
stylesheet: 'styles.css',
postInit: function(wym) {
//render the containers box as a panel
//and remove the span containing the '>'
jQuery(wym._box).find(wym._options.containersSelector)
.removeClass('wym_dropdown')
.addClass('wym_panel')
.find('h2 > span')
.remove();
//adjust the editor's height
jQuery(wym._box).find(wym._options.iframeSelector)
.css('height', '250px');
}
});
});
</script>
</head>
<body>
<h1>WYMeditor integration example - custom panel</h1>
<p><a href="http://www.wymeditor.org/">WYMeditor</a> is a web-based XHTML WYSIWYM editor.</p>
<form method="post" action="">
<textarea class="wymeditor"></textarea>
<input type="submit" class="wymupdate" />
</form>
</body>
</html>

52
public/wymeditor/examples/09-two-panels.html Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
* WYMeditor : what you see is What You Mean web-based editor
* Copyright (c) 2005 - 2009 Jean-Francois Hovinne, http://www.wymeditor.org/
* Dual licensed under the MIT (MIT-license.txt)
* and GPL (GPL-license.txt) licenses.
*
* For further information visit:
* http://www.wymeditor.org/
*
* File Name:
* 09-two-panels.html
* WYMeditor integration example - two panels.
* See the documentation for more info.
*
* File Authors:
* Jean-Francois Hovinne - http://www.hovinne.com/
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WYMeditor</title>
<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript" src="../wymeditor/jquery.wymeditor.min.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery('.wymeditor').wymeditor({
html: '<p>Hello, World!<\/p>',
stylesheet: 'styles.css',
skin: 'twopanels'
});
});
</script>
</head>
<body>
<h1>WYMeditor integration example - two panels</h1>
<p><a href="http://www.wymeditor.org/">WYMeditor</a> is a web-based XHTML WYSIWYM editor.</p>
<form method="post" action="">
<textarea class="wymeditor"></textarea>
<input type="submit" class="wymupdate" />
</form>
</body>
</html>

60
public/wymeditor/examples/10-resizable.html Normal file
View File

@@ -0,0 +1,60 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
* WYMeditor : what you see is What You Mean web-based editor
* Copyright (c) 2005 - 2009 Jean-Francois Hovinne, http://www.wymeditor.org/
* Dual licensed under the MIT (MIT-license.txt)
* and GPL (GPL-license.txt) licenses.
*
* For further information visit:
* http://www.wymeditor.org/
*
* File Name:
* 10-resizable.html
* WYMeditor integration example - resizable plugin.
* See the documentation for more info.
*
* File Authors:
* Jean-Francois Hovinne - http://www.hovinne.com/
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WYMeditor</title>
<script type="text/javascript" src="../jquery/jquery.js"></script>
<!-- REQUIRED: jQuery UI and jQuery UI resizable -->
<script type="text/javascript" src="../jquery/jquery-ui-1.8.11.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="../jquery/jquery.ui.resizable.css" />
<script type="text/javascript" src="../wymeditor/jquery.wymeditor.min.js"></script>
<script type="text/javascript" src="../wymeditor/plugins/hovertools/jquery.wymeditor.hovertools.js"></script>
<script type="text/javascript" src="../wymeditor/plugins/resizable/jquery.wymeditor.resizable.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery('.wymeditor').wymeditor({
html: '<p>Hello, World!<\/p>',
stylesheet: 'styles.css',
postInit: function(wym) {
wym.hovertools();
wym.resizable();
}
});
});
</script>
</head>
<body>
<h1>WYMeditor integration example - resizable plugin</h1>
<p><a href="http://www.wymeditor.org/">WYMeditor</a> is a web-based XHTML WYSIWYM editor.</p>
<form method="post" action="">
<textarea class="wymeditor"></textarea>
<input type="submit" class="wymupdate" />
</form>
</body>
</html>

75
public/wymeditor/examples/11-custom-parser.html Normal file
View File

@@ -0,0 +1,75 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
* WYMeditor : what you see is What You Mean web-based editor
* Copyright (c) 2005 - 2009 Jean-Francois Hovinne, http://www.wymeditor.org/
* Dual licensed under the MIT (MIT-license.txt)
* and GPL (GPL-license.txt) licenses.
*
* For further information visit:
* http://www.wymeditor.org/
*
* File Name:
* 11-custom-parser.html
* Custom XHTML parser example.
* See the documentation for more info.
*
* File Authors:
* Jean-Francois Hovinne - http://www.hovinne.com/
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WYMeditor</title>
<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript" src="../wymeditor/jquery.wymeditor.min.js"></script>
<script type="text/javascript">
WYMeditor.XhtmlLexer.prototype.addTokens = function() {
// These tokens are for Radiant CMS radius tags
this.addEntryPattern("</?r:", 'Text', 'Text');
this.addExitPattern(">", 'Text');
this.addCommentTokens('Text');
this.addScriptTokens('Text');
this.addCssTokens('Text');
this.addTagTokens('Text');
};
//Define allowed attributes and their values for <p>
WYMeditor.XhtmlValidator._tags['p'] = {
'attributes': {
'align':/^(right|left|center|justify)$/,
'0':'name'
}
};
//Add runat="server" attribute to <a> and <img>
jQuery.extend(WYMeditor.XhtmlValidator._tags['a']['attributes'], {'runat':/^(server)$/});
jQuery.extend(WYMeditor.XhtmlValidator._tags['img']['attributes'], {'runat':/^(server)$/});
jQuery(function() {
jQuery('.wymeditor').wymeditor({
html: '<p><a runat="server"><em>Runat server</em> link.</a></p>'
+ '<p align="right">Right aligned paragraph.</p>'
+ '<p><r:test>This text is inside a radius tag.</r:test></p>'
+ '<p>Nothing special here.</p>'
});
});
</script>
</head>
<body>
<h1>WYMeditor custom XHTML parser example</h1>
<p><a href="http://www.wymeditor.org/">WYMeditor</a> is a web-based XHTML WYSIWYM editor.</p>
<form method="post" action="">
<textarea class="wymeditor"></textarea>
<input type="submit" class="wymupdate" />
</form>
</body>
</html>

107
public/wymeditor/examples/12-custom-layout.html Normal file
View File

@@ -0,0 +1,107 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
* WYMeditor : what you see is What You Mean web-based editor
* Copyright (c) 2005 - 2009 Jean-Francois Hovinne, http://www.wymeditor.org/
* Dual licensed under the MIT (MIT-license.txt)
* and GPL (GPL-license.txt) licenses.
*
* For further information visit:
* http://www.wymeditor.org/
*
* File Name:
* 12-custom-layout.html
* Basic editor integration example with customisation of the default layout.
* See the documentation for more info.
*
* File Authors:
* Jean-Francois Hovinne (jf.hovinne a-t wymeditor dotorg)
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WYMeditor</title>
<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript" src="../wymeditor/jquery.wymeditor.min.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery('.wymeditor').wymeditor({
stylesheet: 'styles.css',
//classes panel
classesItems: [
{'name': 'date', 'title': 'PARA: Date', 'expr': 'p'},
{'name': 'hidden-note', 'title': 'PARA: Hidden note',
'expr': 'p[@class!="important"]'},
{'name': 'important', 'title': 'PARA: Important',
'expr': 'p[@class!="hidden-note"]'},
{'name': 'border', 'title': 'IMG: Border', 'expr': 'img'},
{'name': 'special', 'title': 'LIST: Special', 'expr': 'ul, ol'}
],
//we customize the XHTML structure of WYMeditor by overwriting
//the value of boxHtml. In this example, "CONTAINERS" and
//"CLASSES" have been moved from "wym_area_right" to "wym_area_top":
boxHtml: "<div class='wym_box'>"
+ "<div class='wym_area_top'>"
+ WYMeditor.TOOLS
+ WYMeditor.CONTAINERS
+ WYMeditor.CLASSES
+ "</div>"
+ "<div class='wym_area_left'></div>"
+ "<div class='wym_area_right'>"
+ "</div>"
+ "<div class='wym_area_main'>"
+ WYMeditor.HTML
+ WYMeditor.IFRAME
+ WYMeditor.STATUS
+ "</div>"
+ "<div class='wym_area_bottom'>"
+ "</div>"
+ "</div>",
//postInit is a function called when WYMeditor instance is ready
//wym is the WYMeditor instance
postInit: function(wym) {
//we make all sections in area_top render as dropdown menus:
jQuery(wym._box)
//first we have to select them:
.find(".wym_area_top .wym_section")
//then we remove the existing class which make some of them render as a panels:
.removeClass("wym_panel")
//then we add the class which will make them render as a dropdown menu:
.addClass("wym_dropdown")
//finally we add some css to make the dropdown menus look better:
.css("width", "160px")
.css("float", "left")
.css("margin-right", "5px")
.find("ul")
.css("width", "140px");
//add a ">" character to the title of the new dropdown menus (visual cue)
jQuery(wym._box).find(".wym_tools, .wym_classes ")
.find(WYMeditor.H2)
.append("<span>&nbsp;&gt;</span>");
}
});
});
</script>
</head>
<body>
<h1>WYMeditor basic integration example with simple skin customisation</h1>
<p><a href="http://www.wymeditor.org/">WYMeditor</a> is a web-based XHTML WYSIWYM editor.</p>
<form method="post" action="">
<textarea class="wymeditor"></textarea>
<input type="submit" class="wymupdate" />
</form>
</body>
</html>

61
public/wymeditor/examples/13-silver-skin.html Normal file
View File

@@ -0,0 +1,61 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
* WYMeditor : what you see is What You Mean web-based editor
* Copyright (c) 2005 - 2009 Jean-Francois Hovinne, http://www.wymeditor.org/
* Dual licensed under the MIT (MIT-license.txt)
* and GPL (GPL-license.txt) licenses.
*
* For further information visit:
* http://www.wymeditor.org/
*
* File Name:
* 13-silver-skin.html
* WYMeditor integration example - hovertools and resizable plugins, using silver skin.
* See the documentation for more info.
*
* File Authors:
* Jean-Francois Hovinne - http://www.hovinne.com/
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WYMeditor</title>
<script type="text/javascript" src="../jquery/jquery.js"></script>
<!-- OPTIONAL: jQuery UI and jQuery UI resizable -->
<script type="text/javascript" src="../jquery/jquery.ui.js"></script>
<script type="text/javascript" src="../jquery/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="../wymeditor/jquery.wymeditor.min.js"></script>
<script type="text/javascript" src="../wymeditor/plugins/hovertools/jquery.wymeditor.hovertools.js"></script>
<script type="text/javascript" src="../wymeditor/plugins/resizable/jquery.wymeditor.resizable.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery('.wymeditor').wymeditor({
html: '<p>Hello, World!<\/p>', //set editor's value
stylesheet: 'styles.css', //styles to load
skin: 'silver', //activate silver skin
postInit: function(wym) {
wym.hovertools(); //activate hovertools
wym.resizable(); //and resizable plugins
}
});
});
</script>
</head>
<body>
<h1>WYMeditor integration example - resizable plugin</h1>
<p><a href="http://www.wymeditor.org/">WYMeditor</a> is a web-based XHTML WYSIWYM editor.</p>
<form method="post" action="">
<textarea class="wymeditor"></textarea>
<input type="submit" class="wymupdate" />
</form>
</body>
</html>

168
public/wymeditor/examples/14-more-inline-elements.html Normal file
View File

@@ -0,0 +1,168 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
* WYMeditor : what you see is What You Mean web-based editor
* Copyright (c) 2005 - 2009 Jean-Francois Hovinne, http://www.wymeditor.org/
* Dual licensed under the MIT (MIT-license.txt)
* and GPL (GPL-license.txt) licenses.
*
* For further information visit:
* http://www.wymeditor.org/
*
* File Name:
* 14-more-inline-elements.html
* WYMeditor integration example - more inline elements.
* See the documentation for more info.
*
* File Authors:
* Jean-Francois Hovinne - http://www.hovinne.com/
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WYMeditor</title>
<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript" src="../wymeditor/jquery.wymeditor.min.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery('.wymeditor').wymeditor({
html: '<p>Hello, World!<\/p>', //set editor's value
stylesheet: 'styles.css', //styles to load
postInit: function(wym) {
//add the 'Wrap' translation (used here for the dialog's title)
jQuery.extend(WYMeditor.STRINGS['en'], {
'Wrap': 'Wrap'
});
//set the editor's content
wym._html("<p>This is some text with which to test.</p>"
+ "<p>Select 'some text' and click on the Wrap button.</p>"
+ "<p>Select it again and click on the Unwrap button.</p>");
//construct the wrap button's html
//note: the button image needs to be created ;)
var html = "<li class='wym_tools_wrap'>"
+ "<a href='#'"
+ " title='Wrap'"
+ " style='background-image:"
+ " url(../wymeditor/skins/default/icons.png)'>"
+ "Wrap"
+ "</a></li>";
//add the button to the tools box
jQuery(wym._box)
.find(wym._options.toolsSelector + wym._options.toolsListSelector)
.append(html);
//construct the unwrap button's html
//note: the button image needs to be created ;)
html = "<li class='wym_tools_unwrap'>"
+ "<a href='#'"
+ " title='Unwrap'"
+ " style='background-image:"
+ " url(../wymeditor/skins/default/icons.png)'>"
+ "Unwrap"
+ "</a></li>";
//add the button to the tools box
jQuery(wym._box)
.find(wym._options.toolsSelector + wym._options.toolsListSelector)
.append(html);
//construct the dialog's html
html = "<body class='wym_dialog wym_dialog_wrap'"
+ " onload='WYMeditor.INIT_DIALOG(" + WYMeditor.INDEX + ")'"
+ ">"
+ "<form>"
+ "<fieldset>"
+ "<input type='hidden' class='wym_dialog_type' value='"
+ "Wrap"
+ "' />"
+ "<legend>Wrap</legend>"
+ "<div class='row'>"
+ "<label>Type</label>"
+ "<select class='wym_select_inline_element'>"
+ "<option selected value='abbr'>Abbreviation</option>"
+ "<option value='acronym'>Acronym</option>"
+ "<option value='cite'>Citation, reference</option>"
+ "<option value='code'>Code</option>"
+ "<option value='del'>Deleted content</option>"
+ "<option value='ins'>Inserted content</option>"
+ "<option value='span'>Generic</option>"
+ "</select>"
+ "</div>"
+ "<div class='row'>"
+ "<label>Title</label>"
+ "<input type='text' class='wym_title' value='' size='40' />"
+ "</div>"
+ "<div class='row row-indent'>"
+ "<input class='wym_submit wym_submit_wrap' type='button'"
+ " value='{Submit}' />"
+ "<input class='wym_cancel' type='button'"
+ "value='{Cancel}' />"
+ "</div>"
+ "</fieldset>"
+ "</form>"
+ "</body>";
//handle click event on wrap button
jQuery(wym._box)
.find('li.wym_tools_wrap a').click(function() {
wym.dialog( 'Wrap', null, html );
return(false);
});
//handle click event on unwrap button
jQuery(wym._box)
.find('li.wym_tools_unwrap a').click(function() {
wym.unwrap();
return(false);
});
},
//handle click event on dialog's submit button
postInitDialog: function( wym, wdw ) {
//wdw is the dialog's window
//wym is the WYMeditor instance
var body = wdw.document.body;
jQuery( body )
.find('input.wym_submit_wrap')
.click(function() {
var tag = jQuery(body).find('.wym_select_inline_element').val();
var title = jQuery(body).find('.wym_title').val();
wym.wrap( '<' + tag + ' title="' + title + '">', '</' + tag + '>' );
wdw.close();
});
}
});
});
</script>
</head>
<body>
<h1>WYMeditor integration example - more inline elements</h1>
<h2>Adding <code title="Abbreviation">abbr</code>, <code title="Acronym">acronym</code>, <code title="Citation">cite</code>,
<code title="Code">code</code>, <code title="Deleted content">del</code>, <code title="Inserted content">ins</code>
and <code title="Generic inline element">span</code> support</h2>
<p><a href="http://www.wymeditor.org/">WYMeditor</a> is a web-based XHTML WYSIWYM editor.</p>
<form method="post" action="">
<textarea class="wymeditor"></textarea>
<input type="submit" class="wymupdate" />
</form>
</body>
</html>

188
public/wymeditor/examples/15-rdfa-editor.html Normal file
View File

@@ -0,0 +1,188 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
* WYMeditor : what you see is What You Mean web-based editor
* Copyright (c) 2005 - 2009 Jean-Francois Hovinne, http://www.wymeditor.org/
* Dual licensed under the MIT (MIT-license.txt)
* and GPL (GPL-license.txt) licenses.
*
* For further information visit:
* http://www.wymeditor.org/
*
* File Name:
* 15-rdfa-editor.html
* RDFa editor implementation example page.
* See the documentation for more info.
*
* File Authors:
* Jean-Francois Hovinne (jf.hovinne a-t wymeditor dotorg)
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RDFa editor</title>
<style type="text/css">
/* visual feedback */
.about { background-color: #f99; }
.dc_creator { background-color: #9f9; }
.dc_title { background-color: #9ff; }
.foaf_Person { background-color: #69c; }
.foaf_name { background-color: #99c; }
.foaf_homepage { background-color: #c9c; }
.foaf_mbox { background-color: #c6c; }
.foaf_phone { background-color: #c3c; }
</style>
<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript" src="../wymeditor/jquery.wymeditor.min.js"></script>
<script type="text/javascript">
/*EXTEND THE XHTML PARSER*/
/*************************/
//Add the RDFa attributes
WYMeditor.XhtmlValidator._attributes['core']['attributes'].push(
'rel',
'rev',
'content',
'href',
'src',
'about',
'property',
'resource',
'datatype',
'typeof');
//Add the 'standard' vocabularies
WYMeditor.XhtmlValidator._attributes['core']['attributes'].push(
'xmlns:biblio',
'xmlns:cc',
'xmlns:dbp',
'xmlns:dbr',
'xmlns:dc',
'xmlns:ex',
'xmlns:foaf',
'xmlns:rdf',
'xmlns:rdfs',
'xmlns:taxo',
'xmlns:xhv',
'xmlns:xsd');
//Overwrite the <a> attributes 'rel' and 'rev'
WYMeditor.XhtmlValidator._tags['a'] = {
"attributes": {
"0":"charset",
"1":"coords",
"2":"href",
"3":"hreflang",
"4":"name",
"5":"rel",
"6":"rev",
"shape":/^(rect|rectangle|circ|circle|poly|polygon)$/,
"7":"type"
}
};
/*END EXTEND*/
/************/
jQuery(function() {
jQuery('.wymeditor').wymeditor({
stylesheet: 'wym_stylesheet.css',
html: '<h2 class="dc_title" property="dc:title">The trouble with Bob<\/h2><h3 class="dc_creator" property="dc:creator">Alice<\/h3>'
+ '<p>The trouble with Bob is that he takes much better photos than I do.<\/p>'
+ '<p class="foaf_Person" typeof="foaf:Person">'
+ '<strong class="foaf_name" property="foaf:name">Alice Birpemswick<\/strong><br \/>'
+ 'Email: <a class="foaf_mbox" rel="foaf:mbox" href="mailto:alice@example.com">alice@example.com<\/a><br \/>'
+ 'Phone: <a class="foaf_phone" rel="foaf:phone" href="tel:+1-617-555-7332">+1 617.555.7332<\/a>'
+ '<\/p>',
postInit: function(wym) {
//set the classes panel as dropdown
jQuery(wym._box).find('div.wym_classes').hide();
//construct the panel
jQuery(wym._box).find('div.wym_area_right')
.append('<div class="wym_attributes wym_section wym_panel"><\/div>')
.children(':last')
.append('<h2>Attributes<\/h2>')
.append('<ul><\/ul>')
.children(':last')
//store the attribute name/value in the button class (better idea?)
.append('<li><a class="about" title="What the data is about." href="#">ABOUT: about #value#<\/a><\/li>')
.append('<li><a class="property dc_title" title="A name by which the resource is formally known." href="#">TITLE: prop dc:title<\/a><\/li>')
.append('<li><a class="property dc_creator" title="An entity primarily responsible for making the resource." href="#">CREATOR: prop dc:creator<\/a><\/li>')
.append('<li><a class="typeof foaf_Person" title="A person." href="#">PERSON: typeof foaf:Person<\/a><\/li>')
.append('<li><a class="property foaf_name" title="A name for some thing." href="#">NAME: property foaf:name<\/a><\/li>')
.append('<li><a class="rel foaf_homepage" title="A homepage for some thing." href="#">HOMEPAGE: rel foaf:homepage<\/a><\/li>')
.append('<li><a class="rel foaf_mbox" title="A personal mailbox." href="#">MAILBOX: rel foaf:mbox<\/a><\/li>')
.append('<li><a class="rel foaf_phone" title="A phone." href="#">PHONE: rel foaf:phone<\/a><\/li>')
.find('a')
//event handlers
.click( function() {
//init
var selected = wym.selected(), //selected container
classes = jQuery(this).attr('class').split(' '), //clicked button classes
attrName = classes[0], //attribute name, e.g. 'property'
attrValue = classes.length > 1 ? classes[1] : null; //attribute value, if available, e.g. dc_title
//the attribute already exists, remove it
if( jQuery(selected).attr(attrName) != undefined && jQuery(selected).attr(attrName) != '') {
WYMeditor.console.log('attribute already exists, remove it:', attrName, jQuery(selected).attr(attrName));
if( classes.length == 1 || jQuery(selected).attr(attrName) == attrValue.replace('_', ':') )
jQuery(selected).removeAttr(attrName).removeClass(attrName).removeClass(attrValue);
//else, add it (and the feedback class)
} else {
WYMeditor.console.log('attribute does not exist, add it:', attrName, attrValue);
if( classes.length > 1 ) { //value available
jQuery(selected).attr(attrName, attrValue.replace('_', ':')).addClass(attrValue);
} else { //value not available
attrValue = prompt('Value', '');
if(attrValue != null) jQuery(selected).attr(attrName, attrValue).addClass(attrName);
}
}
});
//feedback css
var rules = [
{ name: '.about',
css: 'background-color: #f99;' },
{ name: '.dc_creator',
css: 'background-color: #9f9;' },
{ name: '.dc_title',
css: 'background-color: #9ff;' },
{ name: '.foaf_Person',
css: 'background-color: #69c;' },
{ name: '.foaf_name',
css: 'background-color: #99c;' },
{ name: '.foaf_homepage',
css: 'background-color: #c9c;' },
{ name: '.foaf_mbox',
css: 'background-color: #c6c;' },
{ name: '.foaf_phone',
css: 'background-color: #c3c;' }
];
wym.addCssRules( wym._doc, rules);
}
});
});
</script>
</head>
<body>
<h1>WYMeditor based RDFa editor (proof of concept)</h1>
<p><a href="http://www.wymeditor.org/">WYMeditor</a> is a web-based XHTML WYSIWYM editor.</p>
<p>More information on the forum: <a href="http://forum.wymeditor.org/forum/viewtopic.php?f=3&amp;p=2030">WYMeditor for RDFa</a></p>
<form method="post" action="">
<textarea class="wymeditor"></textarea>
<input type="submit" class="wymupdate" />
</form>
</body>
</html>

46
public/wymeditor/examples/16-google-apis.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
* WYMeditor : what you see is What You Mean web-based editor
* Copyright (c) 2005 - 2009 Jean-Francois Hovinne, http://www.wymeditor.org/
* Dual licensed under the MIT (MIT-license.txt)
* and GPL (GPL-license.txt) licenses.
*
* For further information visit:
* http://www.wymeditor.org/
*
* File Name:
* googleapis.html
* Test page for #169.
* See the documentation for more info.
*
* File Authors:
* Jean-Francois Hovinne - http://www.hovinne.com/
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WYMeditor</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="../wymeditor/jquery.wymeditor.min.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery('.wymeditor').wymeditor();
});
</script>
</head>
<body>
<h1>WYMeditor integration example</h1>
<p><a href="http://www.wymeditor.org/">WYMeditor</a> is a web-based XHTML WYSIWYM editor.</p>
<form method="post" action="">
<textarea class="wymeditor">&lt;p&gt;Hello, World!&lt;/p&gt;</textarea>
<input type="submit" class="wymupdate" />
</form>
</body>
</html>

199
public/wymeditor/examples/17-pretty-theme.html Normal file
View File

@@ -0,0 +1,199 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
* WYMeditor : what you see is What You Mean web-based editor
* Copyright (c) 2005 - 2009 Jean-Francois Hovinne, http://www.wymeditor.org/
* Dual licensed under the MIT (MIT-license.txt)
* and GPL (GPL-license.txt) licenses.
*
* For further information visit:
* http://www.wymeditor.org/
*
* File Name:
* 17-pretty-theme.html
* WYMeditor integration example.
* See the documentation for more info.
*
* File Authors:
* Jean-Francois Hovinne - http://www.hovinne.com/
* Gyuris Gellért - http://bubu.ujevangelizacio.hu/bubu
* Philipp Cordes (pc a-t irgendware dotnet)
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WYMeditor</title>
<!-- jQuery library is required, see http://jquery.com/ -->
<script type="text/javascript" src="../jquery/jquery.js"></script>
<!-- WYMeditor main JS file, minified version -->
<script type="text/javascript" src="../wymeditor/jquery.wymeditor.min.js"></script>
<script type="text/javascript">
/* Here we replace default theme to pretty.
*/
jQuery(function() {
jQuery('.wymeditor').wymeditor({
iframeBasePath: "../wymeditor/iframe/pretty/",
postInit: function(wym) {
//construct the button's html
var html = "<li class=\"wym_tools_toogle_pretty_theme\">"
+ "<a name=\"TogglePrettyTheme\" href=\"#\""
+ " title=\"Toggle short and verbose theme style\""
+ " style=\"background-image:"
+ " url(../wymeditor/iframe/pretty/icon.png)\">"
+ "Toggle short and verbose theme style"
+ "</a></li>";
//add the button to the tools box
jQuery(wym._box)
.find(wym._options.toolsSelector + wym._options.toolsListSelector)
.append(html);
//handle click event
jQuery(wym._box)
.find('li.wym_tools_toogle_pretty_theme a').click(function() {
wym.toggleClass('short', 'BODY' );
return(false);
});
}
});
});
</script>
</head>
<body>
<h1>WYMeditor integration example</h1>
<p><a href="http://www.wymeditor.org/">WYMeditor</a> is a web-based XHTML WYSIWYM editor.</p>
<form method="post" action="">
<textarea class="wymeditor">
&lt;p&gt;Paragraph &amp;lt;p&amp;gt; • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum metus tellus, ultrices ac tristique vitae, laoreet et ante. Aliquam elit velit, porta sed volutpat vitae, sodales in dolor. Vestibulum eros odio, gravida et bibendum et, accumsan imperdiet eros. In at mauris nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent ultrices interdum velit, sit amet lacinia massa varius in. Sed vulputate dapibus nulla, et tincidunt urna faucibus eu. &lt;/p&gt;
&lt;p class="some"&gt;Paragraph &amp;lt;p&amp;gt; with class "some" • Nullam bibendum rhoncus ullamcorper. Aliquam vitae ullamcorper metus. Phasellus vitae ipsum tortor, accumsan cursus nunc.&lt;/p&gt;
&lt;h1&gt;Heading 1 &amp;lt;h1&amp;gt;&lt;/h1&gt;
&lt;h1 class="first"&gt;Heading 1 &amp;lt;h1&amp;gt; with class "first"&lt;/h1&gt;
&lt;h2&gt;Heading 2 &amp;lt;h2&amp;gt;&lt;/h2&gt;
&lt;h2 class="other"&gt;Heading 2 &amp;lt;h2&amp;gt; with class "other"&lt;/h2&gt;
&lt;h2&gt;&lt;a href="#"&gt;Linked Heading 2 &lt;/a&gt;&amp;lt;h2&amp;gt;&lt;/h2&gt;
&lt;h3&gt;Heading 3 &amp;lt;h3&amp;gt;&lt;/h3&gt;
&lt;h4&gt;Heading 4 &amp;lt;h4&amp;gt;&lt;/h4&gt;
&lt;h5&gt;Heading 5 &amp;lt;h5&amp;gt;&lt;/h5&gt;
&lt;h6&gt;Heading 6 &amp;lt;h6&amp;gt;&lt;/h6&gt;
&lt;div&gt;Division, section &amp;lt;div&amp;gt; • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/div&gt;
&lt;div class="messages error"&gt;Division, section &amp;lt;div&amp;gt; with class "messages error" • Vivamus metus orci, consectetur a consectetur sed, malesuada sed ligula. Nunc nibh quam, tempor sagittis rhoncus quis, placerat a elit.&lt;/div&gt;
&lt;address&gt;Address &amp;lt;address&amp;gt; • Suspendisse laoreet pellentesque nibh id gravida. &lt;/address&gt;
&lt;blockquote cite="#"&gt;Quoted section &amp;lt;blockquote&amp;gt; • Donec vulputate pretium egestas. Vivamus faucibus ultrices elit, sit amet dignissim mauris semper at. Mauris laoreet nisi sed dolor volutpat sagittis. Proin euismod varius nisl ut interdum. Maecenas tempor, ipsum placerat suscipit malesuada, sem ipsum ullamcorper purus, eu eleifend tortor ante ac arcu. &lt;/blockquote&gt;
&lt;blockquote&gt;&lt;p&gt;Nested paragraph in quoted section • Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.&lt;/blockquote&gt;
&lt;pre&gt;Preformatted text &amp;lt;pre&amp;gt; •
Proin hendrerit felis
vitae urna bibendum commodo.
Cras non augue vitae metus ullamcorper porttitor at et nisl.
Quisque dui lacus, vestibulum at placerat vitae, dignissim ac erat.&lt;/pre&gt;
&lt;p&gt;Inline elements: strong, em, a href, span, abbr, acronym, q, cite, kbd, samp, var, dfn, code, del, ins, sup, sub • Lorem ipsum
&lt;strong&gt;important text &amp;lt;strong&amp;gt; and &amp;lt;b&amp;gt; • dolor sit amet&lt;/strong&gt;, consectetur
&lt;em&gt;emphasized text &amp;lt;em&amp;gt; and &amp;lt;i&amp;gt; • adipiscing elit&lt;/em&gt;. Vestibulum
&lt;a href="#"&gt;hyperlink &amp;lt;a href&amp;gt; • metus&lt;/a&gt; tellus, ultrices ac
&lt;span&gt;generic inline container &amp;lt;span&amp;gt; • tristique vitae&lt;/span&gt;, laoreet et ante. Sodales
&lt;abbr title="abbr"&gt;abbreviation &amp;lt;abbr&amp;gt; • ALIQUAM&lt;/abbr&gt; elit velit,
&lt;acronym title="acronym"&gt;acronym &amp;lt;acronym&amp;gt; • PORTA&lt;/acronym&gt; sed volutpat,
&lt;q&gt;short quotation &amp;lt;q&amp;gt; • Vestibulum eros odio&lt;/q&gt;, gravida et bibendum et,
&lt;cite&gt;title of a work &amp;lt;cite&amp;gt; • accumsan imperdiet&lt;/cite&gt; eros. In at mauris
&lt;kbd&gt;keyboard input &amp;lt;kbd&amp;gt; • vitae&lt;/kbd&gt; sodales in dolor. Cum sociis
&lt;samp&gt;sample output from a computer program &amp;lt;samp&amp;gt; • natoque penatibus&lt;/samp&gt; et magnis dis
&lt;var&gt;variable &amp;lt;var&amp;gt; • parturient&lt;/var&gt; montes, nascetur
&lt;dfn&gt;definition term &amp;lt;dfn&amp;gt; • ridiculus&lt;/dfn&gt; mus. Praesent
&lt;code&gt;computer code &amp;lt;code&amp;gt; • torqueo jumentum dolus esca&lt;/code&gt; suscipit,
&lt;del&gt;deleted text &amp;lt;del&amp;gt; • ultrices&lt;/del&gt; velit, sit amet
&lt;ins&gt;inserted text &amp;lt;ins&amp;gt; • acinia massa varius&lt;/ins&gt; in. Sed vulputate dapibus nulla, et
&lt;sup&gt;supscript text &amp;lt;sup&amp;gt; • tincidunt&lt;/sup&gt; urna faucibus eu. Neo damnum aliquam
&lt;sub&gt;subscript text &amp;lt;sub&amp;gt; • consequat&lt;/sub&gt;. Abdo genitus luptatum virtus singularis distineo validus ea. Gravis
&lt;strong class="myinlineclass"&gt;important text &amp;lt;strong&amp;gt; with class "myinlineclass" • oppeto huic incassum. Vulputate hos singularis veniam zelus singularis utinam vulputate sino quidne. Nutus neque quidem. Natu interdico melior.Oppeto vulpes meus jugis ut iriure valde consectetuer&lt;/strong&gt; abigo. Aptent bene ideo commoveo quadrum abbas. Vereor macto neo probo ille. Esse vulpes sino virtus rusticus brevitas mos. Cui ad vulputate et vero zelus feugiat os olim obruo. Facilisi quadrum proprius gravis velit humo nunc wisi imputo antehabeo.Valde dolore tation facilisi ullamcorper gemino gemino cui qui paratus. Camur in capto euismod. Brevitas vero iriure letalis valde oppeto plaga ullamcorper adipiscing inhibeo.
&lt;/p&gt;
&lt;h2&gt;Ordered List&lt;/h2&gt;
&lt;ol&gt;
&lt;li&gt;Nullam ullamcorper porta sem quis aliquet. Integer sed metus justo.&lt;/li&gt;
&lt;li&gt;Lorem ipsum dolor sit amet consectetuer.&lt;/li&gt;
&lt;li&gt;Neo damnum aliquam consequat. Abdo genitus luptatum virtus singularis distineo validus ea. Gravis oppeto huic incassum torqueo jumentum dolus esca suscipit. Vulputate hos singularis veniam zelus singularis utinam vulputate sino quidne. Nutus neque quidem. Natu interdico melior.Oppeto vulpes meus jugis ut iriure valde consectetuer abigo. Aptent bene ideo commoveo quadrum abbas. Vereor macto neo probo ille.&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Pellentesque dui mauris, mattis id lobortis porttitor, laoreet eu dui. Vestibulum eget ligula mauris, iaculis euismod sapien.&lt;/p&gt;&lt;p&gt;Donec quis justo lorem.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;Condimentum quis.&lt;/li&gt;
&lt;li&gt;Congue Quisque augue elit dolor.
&lt;ol&gt;
&lt;li&gt;Sed at tempus enim.&lt;/li&gt;
&lt;li&gt;Aliquam accumsan lorem eu dui tempus vel pellentesque magna hendrerit.&lt;/li&gt;
&lt;li&gt;Donec eleifend sodales lorem at varius. Pellentesque condimentum dui scelerisque eros consectetur blandit. Etiam posuere placerat arcu ut cursus. Mauris dui ligula, porta ut tincidunt quis, ornare ut dolor. Sed sed mollis felis. Suspendisse laoreet pellentesque nibh id gravida. Pellentesque dui mauris, mattis id lobortis porttitor, laoreet eu dui. Vestibulum eget ligula mauris, iaculis euismod sapien. Donec quis justo lorem.&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;li&gt;Congue Quisque augue elit dolor nibh.&lt;/li&gt;
&lt;li&gt;Vestibulum feugiat tempor gravida.&lt;/li&gt;
&lt;li&gt;Donec vulputate pretium egestas.&lt;/li&gt;
&lt;li&gt;Vivamus faucibus ultrices elit, sit amet dignissim mauris semper at.&lt;/li&gt;
&lt;li&gt;Mauris laoreet nisi sed dolor volutpat sagittis.&lt;/li&gt;
&lt;/ol&gt;
&lt;h2&gt;Unordered List&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Donec quis justo lorem.&lt;/li&gt;
&lt;li&gt;Condimentum quis.&lt;/li&gt;
&lt;li&gt;Congue Quisque augue elit dolor.
&lt;ul class="special"&gt;
&lt;li&gt;Mauris laoreet nisi sed dolor volutpat sagittis. &lt;/li&gt;
&lt;li&gt;Proin euismod varius nisl ut interdum.
&lt;ul&gt;
&lt;li&gt;Maecenas tempor, ipsum placerat suscipit malesuada, sem ipsum ullamcorper purus, eu eleifend tortor ante ac arcu.&lt;/li&gt;
&lt;li&gt;Donec eleifend sodales lorem at varius.&lt;/li&gt;
&lt;li&gt;Nullam ullamcorper porta sem quis aliquet. Integer sed metus justo.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Suspendisse non lorem eget lacus tincidunt mattis.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Nunc cursus sem et pretium sapien eget.&lt;/li&gt;
&lt;/ul&gt;
&lt;ul&gt;&lt;/ul&gt;
&lt;h2&gt;Definition List&lt;/h2&gt;
&lt;dl class="something"&gt;
&lt;dt&gt;Cras&lt;/dt&gt;
&lt;dd&gt;Phasellus convallis interdum dictum. &lt;/dd&gt;
&lt;dd&gt;Suspendisse lectus eros, vestibulum et sagittis eu, fringilla ac urna. Phasellus ullamcorper faucibus sapien, nec rhoncus orci gravida id. Quisque elementum leo at leo facilisis euismod. Nunc sit amet elit vitae arcu fermentum adipiscing eu at mauris.&lt;/dd&gt;
&lt;dt&gt;Aenean volutpat urna a risus congue fermentum.&lt;/dt&gt;
&lt;dd&gt;Curabitur id nunc ante, nec tincidunt odio. Nulla facilisi. In hac habitasse platea dictumst. Curabitur suscipit luctus aliquet. Pellentesque quis risus dolor.&lt;/dd&gt;
&lt;/dl&gt;
&lt;table width="50%" border="1"&gt;
&lt;caption&gt;Caption • Table with border 1.&lt;/caption&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;thead th • Aliquam&lt;/th&gt;
&lt;th&gt;thead th • Quisque&lt;/th&gt;
&lt;th&gt;thead th • Nunc&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;tbody tr td • Curabitur suscipit luctus aliquet.&lt;/td&gt;
&lt;td&gt;tbody tr td • Nunc orci lorem, rhoncus eu elementum id, lacinia eget lorem. Nulla in neque viverra metus iaculis posuere. &lt;/td&gt;
&lt;td&gt;tbody tr td • Proin id leo condimentum ipsum commodo consequat.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Neo damnum aliquam consequat.&lt;/td&gt;
&lt;td&gt;Neo damnum aliquam consequat.&lt;/td&gt;
&lt;td&gt;Neo damnum aliquam consequat. &lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Neo damnum aliquam consequat.&lt;/td&gt;
&lt;td&gt;Neo damnum aliquam consequat. Neo damnum aliquam consequat.&lt;/td&gt;
&lt;td&gt;Neo damnum aliquam consequat. Neo damnum aliquam consequat. Neo damnum aliquam consequat&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
</textarea>
<input type="submit" class="wymupdate" />
</form>
</body>
</html>

51
public/wymeditor/examples/18-compact-skin.html Normal file
View File

@@ -0,0 +1,51 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
* WYMeditor : what you see is What You Mean web-based editor
* Copyright (c) 2005 - 2009 Jean-Francois Hovinne, http://www.wymeditor.org/
* Dual licensed under the MIT (MIT-license.txt)
* and GPL (GPL-license.txt) licenses.
*
* For further information visit:
* http://www.wymeditor.org/
*
* File Name:
* 18-white-space-property.html
* Test page for #361.
* See the documentation for more info.
*
* File Authors:
* Jorge Salinas - http://jsalinas.info
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page</title>
<!-- jQuery library is required, see http://jquery.com/ -->
<script type="text/javascript" src="../jquery/jquery.js"></script>
<!-- WYMeditor main JS file, minified version -->
<script type="text/javascript" src="../wymeditor/jquery.wymeditor.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.wymeditor').wymeditor({
skin: 'compact',
});
});
</script>
<style type="text/css" media="screen">
.container { white-space: nowrap; }
</style>
</head>
<body>
<div class="container">
<form action="" method="">
<textarea class="wymeditor" name="test" rows="8" cols="40"></textarea>
</form>
</div>
</body>
</html>

62
public/wymeditor/examples/19-structured-headings.html Normal file
View File

@@ -0,0 +1,62 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
* WYMeditor : what you see is What You Mean web-based editor
* Copyright (c) 2005 - 2009 Jean-Francois Hovinne, http://www.wymeditor.org/
* Dual licensed under the MIT (MIT-license.txt)
* and GPL (GPL-license.txt) licenses.
*
* For further information visit:
* http://www.wymeditor.org/
*
* File Name:
* 19-structured-headings.html
* WYMeditor integration example - structured headings plugin.
* See the documentation for more info.
*
* File Authors:
* Jean-Francois Hovinne - http://www.hovinne.com/
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WYMeditor</title>
<!-- jQuery library is required, see http://jquery.com/ -->
<script type="text/javascript" src="../jquery/jquery.js"></script>
<!-- WYMeditor main JS file, minified version -->
<script type="text/javascript" src="../wymeditor/jquery.wymeditor.min.js"></script>
<!-- Structured headings plugin JS file -->
<script type="text/javascript"
src="../wymeditor/plugins/structured_headings/jquery.wymeditor.structured_headings.js">
</script>
<script type="text/javascript">
jQuery(function() {
jQuery('.wymeditor').wymeditor({
html: '<p>Hello, world!<\/p>',
stylesheet: 'styles.css',
postInit: function(wym) {
// Call this function to initialize the structured headings plugin
wym.structuredHeadings();
}
});
});
</script>
</head>
<body>
<h1>WYMeditor integration example - structured headings plugin</h1>
<p><a href="http://www.wymeditor.org/">WYMeditor</a> is a web-based XHTML WYSIWYM editor.</p>
<form method="post" action="">
<textarea class="wymeditor"></textarea>
<input type="submit" class="wymupdate" />
</form>
</body>
</html>

46
public/wymeditor/examples/README Normal file
View File

@@ -0,0 +1,46 @@
WYMeditor : what you see is What You Mean web-based editor
Copyright (c) 2005 - 2009 Jean-Francois Hovinne, http://www.wymeditor.org/
Dual licensed under the MIT (MIT-license.txt)
and GPL (GPL-license.txt) licenses.
For further information visit:
http://www.wymeditor.org/
File Name:
README
Readme file for WYMeditor integration examples.
File Authors:
Jean-François Hovinne - http://www.hovinne.com/
INTEGRATION EXAMPLES
====================
This directory contains step-by-step examples to help you
get started integrating WYMeditor in your application.
Please start with 01-basic.html.
For more information, please read the documentation, available at:
http://trac.wymeditor.org/trac/wiki
If you need help, feel free to create an account on the forum or subscribe
to the WYMeditor-user mailing-list, and ask your question.
http://forum.wymeditor.org/
http://lists.wymeditor.org/
More examples will be added from time to time.
You can check them out with Subversion:
$ svn co svn://svn.wymeditor.org/wymeditor/trunk/src/examples
Subversion is an open source version control system, available at:
http://subversion.tigris.org/
A Windows Subversion client is available at:
http://tortoisesvn.tigris.org/
Note: if you test the examples locally with FF3, you'll need to turn off
security.fileuri.strict_origin_policy (type about:config in the URL and search
for the value).
More info: http://kb.mozillazine.org/Security.fileuri.strict_origin_policy

59
public/wymeditor/examples/index.html Normal file
View File

@@ -0,0 +1,59 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
* WYMeditor : what you see is What You Mean web-based editor
* Copyright (c) 2005 - 2009 Jean-Francois Hovinne, http://www.wymeditor.org/
* Dual licensed under the MIT (MIT-license.txt)
* and GPL (GPL-license.txt) licenses.
*
* For further information visit:
* http://www.wymeditor.org/
*
* File Name:
* index.html
* WYMeditor integration examples index page.
* See the documentation for more info.
*
* File Authors:
* Jean-Francois Hovinne - http://www.hovinne.com/
* Philipp Cordes (pc a-t irgendware dotnet)
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WYMeditor</title>
</head>
<body>
<h1>WYMeditor integration examples</h1>
<p>
<a href="http://www.wymeditor.org/">WYMeditor</a> is a web-based XHTML WYSIWYM editor. Please study the source code of each page to learn more about the examples and how to implement them.
</p>
<p>
<strong>Note:</strong> These examples might not work locally in your browser due to browser security policies regarding frames. Serve WYMeditor and this page from a proper web server or <a href="http://wymeditor.no.de/wymeditor/examples/">try out the demos online</a>.
</p>
<p>
<ol>
<li><a href="01-basic.html">Basic integration</a></li>
<li><a href="02-custom-language.html">Custom language</a></li>
<li><a href="03-plugin.html">Plugin</a></li>
<li><a href="04-multiple-instances.html">Multiple instances</a></li>
<li><a href="05-custom-dialog.html">Custom dialog</a></li>
<li><a href="06-custom-menu.html">Custom menu</a></li>
<li><a href="07-custom-button.html">Custom button</a></li>
<li><a href="08-custom-panel.html">Custom panel</a></li>
<li><a href="09-two-panels.html">Two panels</a></li>
<li><a href="10-resizable.html">Resizable</a></li>
<li><a href="11-custom-parser.html">Custom XHTML parser</a></li>
<li><a href="12-custom-layout.html">Custom layout</a></li>
<li><a href="13-silver-skin.html">Silver skin, hovertools, resizable</a></li>
<li><a href="14-more-inline-elements.html">More inline elements</a></li>
<li><a href="15-rdfa-editor.html">RDFa editor</a></li>
<li><a href="16-google-apis.html">Google APIs</a></li>
<li><a href="17-pretty-theme.html">Pretty theme</a></li>
<li><a href="18-compact-skin.html">Compact Skin</a></li>
<li><a href="19-structured-headings.html">Structured headings plugin</a></li>
</ol>
</p>
</body>
</html>

64
public/wymeditor/examples/styles.css Normal file
View File

@@ -0,0 +1,64 @@
/* YOU CAN ADD NON-WYMEDITOR RELATED STYLES HERE */
body {
font-family: sans-serif;
}
h1 {
font-size: 1.5em;
}
/* EDITOR RELATED STYLES - CUSTOMIZE FOR YOUR NEEDS */
/*
The classes panel, the visual feedback and the preview
will be affected by these values.
- Commented styles inside style definitions are used for visual
feedback when using the editor.
- Comments before opening the style are used as caption.
- Comments after the class name and before the style declaration ({)
define the jQuery expression that decides whether this
style should be applied or not.
Note: the WYMeditor and /WYMeditor comments below are required
for the CSS parser to work properly.
*/
/* WYMeditor */
/* PARA: Date */
p.date {
color: #ccf;
/* background-color: #ff9; border: 2px solid #ee9; */
}
/* PARA: Hidden note */
p.hidden-note /* p[@class!="important"] */ {
display: none;
/* color: #999; border: 2px solid #ccc; */
}
/* PARA: Important */
p.important /* p[@class!="hidden-note"] */ {
color: red; font-weight: bold;
/* color: red; font-weight: bold; border: 2px solid red; */
}
img.border {
border: 1px solid #ccc;
/* border: 4px solid #ccc; */
}
/* LIST: Special */
ul.special,
ol.special {
color: green;
/** / background-color: #fc9; border: 2px solid red; /**/
}
/* /WYMeditor */
/* END EDITOR RELATED STYLES */
/* YOU CAN ADD NON-WYMEDITOR RELATED STYLES HERE */