WYMeditor forum

WYMeditor is a web-based WYSIWYM XHTML editor

Skip to content

Forum closed. New forum available at http://community.wymeditor.org/

"Preloading" the editor

Support forum for WYMeditor.
Post a reply

"Preloading" the editor

Postby webPragmatist on Fri Oct 17, 2008 4:19 pm

I am trying to separate wymeditor into a sort of "view" instead of having all of the HTML be generated by js on the fly.

Basically what I have done is clear all the "htmlHtml, boxHtml, etc." attributes and put everything in a view:

Code: Select all
<div class="wym_box wym_skin_default">
   <div class="wym_tools wym_section wym_buttons">
      <h2>Tools</h2>
      <ul>
         <li class="wym_tools_save"><a href="">Save</a></li>
         <li class="wym_tools_strong"><a title="Strong" name="Bold" href="#">Strong</a></li>
         <li class="wym_tools_emphasis"><a title="Emphasis" name="Italic" href="#">Emphasis</a></li>
         <li class="wym_tools_ordered_list"><a title="Ordered List" name="InsertOrderedList" href="#">Ordered List</a></li>
         <li class="wym_tools_unordered_list"><a title="Unordered List" name="InsertUnorderedList" href="#">Unordered List</a></li>
         <li class="wym_tools_link"><a title="Link" name="CreateLink" href="#">Link</a></li>
         <li class="wym_tools_unlink"><a title="Unlink" name="Unlink" href="#">Unlink</a></li>
         <li class="wym_tools_image"><a title="Image" name="InsertImage" href="#">Image</a></li>
         <li class="wym_tools_undo"><a title="Undo" name="Undo" href="#">Undo</a></li>
         <li class="wym_tools_redo"><a title="Redo" name="Redo" href="#">Redo</a></li>
         <li class="wym_tools_paste"><a title="Paste from Word" name="Paste" href="#">Paste from Word</a></li>
      </ul>
   </div>
   <div class="wym_area_main">
      <div class="wym_html wym_section" style="display: none;">
         <h2>Source code</h2>
         <textarea class="wym_html_val"/>
      </div>
      <div class="wym_iframe wym_section">
         <iframe onload="this.contentWindow.parent.WYMeditor.INSTANCES[0].initIframe(this)" src="/page/iframe.html"/>
      </div>
      <div class="wym_status wym_section"><h2>Status</h2></div>
   </div>
</div>


Now when I click on my attached instance (#content) everything disappears. Could someone help explain exactly how WymEditor is replacing the original HTML and building the HTML for the editor?
webPragmatist
 
Posts: 6
Joined: Sun Oct 05, 2008 4:46 pm
Top

Re: "Preloading" the editor

Postby webPragmatist on Fri Oct 17, 2008 6:51 pm

:? is this even possible...

I can't get it to do anything useful.

Code: Select all
<div class="wym_box wym_skin_default">
   <div class="wym_tools wym_section wym_buttons">
      <h2>Tools</h2>
      <ul>
         <li class="wym_tools_save"><a href="">Save</a></li>
         <li class="wym_tools_strong"><a title="Strong" name="Bold" href="#">Strong</a></li>
         <li class="wym_tools_emphasis"><a title="Emphasis" name="Italic" href="#">Emphasis</a></li>
         <li class="wym_tools_ordered_list"><a title="Ordered List" name="InsertOrderedList" href="#">Ordered List</a></li>
         <li class="wym_tools_unordered_list"><a title="Unordered List" name="InsertUnorderedList" href="#">Unordered List</a></li>
         <li class="wym_tools_link"><a title="Link" name="CreateLink" href="#">Link</a></li>
         <li class="wym_tools_unlink"><a title="Unlink" name="Unlink" href="#">Unlink</a></li>
         <li class="wym_tools_image"><a title="Image" name="InsertImage" href="#">Image</a></li>
         <li class="wym_tools_undo"><a title="Undo" name="Undo" href="#">Undo</a></li>
         <li class="wym_tools_redo"><a title="Redo" name="Redo" href="#">Redo</a></li>
         <li class="wym_tools_paste"><a title="Paste from Word" name="Paste" href="#">Paste from Word</a></li>
      </ul>
   </div>
   <div class="wym_area_main">
      <div class="wym_html wym_section">
         <h2>{Source_Code}</h2>
         <textarea class="wym_html_val"/>asdffsdfdf</textarea>
      </div>
      <div class="wym_iframe wym_section">
         <iframe onload="this.contentWindow.parent.WYMeditor.INSTANCES[0].initIframe(this)" />
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
            <html>
               <head>
                  <link rel="stylesheet" type="text/css" media="screen" href="/page/css/iframe.css" />
               </head>
               <body class="wym_iframe"></body>
            </html>
         </iframe>
      </div>
      <div class="wym_status wym_section"><h2>{Status}</h2></div>
   </div>
</div>
webPragmatist
 
Posts: 6
Joined: Sun Oct 05, 2008 4:46 pm
Top

Re: "Preloading" the editor

Postby jfh on Sat Oct 18, 2008 6:54 pm

It won't work unless you hack a little bit.
The following code should help (but doesn't work in MSIE):

Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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.pack.js"></script>

<script type="text/javascript">

WYMeditor.editor.prototype.init = function() {

  if (jQuery.browser.msie) {
    var WymClass = new WYMeditor.WymClassExplorer(this);
  }
  else if (jQuery.browser.mozilla) {
    var WymClass = new WYMeditor.WymClassMozilla(this);
  }
  else if (jQuery.browser.opera) {
    var WymClass = new WYMeditor.WymClassOpera(this);
  }
  else if (jQuery.browser.safari) {
    var WymClass = new WYMeditor.WymClassSafari(this);
  }
 
  if(WymClass) {
 
      if(jQuery.isFunction(this._options.preInit)) this._options.preInit(this);

      var SaxListener = new WYMeditor.XhtmlSaxListener();
      jQuery.extend(SaxListener, WymClass);
      this.parser = new WYMeditor.XhtmlParser(SaxListener);
     
      if(this._options.styles || this._options.stylesheet){
        this.configureEditorUsingRawCss();
      }
     
      this.helper = new WYMeditor.XmlHelper();

      for (var prop in WymClass) { this[prop] = WymClass[prop]; }

      this._box = jQuery('div.wym_box');

      if( jQuery.isFunction( jQuery.fn.data ) )
        jQuery.data(this._box.get(0), WYMeditor.WYM_INDEX, this._index);

      jQuery(this._box).find(this._options.htmlSelector).hide();

      this.loadSkin();

  }

};

jQuery(function() {

    jQuery('.wymeditor').wymeditor().hide();
});

</script>

</head>

<body>
<form method="post" action="">
<textarea class="wymeditor"></textarea>
<div class="wym_box wym_skin_default">
   <div class="wym_tools wym_section wym_buttons">
      <h2>Tools</h2>
      <ul>
         <li class="wym_tools_save"><a href="#">Save</a></li>
         <li class="wym_tools_strong"><a title="Strong" name="Bold" href="#">Strong</a></li>
         <li class="wym_tools_emphasis"><a title="Emphasis" name="Italic" href="#">Emphasis</a></li>
         <li class="wym_tools_ordered_list"><a title="Ordered List" name="InsertOrderedList" href="#">Ordered List</a></li>
         <li class="wym_tools_unordered_list"><a title="Unordered List" name="InsertUnorderedList" href="#">Unordered List</a></li>
         <li class="wym_tools_link"><a title="Link" name="CreateLink" href="#">Link</a></li>
         <li class="wym_tools_unlink"><a title="Unlink" name="Unlink" href="#">Unlink</a></li>
         <li class="wym_tools_image"><a title="Image" name="InsertImage" href="#">Image</a></li>
         <li class="wym_tools_undo"><a title="Undo" name="Undo" href="#">Undo</a></li>
         <li class="wym_tools_redo"><a title="Redo" name="Redo" href="#">Redo</a></li>
         <li class="wym_tools_paste"><a title="Paste from Word" name="Paste" href="#">Paste from Word</a></li>
      </ul>
   </div>
   <div class="wym_area_main">
      <div class="wym_html wym_section">
         <h2>{Source_Code}</h2>
         <textarea class="wym_html_val"></textarea>
      </div>
      <div class="wym_iframe wym_section">
         <iframe src="wymeditor/iframe/default/wymiframe.html" onload="this.contentWindow.parent.WYMeditor.INSTANCES[0].initIframe(this)"></iframe>
      </div>
      <div class="wym_status wym_section"><h2>{Status}</h2></div>
   </div>
</div>
<input type="submit" class="wymupdate" />
</form>
</body>
</html>


This is just an example to help you getting started - the code is provided "as is", without warranty of any kind. ;)
User avatar
jfh
Site Admin
 
Posts: 370
Joined: Sat Sep 23, 2006 8:43 pm
Location: Belgium
Top
Post a reply

Return to Support

Who is online

Users browsing this forum: No registered users and 1 guest

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group