Testing Pages – pre / post editus use
PRE EDITUS: //clickety-clack.click/editus-testing-inserted-shortcodes
POST EDITUS: //clickety-clack.click/after-editus-testing-inserted-shortcodes
https://aesopinteractive.github.io/lasso-documentation/
Fixing Editus for clickety-clack
add_filter( 'lasso_wrap_shortcode_exceptions', 'smp_shortcode_exceptions' );
function smp_shotcode_exceptions( $exception_arr ) {
array_push($exception_arr, "wpdreams_rpp id=2");
return $exception_arr;
}
add_filter( 'lasso_wrap_shortcode_exceptions', 'smp_shortcode_fwduvp_exceptions' );
function smp_shortcode_fwduvp_exceptions ( $exception_arr ) {
array_push($exception_arr, "fwduvp");
return $exception_arr;
}
add_filter( 'lasso_wrap_shortcode_exceptions', 'smp_shortcode_evp_embed_video_exceptions' );
function smp_shortcode_evp_embed_video_exceptions ( $exception_arr ) {
array_push($exception_arr, "evp_embed_video");
return $exception_arr;
}
add_filter( 'lasso_wrap_shortcode_exceptions', 'smp_shortcode_videojs_video_exceptions' );
function smp_shortcode_videojs_video_exceptions ( $exception_arr ) {
array_push($exception_arr, "videojs_video");
return $exception_arr;
}
add_filter( 'lasso_wrap_shortcode_exceptions', 'smp_shortcode_fvplayer_exceptions' );
function smp_shortcode_fvplayer_exceptions ( $exception_arr ) {
array_push($exception_arr, "fvplayer");
return $exception_arr;
}
add_filter( 'lasso_wrap_shortcode_exceptions', 'smp_shortcodetwo_exceptions' );
function smp_shotcodetwo_exceptions( $exception_arr ) {
array_push($exception_arr, "mla_gallery");
return $exception_arr;
}
add_filter( 'lasso_wrap_shortcode_exceptions', 'smp_shortcodethree_exceptions' );
function smp_shotcodethree_exceptions( $exception_arr ) {
array_push($exception_arr, "mla_tag_cloud");
return $exception_arr;
}
add_filter( 'lasso_wrap_shortcode_exceptions', 'smp_shortcodefour_exceptions' );
function smp_shotcodefour_exceptions( $exception_arr ) {
array_push($exception_arr, "mla_term_list");
return $exception_arr;
}
add_filter( 'lasso_wrap_shortcode_exceptions', 'smp_shortcodefive_exceptions' );
function smp_shotcodefive_exceptions( $exception_arr ) {
array_push($exception_arr, "gallery");
return $exception_arr;
}
add_filter( 'lasso_wrap_shortcode_exceptions', 'smp_code_exceptions' );
function smp_code_exceptions( $exception_arr ) {
array_push($exception_arr, "code");
return $exception_arr;
}
add_filter('lasso_dont_save', 'my_ignored_class', 10, 1 );
function my_ignored_class( $args ) {
return '.syntaxhighlighter, .InSiteCodeLayout';
}
https://edituswp.com/adding-a-save-content-filter/
Editus 0.9.16.1 allows you to add Javascript codes to filter the content being saved. Here is an example JQuery code. Beside filtering, you can technically do other operations you want here.
jQuery(document).ready(function($){
// the following lines insert filter1() function to the Editus filter list
if (lasso_editor.filterArray) {
lasso_editor.filterArray.push(filter1);
} else {
lasso_editor.filterArray = [filter1];
}
function filter1(html){
// replace all the occurences of dog with doll
html = html.replace('dog', 'doll');
return html;
}
});
Note that this code will still run even if you set “Disable Post Saving” option to on. So using this mechanism, you can replace the default save operation with whatever operation you may need to do.
Of course this Javascript code needs to be loaded. Here is sample PHP code to do so. Note you need to set CODE_LOCATION to the location of your Javascript file.
add_action('wp_enqueue_scripts', my_editus_save_filter);
function my_editus_save_filter(){
wp_enqueue_script('my_editus_save_filter', CODE_LOCATION."/my_editus_save_filter.js", array(), '1.0', true);
}
Here is another trick that could be useful. By default, Editus preserves shortcodes that are not part of Aesop Story Engine. So Editus will always recover the shortcodes after editing and saving operations. If you want to add your own processing for certain shortcodes, you can use the following filter (PHP code) to add to the list of shortcodes that will NOT be preserved by Editus. That way, you can write JS filter codes that will modify shortcodes before saving in the way you want.
add_filter( 'lasso_wrap_shortcode_exceptions', 'my_shortcode_exceptions' );
function my_shotcode_exceptions( $exception_arr ) {
array_push($exception_arr, "my_shortcode");
return $exception_arr;
}
Getting Things Setup
Whether you have network activated Editus on a multisite network, or simply have it activated on a single-site, the setup is still the same. At minimum, the editor requires the Article Class, or, the CSS class of the main container holding the post. Everything else is optional. Some of these options can be adjusted using filter functions. (Refer to the filters section.) This can be useful if you are running a multi-site and would like each site to have different themes.
- Article Class This is the only required field, and is the CSS class of the immediate container element holding the_content. In some themes, this is just .entry-content, but we can't assume this. You'll need to use Chrome Inspector to find the appropriate CSS class to use in your specific theme.
- Featured Image Class If your specific theme supports thumbnail images, or "Featured Post" images, and that image is set as a background-image, then supply the CSS class of the container that's holding the image. Editus will append an icon on that image that will allow users to open the media library and select a new image. After a user selects the image, it is saved automatically.
- Article Title Class Editus supports changing the title of the post (not to be confused with "the slug" in this case), by letting the user click into the title and type. When the user clicks elsewhere, the title is automatically saved. If you would like this feature, supply the CSS class of the post title.
- Ignored Items to Save Editus saves the HTML of a post entirely. Some themes are built a bit differently, which will have additional markup within the same post content container. Plugins are the same way, they'll just add in the same post container. This setting allows you to list the CSS class names of markup that should be ignored. This makes Editus compatable with 99.98% of all WordPress themes.
- Disable Post Saving By default Editus will save ALL HTML located within the_content to the current post id. This means that if you have a third party shortcode, it will save the HTML version of this and will udpate the database for that page or post. Please be aware of this when saving a post or page. Of course you can always use the WordPress revision system, and we'll be working to make this easier in the future, but in the time being, be aware that it saves ALL HTML. If you do not want this default behavior, then toggle this box. This means that you'll be using the provided actions to "hook in" and save the content to wherever it is that you want to save it. For example, you could have a version of the editor saving custom field data.
- Disable Post Settings In the initial Editor controls, the "gear" icon will open up the settings for the page or post. This allows you to change the status of the post, as well as the slug. If you do not want this to be shown, toggle this box.
- Disable Post Adding In the initial Editor controls, the "+" icon will open up a modal allowing you to add a new post. If you do not want this to be shown, then toggle this box.
- Disable Aesop Component Conversion Editus can save the content's HTML completely. By default, we'll convert Aesop Story Engine shortcodes into HTML and back. If you do not want this to happen, meaning, if you do not have Aesop Story Engine active, or you are not using it in your application, then toggle this box. This means that all HTML will be saved and no shortcodes will be converted.
Note: There is only one requirement of the theme utilizing Editus; the content area must have the_content filter applied via WordPress. For 99% of themes this is fine, but there are those odd balls that do exist.
Warning: Editus saves the HTML of a post object into the database. If Aesop Story Engine is activated it converts these shortcodes into HTML on the fly. The only drawback that you need to be aware of, is this; if your post has anything other than text or an Aesop Story Engine component, it will save the HTML of this into the post/page. There's a setting (outline below) that let's you specify the CSS class names of these items so that Editus will ignore them when it saves.
Out of the box we support Jetpack sharing.
Using the Editor
The Editor controls can be found at the bottom of any page or post on the front-end. To start editing, click the "pen" icon. Then, click anywhere in the text and start typing. Highlight a piece of text with your mouse, then choose any of the available formatting options such as Bold, Underline, Italicize, or Strikethrough. The post can be saved by clicking the blue "disk" icon in the bottom right hand corner.
Inserting HTML
HTML can be inserted by clicking the "< >" icon. When you click away, the editor will remember where your cursor last left off, and will insert the HTML in the exact area. Note: HTML can't be edited from the front-end once inserted. You'll need to access your "text" tab within the backend post edit screen in WordPress.
Creating Links
Links can be created by first highlighting the text, then selecting the link icon in the toolbar. Type in the URL, then click the check button save. To edit an existing link, double click a link while in edit mode, and the link will be supplied in the permalink drop-up area. Change the link, then select the check button save, and the link will be udpated.
Adding Categories & Tags
Categories can be added from a single post settings modal. Open the settings modal, then start typing in the category input area to select an existing category to add to the post. If the category isn't present, after typing press space or enter to add a new category. Post tags are added in the same manner.
Setting a Featured Image
If your current WordPress theme supports post-thumbnails, then you will be able to set the featured image for the post. To do so, open the settings modal, then click the "edit" icon over the image to select and insert an image. Click the "close" icon to delete the featured image. This is saved automatically and provides an indicator to show it's saving status.
Accessing Posts and Pages
All of your posts can be accessed by clicking the "list" icon in the Editus toolbar. Upon clicking this button a modal will pop up showing your posts and pages. Clicking the "load more" button will load the next set of posts or pages. Custom post types are supported with a filter.
This feature requires the WP REST API plugin, which will soon be part of WordPress. After activating Editus you'll be asked to confirm, and will direct you to install this plugin.
Adding Posts
Adding a new post can be done at anytime with the add new post button in the Editus toolbar. This is present, along with the list all posts button, on all pages of your site when you are logged in (only displayed to those with the correct permissions).
Working with Components
Story components can be accessed by clicking the "+" after entering the editor. From here, you can drag an icon onto the story. After the component has been added, you can move it around the story as you see fit. The text in the story cannot be moved. Only components.
Within each component you'll find a settings bar with four icons. These icons will let you move the component, enter that components settings, clone that component, or delete that component.
Creating Galleries
First add the gallery component by dragging it from the component tray into a post. Select the gear icon, then select a gallery to load. If you have not created any galleries previously, then there will be a button to create a new gallery. For the time being, this area does require a page refresh but we hope to eliminate this in future updates.
Note: This feature is only available if Aesop Story Engine is installed.
NEED GIF HERE
Adding Maps
Add a map component by dragging it from the component tray into a post. There is only one map allowed per post at this time. After adding, click anywhere on the map to add a map marker. Then, click the marker to add a location tooltip text. You can drag the markers around, as well as zoom out and adjust the pan. After things are setup the way you like, click "save locations." Then, save the post.
For the time being, to edit existing locations, delete the map component, and add it back again. The locations will not be removed, but for now this is the only way to invoke editing map locations. We hope to eliminate this on future updates.
Note: This feature is only available if Aesop Story Engine is installed.
NEED GIF HERE
Filters
Editus Activation
This filter can be used to control when Editus is activated. The filter function takes three parameters: ($result, $action, $postid)
$result is a true/false value returned by the default lasso_user_can() function.
$action can be one of the following values: 'delete_post','publish_posts','edit_posts','delete_others_posts'
lasso_user_can_filter
A sample filter code and registration:
// only activate if the post type is 'post'
function editus_user_can( $result, $action, $postid ) {
if (!$result ) {
return false;
} else {
$post_type = get_post_type();
if (empty($post_type)) { // this is necessary for save operation
return $result;
}
if ($post_type == 'post') {
return true;
}
return false;
}
}
add_filter( 'lasso_user_can_filter', 'editus_user_can', 10, 3 );
Allowed Post Types
This filter can be used to add or remove post types allowed for Editus. If you have custom post types you should use this filter to add custom post types.
lasso_allowed_post_types
An example usage:
// this function limits Editus to 'post' instead of allowing 'page' types
function my_post_types($arr)
{
return array( 'post');
}
add_filter( 'lasso_allowed_post_types', 'my_post_types' );
Pre-flight notices
Filter the notices shown to the user on activation
lasso_preflight_notices
Article Class
Provide the CSS class (including the preceding dot) of container that holds the post. This should be the first parent container class that holds the_content. The plugin options settings from the Dashboard will take precendence over this filter. Therefore, to use this filter keep the Article Class option in the Dashboard empty.
lasso_content_class
An example usage:
add_filter('lasso_content_class', 'my_content_class', 10, 1 );
function my_content_class( $args ) {
return '.mycontent-class';
}
Title Class
Provide the CSS class for the post title. This will enable you to update the title of the post by clicking and typing. The plugin options settings from the Dashboard will take precendence over this filter. Therefore, to use this filter keep the Title Class option in the Dashboard empty.
lasso_title_class
An example usage:
add_filter('lasso_title_class', 'my_title_class', 10, 1 );
function my_title_class( $args ) {
return '.mytitle-class';
}
Featured Image Class
Provide the CSS class for the post title. This will enable you to update the title of the post by clicking and typing. This will enable you to update the title of the post by clicking and typing. The plugin options settings from the Dashboard will take precendence over this filter. Therefore, to use this filter keep the Featured Image Class option in the Dashboard empty.
lasso_featured_image_class
An example usage:
add_filter('lasso_featured_image_class', 'my_featured_image_class', 10, 1 );
function my_featured_image_class( $args ) {
return '.myimage-class';
}
Ignored Items to Save
If your post container holds additional markup, list the css class names (comma separated, including the dot) of those items. When you enter the editor, Editus will remove (NOT delete) these items so that it does not save them as HTML.
lasso_dont_save
An example usage:
add_filter('lasso_dont_save', 'my_ignored_class', 10, 1 );
function my_ignored_class( $args ) {
return '.myignored-class1, .myignored-class2';
}
Localized objects
Filter the array of objects being localized with js
add_filter('lasso_localized_objects', 'my_localized_objects', 10, 1 );
function my_localized_objects( $args ) {
// your new args
$my_args = array(
'foo' => 'bar'
);
// return and merge with the existing args
return array_merge( $args, $my_args );
}
Saving a gallery
Filter the array of arguments for saving a post gallery.
add_filter('lasso_insert_gallery_args', 'my_gallery_args', 10, 1 );
function my_gallery_args( $args ) {
// your new args
$my_args = array(
'foo' => 'bar'
);
// return and merge with the existing args
return array_merge( $args, $my_args );
}
Inserting a post
Filter the array of arguments for inserting a new post.
add_filter('lasso_insert_object_args', 'my_object_args', 10, 1 );
function my_object_args( $args ) {
// your new args
$my_args = array(
'foo' => 'bar'
);
// return and merge with the existing args
return array_merge( $args, $my_args );
}
Updating a post
Filter the array of arguments for updating the status of a post object. I.e, draft to publish, etc.
add_filter('lasso_object_status_update_args', 'my_update_args', 10, 1 );
function my_update_args( $args ) {
// your new args
$my_args = array(
'foo' => 'bar'
);
// return and merge with the existing args
return array_merge( $args, $my_args );
}
Saving a post
Filter the array of arguments for saving an existing post object.
add_filter('lasso_object_save_args', 'my_object_save_args', 10, 1 );
function my_object_save_args( $args ) {
// your new args
$my_args = array(
'foo' => 'bar'
);
// return and merge with the existing args
return array_merge( $args, $my_args );
}
Publishing a post
Filter the array of arguments for publishing a new post object.
add_filter('lasso_object_publish_args', 'my_object_publish_args', 10, 1 );
function my_object_publish_args( $args ) {
// your new args
$my_args = array(
'foo' => 'bar'
);
// return and merge with the existing args
return array_merge( $args, $my_args );
}
Updating post title
Filter the array of arguments for updating a post object title.
add_filter('lasso_title_updated_args', 'my_title_updated_args', 10, 1 );
function my_title_updated_args( $args ) {
// your new args
$my_args = array(
'foo' => 'bar'
);
// return and merge with the existing args
return array_merge( $args, $my_args );
}
Available components
Filter the list of components available to the editor. Here are some examples.
add_filter('lasso_components', 'my_components');
function my_components() {
// return your own options or merge with array_merge
$components = array(
'foo' => array(
'name' => 'Name of Component',
'content' => callback()
),
'bar' => array(
'name' => 'Another Component',
'content' => callback();
)
);
return $components;
}
Add CSS class to control bar
Add a CSS class to the control bar.
add_filter('lasso_control_classes', 'my_control_classes');
function my_control_classes() {
// return your class
return 'my-class';
}
Add CSS class to sidebar
Add a CSS class to the settings sidebar.
add_filter('lasso_sidebar_classes', 'my_sidebar_classes');
function my_sidebar_classes() {
// return your class
return 'my-class';
}
Add CSS class to toolbar
Add a CSS class to the text toolbar.
add_filter('lasso_toolbar_classes', 'my_toolbar_classes');
function my_toolbar_classes() {
// return your class
return 'my-class';
}
Add CSS class to toolbar
Add a CSS class to the component settings toolbar.
add_filter('lasso_component_classes', 'my_component_classes');
function my_component_classes() {
// return your class
return 'my-class';
}
Add CSS class to settings modal
Add a CSS class to the post settings modal.
add_filter('lasso_modal_settings_classes', 'my_modal_settings_classes');
function my_modal_settings_classes() {
// return your class
return 'my-class';
}
Add CSS class to new post modal
Add a CSS class to the post settings modal.
add_filter('lasso_modal_post_classes', 'my_modal_post_classes');
function my_modal_post_classes() {
// return your class
return 'my-class';
}
Add CSS class to WordPress image wrapper
Add a CSS class to the wrapper used to edit WordPress inserted images.
add_filter('lasso_wpimg_classes', 'my_wpimg_classes');
function my_wpimg_classes() {
// return your class
return 'my-class';
}
Custom Options Array
Add an array of custom options that represent all custom components.
add_filter('lasso_custom_options', 'my_custom_options');
function my_custom_options(){
$settings = array(
'docs-image' => array(
'name' => 'Image',
'type' => 'single',
'atts' => array(
'src' => array(
'type' => 'media_upload',
'default' => '',
'desc' => 'Image URL',
'tip' => 'URL of IMage'
)
),
'desc' => 'Creates an image'
),
'docs-sketchfab' => array(
'name' => 'Sketchfab',
'type' => 'single',
'atts' => array(
'model' => array(
'type' => 'text',
'default' => '',
'desc' => 'Sketchfab Model ID',
'tip' => 'ID of the Sketcfab Model'
)
),
'desc' => 'Creates an Sketchfab image'
),
'docs-video' => array(
'name' => 'Video',
'type' => 'single',
'atts' => array(
'id' => array(
'type' => 'text',
'default' => '',
'desc' => 'YouTube Video ID',
'tip' => 'URL of Video'
)
),
'desc' => 'Creates an embeddable video'
)
);
return $settings;
}
Tour slides
Filter the slides available in the welcome tour
lasso_tour_slides
Automatically ignored items
Filter the list of automatically ignored items. These items are different than are what is saved in settings–>ignore classes.
lasso_dont_save
Added 0.9.4
Settings Tabs
With 0.9.4 a new Settings API has been introduced, that allows other plugins to easily create additional settings within the settings modal. This filter is different than the lasso_post_settings filter above. That filter adds your data as a serialized array into the Editus post settings field. This new API creates a dedicated tab, with a dedicated callback, allowing you to create integrations with other plugins like ACF, CMB, Ninja Forms, Gravity Forms, and more.
add_filter('lasso_modal_tabs','try_tabs',10,1);
function try_tabs( $tabs ){
$tabs[] = array(
'name' => 'Tab',
'callback' => 'mytestcallback'
);
return $tabs;
}
function mytestcallback(){
ob_start();
$out = 'My Content';
return $out;
}
Post Types Support
With 0.9.4 posts and pages are accessible from the front end. You can easily opt other post types in so that they will be listed here as well, with all appropriate callbacks taken care of.
add_filter( 'lasso_post_types', $array_of_post_types );
Actions
Featured image set
Fired when the featured image is set.
do_action( 'lasso_featured_image_set', $postid, $image_id, $userid );
New post created
Fired when a new post is created.
do_action( 'lasso_new_object', $postid, $object, $title, $userid );
Existing post updated
This is fired when an existing post is updated.
do_action( 'lasso_post_updated', $postid, $slug, $status, $userid );
Existing post saved
Fired when an existing post is saved. Hook into this to override where the content from the editor is saved. For example, you could use Editus on a custom field and save this to post meta.
add_action('lasso_post_saved', 'my_new_save', 10, 3 );
function my_new_save( $postid, $content, $userid ) {
update_post_meta( $postid,'some_key', $content );
}
New gallery created
Fired when a new gallery is created.
do_action( 'lasso_gallery_published', $postid, $gallery_ids, $userid );
Existing gallery saved
Fired when an existing gallery is saved.
do_action( 'lasso_gallery_saved', $postid, $gallery_ids, $userid );
Post transitioned from draft to publish
Fired when a post is published from draft.
do_action( 'lasso_post_published', $postid, $content, $userid ;
Title updated
Fired when the title is updated.
do_action( 'lasso_title_updated', $postid, $title, $userid );
Tour hidden
Fired when the user decides to not have the Welcome Tour shown anymore
do_action( 'lasso_tour_hidden', $postid );
Before editor controls
Fired before the start of the controls allowing you to place custom component icons in the tray.
do_action( 'lasso_editor_controls_before' );
After editor controls
Fired after the controls allowing you to place custom component icons in the tray.
do_action( 'lasso_editor_controls_after' );
Before components
Fired at the end of the list of components in the drop-up menu.
lasso_toolbar_components_before
After components
Fired at the end of the list of components in the drop-up menu.
lasso_toolbar_components_after
Custom components
Fired at the end of the list of components in the drop-up menu.
lasso_toolbar_components
Add fields in post settings modal form
Fired at the end of the post settings form in the post settings modal.
lasso_modal_post_form
Add hidden fields in post settings modal form
Fired at the end of the post settings form in the post settings modal footer typically used for inserting hidden form fields.
lasso_modal_post_form_footer
Pluggable Functions
Determines who can use the editor and when the editor is activated. By default this function returns (is_user_logged_in() and current_user_can('edit_post')). As of the ver 0.9.9.7, it is recommned to use the filter 'lasso_user_can_filter' instead of overriding this function, if the default behavior needs to be changed.
lasso_user_can
Defines
Adding this define will remove the License panel, and links to Editus website and documentation. It essentially white-labeles the plugin so there's no confusion for the agency.
define('LASSO_AGENCY_MODE',true);
Ignore Class
Because Editus saves the HTML of a post, there are some cases where your theme may have additional markup within it. To avoid saving this as HTML, put the class .lasso–ignore on any element within the post container.
.lasso--ignore
Sample Addon
Hit the link below for a sample plugin that demonstrates how to add a custom component in two different ways; one using a shortcode, and one using the markup of your choice. Component options are added as data-attributes and are only shown if the user is logged in, and if that user has the correct capabilities. The settings in the settings panel are then "mapped" to the data-attributes on the fly. This is how you're able to use a component that's in shortcode form, or just normal markup. Skies the limit!
https://github.com/AesopInteractive/sample-addon
All component functions inside public/includes/components.php are pluggable