WYMeditor (open source web-based editor)

[patrice]

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

if ($_SESSION[db('website').'Logged_In'] == token()) {js();}

with
   

Code:

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:

case 'textarea': $output = '<p>'.$lbl.':<br /><textarea name="'.$name.'" rows="'.$rows.'" cols="'.$cols.'"'.$attribs.'>'.$value.'</textarea></p>'; break;

with

Code:

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:

/* echo '<p>';

to line 1322

Code:

echo '</p>';*/

Replace line 1327

Code:

echo html_input('fieldset', '', '', '', '', '', '', '', '', '', '', '', '', '', '<a title="'.l('customize').'" onclick="toggle(\'preview\')" style="cursor: pointer;">'.l('preview').'</a>');

with

Code:

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:

echo html_input('submit', $frm_task, $frm_task, $frm_submit, '', 'button', '', '', '', '', '', '', '', '', '');

with

Code:

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

[Keyrocks]

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. 

[piXelatedEmpire]

Welcome aboard patrice!  This looks very nice - what a terrific first post! Cheers!

[Patric Ahlqvist]

Karmalicious, indeed. that'll give "France Uh point", France one point. Welcome and enjoy, Patrice

[patrice]

Thanks for your welcome, sNews is not only a great CMS but also a nice team!

[Patric Ahlqvist]

Damn what a nice thing to say... another karma point

[Ken Dahlin]

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.

[patrice]

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

[funlw65]

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

[alexxfender]

Is this possible with Multi User version too?

[Keyrocks]

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:

<?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:

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

[mrjiles]

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