Add the editor to a page

#add#editor#frontend#page#shortcode

If you need to add the imgMCE editor to a page without a text editor you can use the following shortcode:

[imgmce_editor]

Without any parameters, this will open the imgMCE editor popup when the page loads. So to control the editor you have the following parameters to work with:

Parameterdefaultinfo
function_name If provided the code will get wrapped into a javascript function. This allows you to trigger the editor only when necessary.
image_id
If image id is provided the editor will open that specific image in edit mode. A user_id is required in this case.
user_id
User id is necessary to load user elements and save elements.
size_screen_message
A message that will show on the size selection screen.
editor_screen_message
A message that will show on the editor (stage) screen.
editor_callback
Function name of the javascript function that needs to be called when the save button gets clicked.
editor_callback_function
(optional) Here you can add the actual function code defined in editor_callback. (it's recommended to add the function to a separate file on your website)
new_image_button
trueShow the "New image" button in the editor menu.
my_images_button
trueShow the "My images" button in the editor menu.
image_uploads
trueAllow image uploads.
save_to_folder
trueAllow elements to be saved to the server.

Example

In the following example, we add the imgMCE editor to a page. It opens when we click the “open_editor” button. When the save button gets clicked the element gets added to the “result” container. We also disable image uploads and it’s not allowed to save elements to the server.

The shortcode we’ll use looks like this:

[imgmce_editor function_name="open_editor_function" image_uploads="0" new_image_button="1" my_images_button="0" save_to_folder="0" editor_callback= "editorTest_save" editor_callback_function="function editorTest_save(object, json, settings){ jQuery('#results').html(json.banner_template); }"]

Our page would need to have 2 elements. The button to open the editor and the container where the results get loaded.

<a onclick="open_editor_function()">OPEN imgMCE EDITOR</a>
<!-- the button to open the editor -->

<div id="results"></div>
<!-- the container to receive the result -->