WordPress.org

Ready to get started?Download WordPress

Forums

Front-end Editor
Adding/editing buttons (7 posts)

  1. dspilka
    Member
    Posted 3 years ago #

    I see there are options for which buttons the WYSIWYG editor, but are there ways to add others (not listed in the "all" option)? Specifically I would be looking to add a "code" button, for developers who are showing code snippets. Is there a way to do this easily?

  2. dspilka
    Member
    Posted 3 years ago #

    So it appears CLEditor is what Front-End Editor uses. So I've been looking at CLEditor documentation on how to add buttons. I've found some examples, but not sure how to best implement it with Front-End Editor so that I don't have to edit any code and can update/upgrade the plugin easily. Any recommendations on how to do this the right way?

    http://wordpress.org/extend/plugins/front-end-editor/

  3. dspilka
    Member
    Posted 3 years ago #

    Ah, I just found the front_end_editor_loaded hook...gonna look into using that...

  4. dspilka
    Member
    Posted 3 years ago #

    Ok, so the way to do this...I think...

    1) Create your own plugin with a php file and a js file.
    2) Hook into the front_end_editor_loaded action in your php file like:

    function add_code_button() {
    	echo "<script type='text/javascript' src='".plugins_url('/code_button.js', __FILE__)."'></script>";
    }
    
    add_action('front_end_editor_loaded', 'add_code_button');

    3) Add js to register a button to CLEditor (got this from: here):

    (function($) {
      $.cleditor.buttons.pastecode = {
        name: "pastecode",
        image: "**** PUT YOUR IMAGE FOR THE BUTTON HERE! ****",
        title: "Code",
        command: "inserthtml",
        popupName: "pastecode",
        popupClass: "cleditorPrompt",
        popupContent: "Paste the code:<br /><textarea cols='40' rows='3'></textarea><br /><input type='button' value='Ok' />",
        buttonClick: pastecodeClick
      };
    
      // Handle the hello button click event
      function pastecodeClick(e, data) {
        // Wire up the submit button click event
        $(data.popup).children(":button")
          .unbind("click")
          .bind("click", function(e) {
    
            // Get the editor
            var editor = data.editor;
    
            // Get the entered name
            var codeblock = $(data.popup).find("textarea").val();
            var html = '<pre>' + codeblock + '</pre>';
    
            // Insert some html into the document
            editor.execCommand(data.command, html, null, data.button);
    
            // Hide the popup and set focus back to the editor
            editor.hidePopups();
            editor.focus();
          });
      }
    })(jQuery);
  5. dspilka
    Member
    Posted 3 years ago #

    I'm having an issue trying to figure out where my custom image for the button should go on the file system...any help?

  6. scribu
    Member
    Plugin Author

    Posted 3 years ago #

    I think you're supposed to put in front-end-editor/js/cleditor/images/ and just pass it's name to 'image:'

  7. dspilka
    Member
    Posted 3 years ago #

    Thanks for the response, scribu. Yea, I thought that would have worked too, but for some reason that's not working for me. I've also tried using a url and a file path to no success yet.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic