Support » Plugin: Front-end Editor » Adding/editing buttons

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • 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?

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

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

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

    Plugin Author scribu


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

    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.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Adding/editing buttons’ is closed to new replies.