WordPress.org

Ready to get started?Download WordPress

Forums

SyntaxHighlighter CKEditor Button
Inserting code button on the comment area. (19 posts)

  1. msrosyidi
    Member
    Posted 1 year ago #

    Excuse me.
    Just a question:
    How about adding a code button in the comment area.
    I'm sorry and thanks.

    http://wordpress.org/extend/plugins/syntaxhighlighter-ckeditor-button/

  2. solagirl
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    Thank you for the question. Auto syntaxhighlighter plugin doesn't check the content of comments, so even the button is added, there could be no syntaxhighlighter effect.

    Switch to another syntaxhighlighter plugin might do, I will try to work it out. Please be patient with me.

    Best regards,
    Sola

  3. solagirl
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,
    CKEditor For WordPress plugin provide no easy way to load external plugins in the comment area, so I'm not sure if it is a good idea to add the code button at default.

    Here is a quick method if you need the code button in the comment area.

    Copy and paste the code below into your theme's functions.php

    add_action('wp_footer', 'custom_comment_editor_button',100);
    function custom_comment_editor_button(){
        if( !is_admin() && (is_page() || is_single()) && comments_open() ){
            $options = get_option('ckeditor_wordpress');
            if( $options['appearance']['comment_editor'] == 't'){
        ?>
              <script type="text/javascript">
                  CKEDITOR.config.extraPlugins += ( CKEDITOR.config.extraPlugins ? ',syntaxhighlight' : 'syntaxhighlight' );
                  CKEDITOR.plugins.addExternal('syntaxhighlight', '<?php echo WP_PLUGIN_URL; ?>/syntaxhighlighter-ckeditor-button/syntaxhighlight/');
                  CKEDITOR.replace( 'comment', {
                        toolbar: [
                            { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Strike', '-', 'RemoveFormat' ] },
                            { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'Blockquote', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight'] },
                            { name: 'links', items: [ 'Link', 'Unlink' ] },
                            { name: 'insert', items: [ 'Image', 'SpecialChar','Code' ] }
                        ],
                        height:'160px',//The height of the comment editor
                        uiColor:'#ffffff' //The ui color of the comment editor
                });
              </script>
        <?php
            }
        }
    }

    I have to redefine the toolbar button in order to insert the code button. You can change the editor's height and toolbar color by setting 'height' and 'uiColor' in the code. And if you use the code above, you will define 'comment toolbar' and 'editor height for comment' here instead of CKEditor->Basic Settings.

    Now you should have the code button in the comment area, however, if you also want the syntaxhighlighter effect, Auto Syntaxhighlighter couldn't do the job.

    You might consider removing that plugin and install WP SyntaxHighlighter or SyntaxHighlighter Evolved.

    For WP SyntaxHighlighter, choose when to load the brushes at settings->WP SyntaxhigHlighter

    For SyntaxHighlighter Evolved, go to settings->SyntaxHighlighter and select "Load All Brushes".

    I do not recommended to do this as brush files will be loaded even though they might be useless for the current page. You can just style the pre tag in your style.css to give it a nice look and most of the themes have already done the job.

    I'm sorry for all the trouble, I'm not sure it is best to merge the code into my plugin as it breaks CKEditor For WordPress plugin's function.

  4. msrosyidi
    Member
    Posted 1 year ago #

    I used this http://wordpress.org/extend/plugins/wp-syntaxhighlighter/. This plugin give a text link to insert the code above the comment area. But when I install CKEditor the text link don't work in the comment area. The code itselt is work by typing manually.
    I'm so glad if your plugin also give the button to do that.

    I'm sorry and thanks.

  5. solagirl
    Member
    Plugin Author

    Posted 1 year ago #

    Hi, If you use the code I gave you, you can get the Code button, it works exactly the same as in the back end. For WP SyntaxHighlighter, Select Higlight your code in comments, then remove the text link.

    I'm sorry if you'd prefer a plugin, it needs more thinking before implementing it, as CKEditor For WordPress plugin is the real boss.

  6. solagirl
    Member
    Plugin Author

    Posted 1 year ago #

    Hi, I create a demo of ckeditor with code button in comment area here, check it out if you are interested.

  7. msrosyidi
    Member
    Posted 1 year ago #

    Many thanks for your answer.
    When I try using http://wordpress.org/extend/plugins/syntaxhighlighter/ and your code above works only for login user.

    When I try using http://wordpress.org/extend/plugins/wp-syntaxhighlighter/, your code above works only for all user (there is a setting to enable special filtering in this plugin setting), but all code is converted into hmtl entites (> become >).

    Why?

  8. solagirl
    Member
    Plugin Author

    Posted 1 year ago #

    Thanks for finding the problem.
    I missed one important factor that WordPress does not allow pre tag in comment, to fix this, put the code below into functions.php

    add_filter('preprocess_comment','allow_tags_in_comments');
    function allow_tags_in_comments($data) {
    	global $allowedtags;
    	$allowedtags['pre'] = array('class'=>true);
    	return $data;
    }

    I have updated my demo, you can try again.

    My solution is http://wordpress.org/extend/plugins/syntaxhighlighter/
    The button should also work for unregistered users.

  9. msrosyidi
    Member
    Posted 1 year ago #

    Many Thanks.
    Using http://wordpress.org/extend/plugins/syntaxhighlighter/ your code work as I need perfectly.

    But using http://wordpress.org/extend/plugins/wp-syntaxhighlighter/ still doesn't work (all code is converted into hmtl entites) as before.

    So maybe it's better for me to to use http://wordpress.org/extend/plugins/syntaxhighlighter/.

    I'm sorry and again many thanks for your kindness to help me.
    my best regards for You.

  10. msrosyidi
    Member
    Posted 1 year ago #

    Oh, one problem again I find it just now.

    I try in the demo page, when I click "Reply" (I want to try writing code under your example), the code button disappears. I click afterward "Cancel reply" the button still disappears. When I refresh the browser the button appears again.

    I'm sorry and again many thanks for your kindness to help me.

  11. solagirl
    Member
    Plugin Author

    Posted 1 year ago #

    Hi there,

    I have no success with wp syntaxhighlighter plugin as well, so just leave it.

    For the last problem you mentioned, ckeditor plugin destroyed the editor instance and then reinitialized it when reply link is clicked. This makes my method stop working unless threaded comment is disabled which in my mind is not what you desire. So the only way I found is to modify CKEditor plugin's config file, CKEditor plugin doesn't provide a way to use user custom config file, this is what makes simple things complicated.

    I have detailed the method on my demo page and also updated my demo, please take a look.

  12. solagirl
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    I'm sorry but I've never heard of Mollom, let alone use it. From what you described, I think the plugin might have filtered comment content which we can't control. Are you using its WordPress Plugin (http://wordpress.org/extend/plugins/wp-mollom/) BTW? I can see it is an out-of-date plugin, the newest version is on github. I always use Akismet alone to fight spam comments. If you truly need that plugin, the best way is to get help from its author, ask how the plugin filtered the comment content.

  13. msrosyidi
    Member
    Posted 1 year ago #

    Oh, what can I say. Many-many thanks for your efforts to help me.

    I have tried those step by step guidance on your demo page.
    I also have tried to activate three antispam plugin to check the compatibility between them and your solution, Akismet, AntiSpamBee and Mollom.
    Only using the last plugin some code is lost.

    But I actually do not use the last plugin in my live blog, that is only in my local experimental blog. So I think the problem with the last antispam plugin can be ignored.

    I'm sorry and my best thanks for your kindness to help me finding what I need. It really really helps me after 1 years and more I looked for this solution.

    Best Regards for You.

  14. solagirl
    Member
    Plugin Author

    Posted 1 year ago #

    I'm just glad the problem is solved, I learned a lot from helping you, thank you.

  15. msrosyidi
    Member
    Posted 1 year ago #

    About Mollom, I'm sorry, I activate it in my local computer only because of my habit to try manything before actually work on my live blog.
    I'm sorry and many thanks.

  16. solagirl
    Member
    Plugin Author

    Posted 1 year ago #

    Hey, never mind. That's a good habit to help getting the best choice. If you have any interesting problem to solve, don't forget to leave a message on my blog.

  17. msrosyidi
    Member
    Posted 1 year ago #

    I have visited your blog just now. But there is a problem. I've written it in my comment in your demo page.
    I'm sorry and many thanks.

  18. solagirl
    Member
    Plugin Author

    Posted 1 year ago #

    Hi, I'm a Chinese girl so I write in Chinese. Never mind, if you need any help I can always communicate with you in English. Thanks for dropping by.
    I will send you my email address so you can reach me by email without the barrier of language.

  19. msrosyidi
    Member
    Posted 1 year ago #

    Thanks.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic