Web based XHTML Editor

(1 votes, average: 3.00 out of 5)

Loading ...

239 views

WYMeditor is a web-based WYSIWYM (What You See Is What You Mean) XHTML editor (not WYSIWYG).

WYMeditor’s main concept is to leave details of the document’s visual layout, and to concentrate on its structure and meaning, while trying to give the user as much comfort as possible (at least as WYSIWYG editors).

WYMeditor has been created to generate perfectly structured XHTML strict code, to conform to the W3C XHTML specifications and to facilitate further processing by modern applications.

With WYMeditor, the code can’t be contaminated by visual informations like font styles and weights, borders, colors, …
The end-user defines content meaning, which will determine its aspect by the use of style sheets. The result is easy and quick maintenance of information.

As the code is compliant to W3C XHTML specifications, you can for example process it using a XSLT (at the client or the server side), giving you a wide range of applications.

Why WYMeditor ?

Do you modify your website using a content management system (CMS)? Do you allow your clients to modify their website with a CMS?

If yes, you have certainly met de difficult choice of a web-based (X)HTML editor.

You may have tried a full-featured WYSIWYG editor, but you apprehend that your clients use it inappropriately, with the risk it degenerates visually and on the code quality.
You may also have tried the BBcode syntax, Markdown or the wiki-style syntax, but you don’t want to force your clients to solutions that are too technical/complex for them, even if it tends to generate good quality code.

WYMeditor brings a new approach and a set of simple solutions which allow for a very easy to use editor, while still producing clean XHTML code. Thanks to its original approach it remains clear and easy to learn. A one-hour training and it’s the beginning of clean updates made by the end user.

How can I contribute ?

If you like WYMeditor and the freedom it brings to the web developer, don’t hesitate to give some help.

WYMeditor is Free/Open Source Software, which means anyone can use it and contribute. It also means community support is important to make it a really solid and long-lasting project.

Any help and feedback is welcome, either on the Trac site, or on the forum.

You may also consider making a donation, to encourage us to maintain the project.

* A nightly build is available as well.
* All source code is kept under Subversion control, which you can browse online.
o If you have access to Subversion, you can connect to the repository here:

svn co svn://svn.wymeditor.org/wymeditor

o If you’re using make, you can build a WYMeditor package:

svn co svn://svn.wymeditor.org/wymeditor
cd wymeditor/trunk
make

Installation

* Extract the package.
* The ‘wymeditor’ folder and jQuery JS file must be accessible from your web page.
* Edit your web page to include the configuration and javascript for WYMeditor.

Minimal page integration (converts all textarea elements into editors) ¶

<html>
<head>
<title>WYMeditor</title>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="wymeditor/jquery.wymeditor.pack.js"></script>
<script type="text/javascript">

jQuery(function() {
    jQuery(".wymeditor").wymeditor();
});

</script>
</head>

<body>
<form method="post" action="">
<textarea class="wymeditor"></textarea></form></body></html>

Explanation:

* jQuery(function() {}); is a shorthand for jQuery(document).ready(), allowing you to bind a function to be executed when the DOM document has finished loading.
* If you prefer, you can use the jQuery ‘$’ shortcut.
* jQuery(“.wymeditor”).wymeditor(); will replace every element with the class wymeditor by a WYMeditor instance.
* The value of the element replaced by WYMeditor will be updated by e.g. clicking on the element with the class wymupdate. See Customization.

Note: WYMeditor automagically detects the paths of required CSS and JS files.
You’ll need to initialize basePath, cssPath and jQueryPath if you don’t use default file names (i.e. jquery.wymeditor.js, wymeditor/skins/{skin name}/screen.css, jquery.js).
See Customization.
Basic customization example ¶

<html>
<head>
<title>WYMeditor</title>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="wymeditor/jquery.wymeditor.pack.js"></script>
<script type="text/javascript">

jQuery(function() {
    jQuery(".wymeditor").wymeditor({
       html: '<p>Hello, World!< \/p>',
       stylesheet: 'styles.css'
    });
});

</p></script>
</head>

<body>
<form method="post" action="">
<textarea class="wymeditor"></textarea>
<input type="submit" class="wymupdate" />
</form>
</body>

</html>

Explanation:

* The ‘html’ option will initialize the editor’s content.
* The ’stylesheet’ option will automagically parse your CSS file to populate the Classes panel and to initialize the visual feedback.

Demo: http://files.wymeditor.org/wymeditor/trunk/src/examples/10-resizable.html

Download: http://www.wymeditor.org/download/file.php?f=wymeditor-0.5-beta-2.tar.gz

Source: http://www.wymeditor.org/

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/stumbleupon_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/delicious_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/blinklist_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/furl_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/technorati_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/magnolia_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/google_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/myspace_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/facebook_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/sphinn_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/mixx_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/twitter_32.png

Related Listings:

NicEdit Inline Content Editor NicEdit is a WYSIWYG editor for websites. Its goal is...
Akeditable in place editor Updated Those of you in hurry to download the plugin or...
Cross-Browser Rich Text Editor (RTE) The Cross-Browser Rich Text Editor (RTE) is based on the...
sLedit – Inplace editor for mootools I’ve had a lot of requests to send people mooEdit....
widgEditor Simple WYSIWYG Editor widgEditor is an easily installed, easily customisable WYSIWYG editor...