Please login or register.

Login with username, password and session length
Advanced search  

News:

You need/want an older version of sNews ? Download an older/unsupported version here.

Author Topic: WYMeditor (open source web-based editor)  (Read 17303 times)

patrice

  • Newbie
  • *
  • Karma: 8
  • Posts: 6
WYMeditor (open source web-based editor)
« on: September 11, 2007, 07:03:16 PM »

"WYMeditor is a web-based WYSIWYM XHTML editor.

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...
"

More information : http://www.wymeditor.org/en/
Demo : http://www.wymeditor.org/en/demo/

Step-by-step method to replace sNews default editor with WYMeditor

(the method is similar to the one explained in this post)

Download archive wymeditor-0.4.tar.gz

Unarchive the file and move directories 'jquery' and 'wymeditor' into 'sNews' root directory

All the following code modifications must be made into 'snews.php'.

Replace line 325
   
Code: [Select]
if ($_SESSION[db('website').'Logged_In'] == token()) {js();}with
   
Code: [Select]
if ($_SESSION[db('website').'Logged_In'] == token()) {js();
echo
' <link rel="stylesheet" type="text/css" media="screen" href="wymeditor/skins/default/screen.css" />
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="wymeditor/jquery.wymeditor.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery(".wymeditor").wymeditor({
cssPath: "'.db('website').'wymeditor/skins/default/screen.css",
jQueryPath: "'.db('website').'jquery/jquery.js",
wymPath: "'.db('website').'wymeditor/jquery.wymeditor.js"
});
});
</script>';
}
Replace line 1048
Code: [Select]
case 'textarea': $output = '<p>'.$lbl.':<br /><textarea name="'.$name.'" rows="'.$rows.'" cols="'.$cols.'"'.$attribs.'>'.$value.'</textarea></p>'; break;with
Code: [Select]
case 'textarea':
if ($_SESSION[db('website').'Logged_In'] == token()) {
$output = '<p>'.$lbl.':<br /><textarea class="wymeditor" name="'.$name.'" rows="'.$rows.'" cols="'.$cols.'"'.$attribs.'>'.$value.'</textarea></p>'; break;
} else {
$output = '<p>'.$lbl.':<br /><textarea name="'.$name.'" rows="'.$rows.'" cols="'.$cols.'"'.$attribs.'>'.$value.'</textarea></p>'; break;
}
break;
Comment from line 1312
Code: [Select]
/* echo '<p>';to line 1322
Code: [Select]
echo '</p>';*/Replace line 1327
Code: [Select]
echo html_input('fieldset', '', '', '', '', '', '', '', '', '', '', '', '', '', '<a title="'.l('customize').'" onclick="toggle(\'preview\')" style="cursor: pointer;">'.l('preview').'</a>');with
Code: [Select]
if ($_SESSION[db('website').'Logged_In'] == token()) {
echo html_input('fieldset', '', '', '', '', '', '', '', '', '', '', '', '', '', '<a title="'.l('customize').'" class="wymupdate" onclick="toggle(\'preview\')" style="cursor: pointer;">'.l('preview').'</a>');
} else {
echo html_input('fieldset', '', '', '', '', '', '', '', '', '', '', '', '', '', '<a title="'.l('customize').'" onclick="toggle(\'preview\')" style="cursor: pointer;">'.l('preview').'</a>');
}
Replace line 1393
Code: [Select]
echo html_input('submit', $frm_task, $frm_task, $frm_submit, '', 'button', '', '', '', '', '', '', '', '', '');with
Code: [Select]
echo html_input('submit', $frm_task, $frm_task, $frm_submit, '', 'wymupdate', '', '', '', '', '', '', '', '', '');
That's all, everything should work perfectly! If you meet problems in integrating WYMeditor, feel free to post me a message. For other resquests concerning WYMeditor, please refer to the official site.
Note that I am just a Web developer that has no interest in WYMeditor. I have discovered this editor a few days ago (at the same time than sNews) and I have adopted it right away (like sNews). In my opinion, this is a very good Web-based editor since it produces very clean code compliant to the standards. Last but not least it is very well supported and the project seems very dynamic. Enjoy!
Patrice
« Last Edit: September 17, 2007, 04:36:45 PM by patrice »
Logged
This message was sent from a PC laptop powered by GNU / Linux (distribution Ubuntu).

Keyrocks

  • Doug
  • Administrator
  • ULTIMATE member
  • ******
  • Karma: 451
  • Posts: 6288
  • Semantically Challenged
    • snews.ca
Re: WYMeditor (open source web-based editor)
« Reply #1 on: September 11, 2007, 09:00:33 PM »

Thanks for your contribution Patrice... and welcome to our sNews Project. I am sure other members will look forward to test-running your well detailed instructions. Please check back to this topic now and then... to assist anyone who may experience difficulties.  ;)
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

piXelatedEmpire

  • MIA
  • Thread Moderator
  • ULTIMATE member
  • *****
  • Karma: 37
  • Posts: 1454
  • currently MIA
Re: WYMeditor (open source web-based editor)
« Reply #2 on: September 12, 2007, 01:51:35 AM »

Welcome aboard patrice!  This looks very nice - what a terrific first post! Cheers!
Logged
my apologies to the sNews crew, but I will be MIA for the forseeable future

Patric Ahlqvist

  • Nobodys perfect, but Im pretty effing close
  • Administrator
  • ULTIMATE member
  • ******
  • Karma: 65
  • Posts: 4957
  • I'm a self-made man and worships my creator.
    • p-ahlqvist.com
Re: WYMeditor (open source web-based editor)
« Reply #3 on: September 12, 2007, 02:19:32 PM »

Karmalicious, indeed. that'll give "France Uh point", France one point. Welcome and enjoy, Patrice
Logged
My sNews site
"It's only dead fish that goes with the flow... "
Updated, online again - Free designs

patrice

  • Newbie
  • *
  • Karma: 8
  • Posts: 6
Re: WYMeditor (open source web-based editor)
« Reply #4 on: September 12, 2007, 02:30:35 PM »

Thanks for your welcome, sNews is not only a great CMS but also a nice team!
Logged
This message was sent from a PC laptop powered by GNU / Linux (distribution Ubuntu).

Patric Ahlqvist

  • Nobodys perfect, but Im pretty effing close
  • Administrator
  • ULTIMATE member
  • ******
  • Karma: 65
  • Posts: 4957
  • I'm a self-made man and worships my creator.
    • p-ahlqvist.com
Re: WYMeditor (open source web-based editor)
« Reply #5 on: September 12, 2007, 03:52:40 PM »

Damn what a nice thing to say... another karma point :D
Logged
My sNews site
"It's only dead fish that goes with the flow... "
Updated, online again - Free designs

Ken Dahlin

  • sNews Dude
  • Full Member
  • *****
  • Karma: 30
  • Posts: 143
    • http://www.kendahlin.com/
Re: WYMeditor (open source web-based editor)
« Reply #6 on: September 13, 2007, 07:54:25 AM »

Thank you so much. I often destroy my original efforts design a site that validates the moment I start posting in my blog. This editor is probably just what the doctor ordered.
Logged

patrice

  • Newbie
  • *
  • Karma: 8
  • Posts: 6
Re: WYMeditor (open source web-based editor)
« Reply #7 on: September 17, 2007, 02:50:16 PM »

Hello,
Please find attached to this post a ready-to-run archive file containing sNews 1.6 (default installation) and WYMeditor 0.4. Install sNews according to readme.html before to run it. WYMeditor has been integrated into sNews applying the hacks described above, no more (all the hacks have been enclosed between tags [WYMeditor Hack]). This is just to allow you to quickly test WYMeditor into sNews.
Have a nice day
Patrice
« Last Edit: September 17, 2007, 04:40:23 PM by patrice »
Logged
This message was sent from a PC laptop powered by GNU / Linux (distribution Ubuntu).

funlw65

  • Hero Member
  • *****
  • Karma: 96
  • Posts: 800
    • Country Lab
Re: WYMeditor (open source web-based editor)
« Reply #8 on: November 06, 2007, 02:38:27 AM »

Well, after heavily moded my sNews, back to origins again. Thank you Patrice, you reset my work  ;) .
Logged

alexxfender

  • Newbie
  • *
  • Karma: 0
  • Posts: 10
Re: WYMeditor (open source web-based editor)
« Reply #9 on: August 22, 2008, 06:34:07 PM »

Is this possible with Multi User version too?
Logged

Keyrocks

  • Doug
  • Administrator
  • ULTIMATE member
  • ******
  • Karma: 451
  • Posts: 6288
  • Semantically Challenged
    • snews.ca
Re: WYMeditor (open source web-based editor)
« Reply #10 on: August 23, 2008, 03:42:41 PM »

Is this possible with Multi User version too?

Yes it is.
In the first step of the author's instructions (in the first post of this topic) for the default sNews 1.6 snews.php file, you search for:
if ($_SESSION[db('website').'Logged_In'] == token()) {js();}. This string does a session check to see (I think) to see if the user is logged in. It is located at the end of function title() - which you will find by searching for // TITLE.

If you are using Bakercad's 1.6.3 MU package, all of the changes are pretty much the same, except the session checking string at the end of  function title() - is longer. It has another bit added into it that adds a second check...  to see if the user's identity is less than level 4.
   if ($_SESSION[db('website').'Logged_In'] == token() && get_identity($_SESSION['id'], 'level') < '4') {js();}

So... in Step One... you would replace it with (excluding the php tags):
Code: [Select]
<?php

if (
$_SESSION[db('website').'Logged_In'] == token() && get_identity($_SESSION['id'], 'level') < '4') {js();
echo
'<link rel="stylesheet" type="text/css" media="screen" href="wymeditor/skins/default/screen.css" />
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="wymeditor/jquery.wymeditor.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery(".wymeditor").wymeditor({
cssPath: "'
.db('website').'wymeditor/skins/default/screen.css",
jQueryPath: "'
.db('website').'jquery/jquery.js",
wymPath: "'
.db('website').'wymeditor/jquery.wymeditor.js"
});
});
</script>'
;
}

?>


Step 2 is essentially the same. Instead of looking for line numbers, just search for - case 'textarea': $output = and you will be at that mod location. Do as the first post instructions say.

Step 3 involves replacing the default editor button strings. Where the instructions say "comment from line 1312 to line 1322..." - search your snewsMU.php file for - echo html_input('button', 'strong', '', 'B', which is the first part of the first editor button string (makes BOLD text). Above it you will see - echo '<p>'; and we want to disable this whole editor buttons section by adding comment lines above and below it so that it looks like this:

Code: [Select]
<?php

/* ---------------------------------------------------------
echo '<p>';
echo html_input('button', 'strong', '', 'B', '', 'button', 'onclick="tag(\'strong\')"', '', '', '', '', '', '', '', '');
echo html_input('button', 'em', '', 'I', '', 'button', 'onclick="tag(\'em\')"', '', '', '', '', '', '', '', '');
echo html_input('button', 'strike', '', 'Strike', '', 'button', 'onclick="tag(\'strike\')"', '', '', '', '', '', '', '', '');
echo html_input('button', 'p', '', 'P', '', 'button', 'onclick="tag(\'p\')"', '', '', '', '', '', '', '', '');
echo html_input('button', 'br', '', 'BR', '', 'button', 'onclick="tag(\'br\')"', '', '', '', '', '', '', '', '');
echo html_input('button', 'break', '', 'Break', '', 'button', 'onclick="tag(\'break\')"', '', '', '', '', '', '', '', '');
echo html_input('button', 'img', '', 'Image', '', 'button', 'onclick="tag(\'img\')"', '', '', '', '', '', '', '', '');
echo html_input('button', 'link', '', 'Link', '', 'button', 'onclick="tag(\'link\')"', '', '', '', '', '', '', '', '');
echo html_input('button', 'include', '', 'Include', '', 'button', 'onclick="tag(\'include\')"', '', '', '', '', '', '', '', '');
echo '</p>';
// ---------------------------------------------------------*/

?>


Step 4 - Here we are replacing the default "PREVIEW panel string located about 5 strings down from where we just commented out the stuff in step 3 (above). This step is the same for both versions.

Step 5 - this step is also the same for both versions. Again, instead of looking for the line number, just search for the first string and replace it with the 2nd string... it is 11 strings up from the bottom of the same function - // ARTICLES FORM.
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

mrjiles

  • Newbie
  • *
  • Karma: 1
  • Posts: 9
Re: WYMeditor (open source web-based editor)
« Reply #11 on: November 17, 2008, 08:36:03 PM »

Just wanted to note that this works with 1.7 MU following above instructions.
Logged