-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
executable file
·760 lines (632 loc) · 37.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
<!doctype html>
<!--[if IE 6 ]><html lang="en-us" class="ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en-us" class="ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en-us" class="ie8"> <![endif]-->
<!--[if (gt IE 7)|!(IE)]><!-->
<html lang="en-us"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Editus - Plugin Documentation</title>
<meta name="description" content="">
<meta name="author" content="Aesopinteractive LLC">
<meta name="copyright" content="Aesopinteractive LLC">
<meta name="date" content="2015-01-21T00:00:00+01:00">
<link rel="stylesheet" href="assets/css/documenter_style.css" media="all">
<style>
html{background-color:#FFFFFF;color:#383838;}
::-moz-selection{background:#444444;color:#DDDDDD;}
::selection{background:#444444;color:#DDDDDD;}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#documenter_sidebar #documenter_logo{background-image:url();}
a{color:#007aab;}
.btn {
border-radius:3px;
}
.btn-primary {
background-image: -moz-linear-gradient(top, #0088CC, #0044CC);
background-image: -ms-linear-gradient(top, #0088CC, #0044CC);
background-image: -webkit-gradient(linear, 0 0, 0 0088CC%, from(#DDDDDD), to(#0044CC));
background-image: -webkit-linear-gradient(top, #0088CC, #0044CC);
background-image: -o-linear-gradient(top, #0088CC, #0044CC);
background-image: linear-gradient(top, #0088CC, #0044CC);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088CC', endColorstr='#0044CC', GradientType=0);
border-color: #0044CC #0044CC #bfbfbf;
color:#FFFFFF;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
border-color: #0088CC #0088CC #bfbfbf;
background-color: #0044CC;
}
hr{border-top:1px solid #EBEBEB;border-bottom:1px solid #FFFFFF;}
#documenter_sidebar {
background:#F8F8F8 url('assets/img/bg.jpg') no-repeat top center;
background-size:cover;
color:white;
}
#documenter_sidebar:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,122,171,.6);
}
#documenter_sidebar ul a{
text-shadow:1px 1px 0px rgba(0,0,0,0.2);
border-top:1px solid rgba(255,255,255,0.2);
border-bottom:none;
color:white;
}
#documenter_sidebar ul a:hover{
background:rgba(255,255,255,0.4);
text-shadow:1px 1px 0px rgba(0,0,0,0.2);
}
#documenter_sidebar img {
margin:15px;
max-width:120px;
}
#documenter_sidebar ul a.current{background:rgba(255,255,255,0.4);text-shadow:1px 1px 0px rgba(0,0,0,0.2);}
#documenter_copyright{display:block !important;visibility:visible !important;}
.img {
width:100%;
max-width:600px;
margin:20px auto 35px;
height:auto;
border:1px solid #ddd;
padding:6px;
background:white;
box-shadow:1px 1px 6px -2px rgba(0,0,0,0.2);
border-radius:2px;
}
section {
clear:left;
}
#documenter_content ul {
list-style-position:inside;
padding:0;
margin:0;
}
#documenter_content ul li {
margin-bottom:8px;
}
.warning span,
.info span {
font-weight: bold;
}
</style>
</head>
<body class="documenter-project-itemname">
<div id="documenter_sidebar">
<a class="current" href="#documenter_cover"><img src="assets/img/logo.png"></a>
<ul id="documenter_nav">
<li><a class="current" href="#documenter_cover">Start</a></li>
<li><a href="#installation" title="Installation">Installation</a></li>
<li><a href="#setup" title="Setup">Setup</a></li>
<li><a href="#editing" title="Editing">Editing</a></li>
<li><a href="#components" title="Components">Components</a></li>
<li><a href="#filters" title="Filters">Filters</a></li>
<li><a href="#actions" title="Actions">Actions</a></li>
<li><a href="#sample-addon" title="Sample Addon">Sample Addon</a></li>
</ul>
</div>
<div id="documenter_content">
<section id="documenter_cover">
<h2>Plugin Documentation</h2>
<hr>
<ul>
<li><strong>Current Version:</strong> 0.9.9.7</li>
<li><strong>Docs Last Updated:</strong> 04/03/2016</li>
<li><strong>Email:</strong> <a href="mailto:editus@aesopinteractive.com">editus@aesopinteractive.com</a></li>
<li><strong>Bug Reports:</strong> <a href="https://github.com/AesopInteractive/lasso">https://github.com/AesopInteractive/lasso</a></li>
<li><strong>Documentation Bugs:</strong> <a href="https://github.com/AesopInteractive/lasso-documentation">https://github.com/AesopInteractive/lasso-documentation</a></li>
</ul>
<p>Editus is a front-end editor plugin for WordPress allows you to create, edit, and publish content on the front-end, and was originally designed to work closely with Aesop Story Engine, the free WordPress plugin for storytelling. This is the very same editor found on <a href="https://story.am">Story.AM</a>. Out-of-the-box it works on any post type whether it be posts, pages, or custom post types. It also features built-in support for editing standard images inserted via the WordPress post editor, as well as front-end support for changing the title and featured image.</p>
<p>If you're utilizing Aesop Story Engine, the components can be moved freely around the post, and most component settings are adjusted in real-time. This includes gallery creation and editing, all done on the front-end.</p>
<p>The editor is a "toolbox overlay," so what you're seeing is 100% what you're getting, since you're editing the actual post content, and not just a preview of it.</p>
<p>Aesop Story Engine does not have to be active. In fact using the built-in filters and actions you can build an entirely new front-end editor specific to any use case.</p>
<p class="warning"><span>Warning:</span> 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. <br /><br /> Out of the box we support Jetpack sharing.</p>
</section>
<section id="installation">
<div class="page-header"><h3>Installing Editus</h3><hr class="notop"></div>
<p>Two ways to install. Pick your poison. Aesop Story Engine is not required in order to use Editus, but it is required if you want to utilize movable story components (unless using custom components).</p>
<p><strong>Easy (through WordPress)</strong></p>
<ol>
<li>Login to your WordPress administration area, and go to Plugins-->Add New</li>
<li>At the top of the page, click "Upload Plugin"</li>
<li>Once you are here, select "Upload," then "Choose File" to locate the .zip file on your computer, and install</li>
<li>Install Aesop Story Engine if you wish to use the movable story components</li>
</ol>
<p><strong>Not So Easy (FTP)</strong></p>
<ol>
<li>Unzip the file and upload into the /wp-content/plugins/ directory using an FTP client of your choice</li>
<li>Once uploaded, head into your WordPress administration area, and activate Editus under WordPress-->Plugins</li>
<li>Install Aesop Story Engine if you wish to use the movable story components</li>
</ol>
<p class="info"><span>Note:</span> If multisite, network activate the plugin. This will create a submenu page under the Settings tab in Network-->Dashboard within WordPress. All subsites on the network will use the settings from this main network panel. This is how the editor is configured on Story.AM.</p>
<p class="info"><span>Note:</span> Editus can be used independently of Aesop Story Engine. In fact, you can use the provided actions and filters to build your own components, and your own options within the Editor. The sky's the limit :).</p>
<p class="warning"><span>Warning:</span> 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. <br /><br /> Out of the box we support Jetpack sharing.</p>
</section>
<section id="setup">
<div class="page-header"><h3>Getting Things Setup</h3><hr class="notop"></div>
<p>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 <strong>Article Class</strong>, 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.</p>
<ul>
<li>
<strong>Article Class</strong>
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 <em>Chrome Inspector</em> to find the appropriate CSS class to use in your specific theme.
</li>
<li>
<strong>Featured Image Class</strong>
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.
</li>
<li>
<strong>Article Title Class</strong>
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.
</li>
<li>
<strong>Ignored Items to Save</strong>
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.
</li>
<li>
<strong>Disable Post Saving</strong>
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 <em>ALL HTML</em>. 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.
</li>
<li>
<strong>Disable Post Settings</strong>
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.
</li>
<li>
<strong>Disable Post Adding</strong>
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.
</li>
<li>
<strong>Disable Aesop Component Conversion</strong>
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.
</li>
</ul>
<p class="info"><span>Note:</span> 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.</p>
<p class="warning"><span>Warning:</span> 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. <br /><br /> Out of the box we support Jetpack sharing.</p>
</section>
<section id="editing">
<div class="page-header"><h3>Using the Editor</h3><hr class="notop"></div>
<p>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 <strong>Bold</strong>, <u>Underline</u>, <em>Italicize</em>, or <strike>Strikethrough</strike>. The post can be saved by clicking the blue "disk" icon in the bottom right hand corner.</p>
<img class="img" src="assets/img/editor.gif">
<h3>Inserting HTML</h3><hr class="notop">
<p>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.</p>
<img class="img" src="assets/img/inseting-html-C.gif">
<h3>Creating Links</h3><hr class="notop">
<p>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.</p>
<img class="img" src="assets/img/making-links.gif">
<h3>Adding Categories & Tags</h3><hr class="notop">
<p>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. </p>
<img class="img" src="assets/img/making-links.gif">
<h3>Setting a Featured Image</h3><hr class="notop">
<p>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.</p>
<img class="img" src="assets/img/making-links.gif">
<h3>Accessing Posts and Pages</h3><hr class="notop">
<p>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.</p>
<p>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.</p>
<img class="img" src="assets/img/making-links.gif">
<h3>Adding Posts</h3><hr class="notop">
<p>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).</p>
<img class="img" src="assets/img/making-links.gif">
</section>
<section id="components">
<div class="page-header"><h3>Working with Components</h3><hr class="notop"></div>
<p>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.</p>
<p>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.</p>
<img class="img" src="assets/img/using-components.gif">
<h3>Creating Galleries </h3><hr class="notop">
<p>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.</p>
<p class="info"><span>Note:</span> This feature is only available if Aesop Story Engine is installed.</p>
NEED GIF HERE
<h3>Adding Maps</h3><hr class="notop">
<p>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.</p>
<p>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.</p>
<p class="info"><span>Note:</span> This feature is only available if Aesop Story Engine is installed.</p>
NEED GIF HERE
</section>
<section id="filters">
<div class="page-header"><h3>Filters</h3><hr class="notop"></div>
<h5>Editus Activation</h5>
<p>This filter can be used to control when Editus is activated. The filter function takes three parameters: ($result, $action, $postid)</p>
<p>$result is a true/false value returned by the default lasso_user_can() function.</p><p> $action can be one of the following values: 'delete_post','publish_posts','edit_posts','delete_others_posts' </p>
<pre><code class="language-php">lasso_user_can_filter</code></pre>
<p>A sample filter code and registration: </p>
<pre><code class="language-php">
// 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 );</code></pre>
<h5>Allowed Post Types</h5>
<p>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.</p>
<pre><code class="language-php">lasso_allowed_post_types</code></pre>
<p>An example usage:</p>
<pre><code class="language-php">
// 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' );
</code></pre>
<h5>Pre-flight notices</h5>
<p>Filter the notices shown to the user on activation</p>
<pre><code class="language-php">lasso_preflight_notices</code></pre>
<h5>Article Class</h5>
<p>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.</p>
<pre><code class="language-php">lasso_content_class</code></pre>
<p>An example usage:</p>
<pre><code class="language-php">
add_filter('lasso_content_class', 'my_content_class', 10, 1 );
function my_content_class( $args ) {
return '.mycontent-class';
}</code></pre>
<h5>Title Class</h5>
<p>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.</p>
<pre><code class="language-php">lasso_title_class</code></pre>
<p>An example usage:</p>
<pre><code class="language-php">
add_filter('lasso_title_class', 'my_title_class', 10, 1 );
function my_title_class( $args ) {
return '.mytitle-class';
}</code></pre>
<h5>Featured Image Class</h5>
<p>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.</p>
<pre><code class="language-php">lasso_featured_image_class</code></pre>
<p>An example usage:</p>
<pre><code class="language-php">
add_filter('lasso_featured_image_class', 'my_featured_image_class', 10, 1 );
function my_featured_image_class( $args ) {
return '.myimage-class';
}</code></pre>
<h5>Ignored Items to Save</h5>
<p>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. </p>
<pre><code class="language-php">lasso_dont_save</code></pre>
<p>An example usage:</p>
<pre><code class="language-php">
add_filter('lasso_dont_save', 'my_ignored_class', 10, 1 );
function my_ignored_class( $args ) {
return '.myignored-class1, .myignored-class2';
}</code></pre>
<h5>Localized objects</h5>
<p>Filter the array of objects being localized with js</p>
<pre><code class="language-php">
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 );
}</code></pre>
<h5>Saving a gallery</h5>
<p>Filter the array of arguments for saving a post gallery.</p>
<pre><code class="language-php">
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 );
}</code></pre>
<h5>Inserting a post</h5>
<p>Filter the array of arguments for inserting a new post.</p>
<pre><code class="language-php">
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 );
}</code></pre>
<h5>Updating a post</h5>
<p>Filter the array of arguments for updating the status of a post object. I.e, draft to publish, etc.</p>
<pre><code class="language-php">
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 );
}</code></pre>
<h5>Saving a post</h5>
<p>Filter the array of arguments for saving an existing post object.</p>
<pre><code class="language-php">
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 );
}</code></pre>
<h5>Publishing a post</h5>
<p>Filter the array of arguments for publishing a new post object.</p>
<pre><code class="language-php">
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 );
}</code></pre>
<h5>Updating post title</h5>
<p>Filter the array of arguments for updating a post object title.</p>
<pre><code class="language-php">
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 );
}</code></pre>
<h5>Available components</h5>
<p>Filter the list of components available to the editor. Here are some examples.</p>
<pre><code class="language-php">
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;
}</code></pre>
<h5>Add CSS class to control bar</h5>
<p>Add a CSS class to the control bar.</p>
<pre><code class="language-php">
add_filter('lasso_control_classes', 'my_control_classes');
function my_control_classes() {
// return your class
return 'my-class';
}</code></pre>
<h5>Add CSS class to sidebar</h5>
<p>Add a CSS class to the settings sidebar.</p>
<pre><code class="language-php">
add_filter('lasso_sidebar_classes', 'my_sidebar_classes');
function my_sidebar_classes() {
// return your class
return 'my-class';
}</code></pre>
<h5>Add CSS class to toolbar</h5>
<p>Add a CSS class to the text toolbar.</p>
<pre><code class="language-php">
add_filter('lasso_toolbar_classes', 'my_toolbar_classes');
function my_toolbar_classes() {
// return your class
return 'my-class';
}</code></pre>
<h5>Add CSS class to toolbar</h5>
<p>Add a CSS class to the component settings toolbar.</p>
<pre><code class="language-php">
add_filter('lasso_component_classes', 'my_component_classes');
function my_component_classes() {
// return your class
return 'my-class';
}</code></pre>
<h5>Add CSS class to settings modal</h5>
<p>Add a CSS class to the post settings modal.</p>
<pre><code class="language-php">
add_filter('lasso_modal_settings_classes', 'my_modal_settings_classes');
function my_modal_settings_classes() {
// return your class
return 'my-class';
}</code></pre>
<h5>Add CSS class to new post modal</h5>
<p>Add a CSS class to the post settings modal.</p>
<pre><code class="language-php">
add_filter('lasso_modal_post_classes', 'my_modal_post_classes');
function my_modal_post_classes() {
// return your class
return 'my-class';
}</code></pre>
<h5>Add CSS class to WordPress image wrapper</h5>
<p>Add a CSS class to the wrapper used to edit WordPress inserted images.</p>
<pre><code class="language-php">
add_filter('lasso_wpimg_classes', 'my_wpimg_classes');
function my_wpimg_classes() {
// return your class
return 'my-class';
}</code></pre>
<h5>Custom Options Array</h5>
<p>Add an array of custom options that represent all custom components.</p>
<pre><code class="language-php">
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;
}</code></pre>
<h5>Tour slides</h5>
<p>Filter the slides available in the welcome tour</p>
<pre><code class="language-php">lasso_tour_slides</code></pre>
<h5>Automatically ignored items</h5>
<p>Filter the list of automatically ignored items. These items are different than are what is saved in settings-->ignore classes.</p>
<pre><code class="language-php">lasso_dont_save</code></pre>
<h2>Added 0.9.4</h2>
<h5>Settings Tabs</h5>
<p>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.</p>
<pre><code class="language-php">
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;
}
</code></pre>
<h5>Post Types Support</h5>
<p>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.</p>
<pre><code class="language-php">add_filter( 'lasso_post_types', $array_of_post_types );</code></pre>
</section>
<section id="actions">
<div class="page-header"><h3>Actions</h3><hr class="notop"></div>
<h5>Featured image set</h5>
<p>Fired when the featured image is set.</p>
<pre><code class="language-php">do_action( 'lasso_featured_image_set', $postid, $image_id, $userid );</code></pre>
<h5>New post created</h5>
<p>Fired when a new post is created.</p>
<pre><code class="language-php">do_action( 'lasso_new_object', $postid, $object, $title, $userid );</code></pre>
<h5>Existing post updated</h5>
<p>This is fired when an existing post is updated.</p>
<pre><code class="language-php">do_action( 'lasso_post_updated', $postid, $slug, $status, $userid ); </code></pre>
<h5>Existing post saved</h5>
<p>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.</p>
<pre><code class="language-php">
add_action('lasso_post_saved', 'my_new_save', 10, 3 );
function my_new_save( $postid, $content, $userid ) {
update_post_meta( $postid,'some_key', $content );
}
</code></pre>
<h5>New gallery created</h5>
<p>Fired when a new gallery is created.</p>
<pre><code class="language-php">do_action( 'lasso_gallery_published', $postid, $gallery_ids, $userid );</code></pre>
<h5>Existing gallery saved</h5>
<p>Fired when an existing gallery is saved.</p>
<pre><code class="language-php">do_action( 'lasso_gallery_saved', $postid, $gallery_ids, $userid );</code></pre>
<h5>Post transitioned from draft to publish</h5>
<p>Fired when a post is published from draft.</p>
<pre><code class="language-php">do_action( 'lasso_post_published', $postid, $content, $userid ;</code></pre>
<h5>Title updated</h5>
<p>Fired when the title is updated.</p>
<pre><code class="language-php">do_action( 'lasso_title_updated', $postid, $title, $userid );</code></pre>
<h5>Tour hidden</h5>
<p>Fired when the user decides to not have the Welcome Tour shown anymore</p>
<pre><code class="language-php">do_action( 'lasso_tour_hidden', $postid );</code></pre>
<h5>Before editor controls</h5>
<p>Fired before the start of the controls allowing you to place custom component icons in the tray.</p>
<pre><code class="language-php">do_action( 'lasso_editor_controls_before' );</code></pre>
<h5>After editor controls</h5>
<p>Fired after the controls allowing you to place custom component icons in the tray.</p>
<pre><code class="language-php">do_action( 'lasso_editor_controls_after' );</code></pre>
<h5>Before components</h5>
<p>Fired at the end of the list of components in the drop-up menu.</p>
<pre><code class="language-php">lasso_toolbar_components_before</code></pre>
<h5>After components</h5>
<p>Fired at the end of the list of components in the drop-up menu.</p>
<pre><code class="language-php">lasso_toolbar_components_after</code></pre>
<h5>Custom components</h5>
<p>Fired at the end of the list of components in the drop-up menu.</p>
<pre><code class="language-php">lasso_toolbar_components</code></pre>
<h5>Add fields in post settings modal form</h5>
<p>Fired at the end of the post settings form in the post settings modal.</p>
<pre><code class="language-php">lasso_modal_post_form</code></pre>
<h5>Add hidden fields in post settings modal form</h5>
<p>Fired at the end of the post settings form in the post settings modal footer typically used for inserting hidden form fields.</p>
<pre><code class="language-php">lasso_modal_post_form_footer</code></pre>
<h3>Pluggable Functions</h3><hr class="notop">
<p>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.</p>
<pre><code class="language-php">lasso_user_can</code></pre>
<h3>Defines</h3><hr class="notop">
<p>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.</p>
<pre><code class="language-php">define('LASSO_AGENCY_MODE',true);</code></pre>
<h3>Ignore Class</h3><hr class="notop">
<p>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.</p>
<pre><code class="language-css">.lasso--ignore</code></pre>
</section>
<section id="sample-addon">
<div class="page-header"><h3>Sample Addon</h3><hr class="notop"></div>
<p>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!</p>
<a href="https://github.com/AesopInteractive/sample-addon">https://github.com/AesopInteractive/sample-addon</a>
<p class="info">All component functions inside public/includes/components.php are pluggable</p>
</section>
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/jquery.scrollTo.js"></script>
<script src="assets/js/jquery.easing.js"></script>
<script src="assets/js/prism.js"></script>
<script>document.createElement('section');var duration='500',easing='swing';</script>
<script src="assets/js/script.js"></script>
</body>
</html>