1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

TinyMCE in Submit Step 2: Small help needed

Discussion in 'How-To and Troubleshooting' started by nothingman, Oct 18, 2009.

  1. nothingman

    nothingman Active Member

    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

    Code:
    <?php if ($hotaru->post->useContent) { ?>
    The code I have added:

    Code:
    <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>
     
  2. Nick

    Nick Well-Known Member

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

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

    nothingman Active Member

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

    Nick Well-Known Member

    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 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 [STRIKE]/content[/STRIKE]/libs/extensions/ in Hotaru so you have this: [STRIKE]/content[/STRIKE]/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:

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

    PHP:
        <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.
     
    Last edited: Oct 31, 2009
  5. nothingman

    nothingman Active Member

    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*

     
    Last edited: Oct 30, 2009
  6. Nick

    Nick Well-Known Member

    Yes. Sorry about that.
     
  7. nothingman

    nothingman Active Member

    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)
     
  8. Nick

    Nick Well-Known Member

    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?

    Code:
    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.

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

    Code:
    .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.
     
  9. nothingman

    nothingman Active Member

    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:
    Code:
    strong     { font-weight: bold; }
    em     { font-style: italic; }
     
    Last edited: Oct 31, 2009
  10. Nick

    Nick Well-Known Member

    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:

    PHP:
    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.
     
  11. nothingman

    nothingman Active Member

    Hi Nick,

    Thanks again. I opened a thread 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) :-

    Code:
    $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?
     
    Last edited: Nov 3, 2009
  12. Nick

    Nick Well-Known Member

    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, but here it is again anyway:

    Code:
            $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.
     
  13. Nick

    Nick Well-Known Member

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

    Code:
    <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!
     
    scaza and nothingman like this.
  14. nothingman

    nothingman Active Member

    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.

    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.
     
  15. Nick

    Nick Well-Known Member

    This should solve that problem:

    In /content/plugins/submit/submit.php, find the header_meta() function and replace it with this:
    PHP:
        /**
         * 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.
     
  16. nothingman

    nothingman Active Member

    Problem solved! :)
     
  17. nothingman

    nothingman Active Member

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

    scaza Member

    Any ideas on how I might approach embedding video into descriptions while keeping it safe? i.e. using something like autoEmbed to generate the code to make sure it's not malicious but not allowing just any object embed tags to be posted.
     
    Last edited: Dec 1, 2010
  19. Nick

    Nick Well-Known Member

    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.
     

Share This Page