The Support Forums will be in read-only mode for a scheduled maintenance window on 01 September 2016 14:00 UTC - 20:00 UTC. More information.

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

  1. dspilka
    Posted 5 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
    Posted 5 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?


  3. dspilka
    Posted 5 years ago #

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

  4. dspilka
    Posted 5 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
          .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
  5. dspilka
    Posted 5 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
    Plugin Author

    Posted 5 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
    Posted 5 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

  • Front-end Editor
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic