TinyMCE in Submit Step 2: Small help needed

[nothingman]

I've added the following lines of code in submit_step2.php just after line 73 but TinyMCE editor just fails to show up in submit step 2, just wondering where I'm going wrong. :confused:

Line 73 of submit_step2.php


<?php if ($hotaru->post->useContent) { ?>

The code I have added:


<script language="javascript" type="text/javascript" src="<my tiny_mce js path>/tiny_mce.js"></script>
<!-- change src according to your needs -->

<script language="javascript" type="text/javascript">
tinyMCE.init({
theme : "advanced",
mode: "exact",
elements : "elm1",
theme_advanced_toolbar_location : "top",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,separator,"
+ "justifyleft,justifycenter,justifyright,justifyfull ,formatselect,"
+ "bullist,numlist,outdent,indent",
theme_advanced_buttons2 : "link,unlink,anchor,image,separator,"
+"undo,redo,cleanup,code,separator,sub,sup,charmap",
theme_advanced_buttons3 : "",
height:"350px",
width:"600px",
file_browser_callback : 'myFileBrowser'
});

function myFileBrowser (field_name, url, type, win) {
var fileBrowserWindow = new Array();
fileBrowserWindow['title'] = 'File Browser';
fileBrowserWindow['file'] = "my_cms_script.php" + "?type=" + type;
fileBrowserWindow['width'] = '420';
fileBrowserWindow['height'] = '400';
tinyMCE.openWindow(fileBrowserWindow, { window : win, resizable : 'yes', inline : 'yes' });
return false;
}
</script>

[Nick]

Excuse me if I'm stating the obvious, but did you change the src line at the top of the JavaScript?


<script language="javascript" type="text/javascript" src="<my tiny_mce js path>/tiny_mce.js"></script>
<!-- change src according to your needs -->

[nothingman]

<my tiny_mce js path>
Yep, put this thing path on purpose :)

[Nick]

Okay, I downloaded TinyMCE and got it working. The tricky part was making sure the file path was correct. I think this would be better as a plugin, but in the meantime...

1. Download (http://tinymce.moxiecode.com/download.php) and unzip tinymce_3_27.zip

2. Open tinymce_3_2_7/tinymce/jscripts/ and you should find a tiny_mce folder.

3. Move tiny_mce into /content/libs/extensions/ in Hotaru so you have this: /content/libs/extensions/tiny_mce

4. Open /content/plugins/submit/templates/submit_step2.php and copy it to /content/themes/YOUR_THEME/ so you have this: /content/themes/YOUR_THEME/submit_step2.php

5. Open that file and find:


<form name=6. Immediately before that line, paste this:


<script type="text/javascript" src="<?php echo BASEURL; ?>libs/extensions/tiny_mce/tiny_mce.js"></script>

<script type="text/javascript">
tinyMCE.init({
theme : "advanced",
mode : "textareas",
theme_advanced_buttons3_add : "fullpage"
});
</script>7. Save and test. You might need to do a hard refresh on the page.

That worked for me. You'll want to edit the JavaScript with the TinyMCE code you want to use, and you should also add the code to submit_edit_post.php, too.

Note: If it doesn't work, view the source of the page and find the line which includes the tiny_mce.js file. Check that link in your browser to see if it can find the file or not.

[nothingman]

Sorry for the delay in replying. Correct me if I'm wrong but in the following should /content/libs/extensions/ be /libs/extensions/ instead? I can't find any libs folder under /content/ *lost look*


3. Move tiny_mce into /content/libs/extensions/ in Hotaru so you have this: /content/libs/extensions/tiny_mce

[Nick]

should /content/libs/extensions/ be /libs/extensions/ instead?

Yes. Sorry about that.

[nothingman]

Thanks Nick, it worked.
But:-
- Using bold/italic HTML tags don't have any effect on the main post (yes, the HTML tags are enabled - i, b, em, strong etc). As an example, I've enabled the 'embed' and img HTML tags but the video/image won't show up in the main post.
- When I set the mode in TinyMCE to "exact", TinyMCE won't show up (just curious)

[Nick]

Hmm, I can see some of the problems:

Bold is represented by <strong>, but it doesn't show up because <strong> inherits its font-weight from nowhere in reset-fonts-grids.css (Yahoo's css file included in Hotaru's libs/extensions/YUI-CSS/ folder). I'm pretty weak at CSS so am not sure how you'd fix that. Maybe doing this in your theme's style.css file will help?


strong { font-weight: bold; }In my test, italics and underline aren't represented by <i> and <u>, but by <em> and <span style="text-decoration: underline">. I haven't checked, but <em> might need declaring in style.css like <strong> above, i.e.


em { font-style: italic; }I'm not sure about the <span> for underline. Maybe you can specify in TinyMCE which code is supposed to represent each button. You'd have to read through the TinyMCE manual for that.

Finally, I tried an IMG tag and it worked okay for me.

So to summarize, the solution seems to be:
1. Tell TinyMCE how to repesent each button, e.g. underline as <u>
2. Allow those HTML tags to be used in the Submit plugin
3. Specify the CSS for those tags in your stylesheet, or even better in submit.css, so that it doesn't default to Yahoo's reset CSS. Something like this maybe?


.show_post_content strong { font-weight: bold; }
.show_post_content em { font-style: italic; }One final note. If using summaries on list pages (e.g. "Top Stories" and "Latest"), all tags are stripped to prevent broken tags when the content is truncated. They are not stripped from post pages, though.

[nothingman]

Added the following snippets to style.css and bold/italics work fine. I'm still unable to embed Youtube/videos even after adding 'embed' in the list of allowable HTML tags.
EDIT: I'm using tinymce in my current swcms site and I've enabled <embed> and the videos show fine. I wonder where I'm going wrong. :confused:

strong { font-weight: bold; }
em { font-style: italic; }

[Nick]

Hotaru uses 3rd party htmLawed together with Inspekt to filter and sanitize HTML and any malicious code. The answer to your problem is probably this:

http://www.bioinformatics.org/phplabware/forum/viewtopic.php?id=91

If you'd like to experiment, this is what you'll need to play with:


class getHtmLawed extends AccessorAbstract {

/**
* a function to filter HTML
*
* @return string
*/
protected function inspekt($text)
{
$config = array('safe' => 1);

require_once(EXTENSIONS . 'htmLawed/htmLawed.php');

if (!get_magic_quotes_gpc()) {
return htmLawed($text, $config);
}
else
{
return htmLawed(stripslashes($text), $config);
}
return false;
}
}You can find that at the bottom of HotaruInspekt.php in the /libs folder.

[nothingman]

Hi Nick,

Thanks again. I opened a thread (http://www.bioinformatics.org/phplabware/forum/viewtopic.php?id=134) and based on the instructions on that thread, I changed the parameters(?) in the $config portion to the following. When I move on to submit step 3, the video still isn't embedded and when I the click the Edit button and go back to submit step 2, the video is completely 'stripped/removed' for the tinymce editor (with all the 'object' codes for the video removed from the editor) :-


$config = array('schemes'=>'classid:clsid; href: aim, feed, file, ftp, gopher, http, https, irc, mailto, news, nntp, sftp, ssh, telnet; style: nil; *:file, http, https');

Would this have something to do with this (http://www.bioinformatics.org/phplabware/forum/viewtopic.php?pid=340#p340)?

[Nick]

Okay, getting much closer now.

I've got YouTube videos working without TinyMCE, so that's the first step. I posted my code on your thread in the htmLawed forums (http://www.bioinformatics.org/phplabware/forum/viewtopic.php?pid=389#p389), but here it is again anyway:


$config = array(
'comments'=>0,
'cdata'=>0,
'deny_attribute'=>'on*',
'elements'=>'*-applet-iframe-script', // object, embed allowed
'schemes'=>'classid:clsid; href: aim, feed, file, ftp, gopher, http, https, irc, mailto, news, nntp, sftp, ssh, telnet; style: nil; *:file, http, https' // clsid allowed in class
);I won't make that a permanent change in Hotaru because I like using the "safe" option for security. Instead I'll add a plugin hook there so plugins can change the config values.

[Nick]

Woot! I got YouTube videos working with TinyMCE :D:


<script language="javascript" type="text/javascript" src="<?php echo BASEURL; ?>libs/extensions/tiny_mce/tiny_mce.js"></script>

<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "media",
theme_advanced_buttons1_add : "media"
});
</script>Edit: There are still some issues with TinyMCE. Clicking the video or HTML icons opens up the Hotaru front page for some reason. I got it working above just by pasting in the YouTube embed code by hand. Those buttons probably need other TinyMCE configuration options. If you find a successful combination of TinyMCE options, please share!

[nothingman]

Thanks again Nick, I got it working too! (Google and Break videos included). As a note, I had to enable the <object> HTML code in the admin panel.


Clicking the video or HTML icons opens up the Hotaru front page for some reason.
I haven't made any changes to the core tinymce files and this doesn't happen in my case. For example, when I click the media icon, the Insert / edit embedded media window opens up and not the the Hotaru front page. :confused:

Also, when I posted more than 2 videos in a story, the videos show-up above the main header and in the main story.

[Nick]

Also, when I posted more than 2 videos in a story, the videos show-up above the main header and in the main story.

This should solve that problem:

In /content/plugins/submit/submit.php, find the header_meta() function and replace it with this:


/**
* Match meta tag to a post's description (keywords is done in the Tags plugin)
*/
public function header_meta()
{
if ($this->hotaru->pageType == 'post') {
$meta_content = truncate(stripslashes(htmlentities($this->hotaru->post->content,ENT_QUOTES,'UTF-8')), 200);
echo '<meta name="description" content="' . $meta_content . '">' . "\n";
return true;
}
}That fix will be included in the next version of the plugin.

[nothingman]

This should solve that problem:
Problem solved! :)

[nothingman]

You can find that at the bottom of HotaruInspekt.php in the /libs folder.

Just so no one gets confused, in V 1.1.4, HotaruInspekt.php is now InspektExtras.php :)

[scaza]

I won't make that a permanent change in Hotaru because I like using the "safe" option for security. Instead I'll add a plugin hook there so plugins can change the config values.

Any ideas on how I might approach embedding video into descriptions while keeping it safe? i.e. using something like autoEmbed (http://forums.hotarucms.org/showthread.php?286-Video-Inc-0.3&highlight=autoembed) to generate the code to make sure it's not malicious but not allowing just any object embed tags to be posted.

[Nick]

Maybe you could do something like the Smilies plugin, which converts characters into smilies only when displayed. I mean, you might have a plain YouTube url in the description, but at the moment you render that description on the screen, you scan it for a YouTube url and convert it into embed code. Just a suggestion.