📄 index.php
字号:
<?php
/*
KOIVI TTW WYSIWYG Editor Copyright (C) 2004 Justin Koivisto
Version 3.2.4
Last Modified: 4/3/2006
This library is free software; you can redistribute it and/or modify it
under the terms of the GNU Lesser General Public License as published by
the Free Software Foundation; either version 2.1 of the License, or (at
your option) any later version.
This library is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public
License for more details.
You should have received a copy of the GNU Lesser General Public License
along with this library; if not, write to the Free Software Foundation,
Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
Full license agreement notice can be found in the LICENSE file contained
within this distribution package.
Justin Koivisto
justin.koivisto@gmail.com
http://koivi.com
*/
// prevent some servers from issuing a parse error because of short_open_tags = On
echo '<?phpxml version="1.0" encoding="iso-8859-1"?>',"\n";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Through The Web Rich Text (WYSIWYG) Editor</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Rich Text (WYSIWYG) HTML Through-The-Web web content editor for Microsoft Internet Explorer and Gecko-based browsers using Object Oriented JavaScript." />
<script type="text/javascript" src="editor.js"></script>
<style type="text/css">
@import url(http://koivi.com/styles.css);
body{
font: normal 1em/1.7em Verdana, sans-serif;
}
ul{
list-style-type: none;
}
li h1{
font: bold 1.8em Verdana, sans-serif;
margin:0px;
color: #000;
border: 0;
background-color: transparent;
}
li h2{
font: bold 1.6em Verdana, sans-serif;
margin:0px;
color: #000;
border: 0;
padding: 0;
background-color: transparent;
}
li h3{
font: bold 1.4em Verdana, sans-serif;
margin:0px;
color: #000;
background-color: transparent;
}
li h4{
font: bold 1.2em Verdana, sans-serif;
margin:0px;
color: #000;
background-color: transparent;
}
li h5{
font: bold 1em Verdana, sans-serif;
margin:0px;
color: #000;
background-color: transparent;
}
li h6{
font: bold .8em Verdana, sans-serif;
margin:0px;
color: #000;
background-color: transparent;
}
.butClass{
border: #dfdfdf 1px solid;
cursor: pointer;
}
li p{
margin:0px;
padding:0px;
}
</style>
<!--[if lt IE 7]><script src="/ie7/ie7-standard.js" type="text/javascript"></script><![endif]-->
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-207722-1";
urchinTracker();
</script>
</head>
<body>
<div id="container">
<div id="intro">
<h1>Rich Text (WYSIWYG) HTML Through-The-Web Editor</h1>
<p>
On this page is an example of a web content editor for use in custom Content Management Systems (CMS).
This editor was designed and tested to work with the following browsers:
</p>
<ul>
<li>Mozilla 1.3.1+ (Linux, PC & Mac)</li>
<li>Netscape 7.1+ (Linux, PC & Mac)</li>
<li>Firefox 1.0+ (Linux, PC & Mac)</li>
<li>Internet Explorer 5.5+</li>
<li>Epiphany 1.6.5 (Linux)</li>
</ul>
<p>Also, the <a href="safari-beta.php">beta version</a> actually partially works with Safari 2.0 (412) as well! See that page for more comments and features including language translations for interface elements.</p>
<p>The editor can be used to visually create content that can be placed on a web site where the user only needs to have familiarity with a word processor.</p>
<p>
As initially released on Jan 28, 2005, this editor is programmed using Javascript in an object oriented way. In other words, the editor is no longer
just a bunch of functions that work together to accomplish this. Instead, the editor.js file now defines a class that can be used to create editor objects
with.
</p>
<h1>Multiple Instances</h1>
<p>Previously I said it could be done, but never had the time to really test it out. Well, I was wrong (nobody's perfect!).</p>
<p>
<b>However</b>, now that the source for the editor has been converted to OO Javascript, you can put as many "instances" of the editor on a
page as you want!. Check out the information to the left for more information about use this feature.
</p>
</div>
<div>
<h1>TTW HTML Editor Interface</h1>
<form method="post" onsubmit="editor1.prepareSubmit();" action="<?php echo $_SERVER['REQUEST_URI'] ?>">
<script type="text/javascript">
var editor1 = new WYSIWYG_Editor('editor1');
editor1.display();
</script>
<noscript>
<p style="notSupported">
Your browser does not support Javascript with your current setings. I am unable to display the editor to you. Check your settings
and enable Javascript, or use one of the supported web browsers (listed in the right column) to view this page for a demonstration.
</p>
</noscript>
<input type="submit" value="Submit" name="update" /><br /><br />
</form>
</div>
<?php
if(isset($_POST['editor1_content'])){
?>
<div id="pageResults">
<h1>TTW WYSIWYG Editor Results</h1>
<p>
Below is the code that your browser generated using this editor. Note that each browser may generate different code. I have even witnessed different
versions or platforms of the same browser generating different HTML results.
</p>
<div class="example"><?php echo nl2br(htmlentities($_POST['editor1_content'])); ?></div>
</div>
<?php
}
?>
<div>
<h1>Using the TTW WYSIWYG Editor</h1>
<p>
Since I get a lot of requests for code examples on how to use the editor, I will give you some instructions on how to use it now that the source
code has been converted to object-oriented Javascript. (Of course, you could have just used the "View Source" option in your browser.)
</p>
<h2>Displaying the Editor</h2>
<ol>
<li>
<p>
The first step in getting the editor to work is to <a href="/WYSIWYG-Editor.zip">download the files</a>. Once downloaded, extract the zip archive
so you can actually use the files. (Yes, some people actually forgot to do that!)
</p>
</li>
<li>
<p>
Next, create the HTML in which you want to use the editor. In the <code>head</code> of that document, use the following lines to include the Javascript
WYSIWYG_Editor class definition file (changing directory names where appropriate to fit your configuration):
</p>
<pre class="example"><script type="text/javascript" src="editor.js"></script></pre>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -