One problem we have found is that shortcodes can be a pain to remember, especially when you have more than 5 for different video services etc. One clever way to get around this is to have buttons that when pressed inject the shortcode into the richtext input.

Code: Select all
<style>
.droplinks a{
margin: 0 0 0 5px;
transition: 0.3s;
background: #52d19b;
color: #fff;
cursor: copy;
padding: 10px 15px;
border-radius: 15px;
font: 13px Montserrat, sans-serif;
font-weight: bold;
}
</style>
<div class="input">
<div class='droplinks'>
<a class='dragdrop' id="[youtube video='INSERT-VIDEO-URL']">Youtube Video</a>
</div>
<cms:input name="description" type="bound"/>
<script type="text/javascript">
CKEDITOR.on("instanceReady", function(event)
{
event.editor.commands.source.exec();
});
</script>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
$(".dragdrop").click(function() {
var dropvalue = $(this).attr("id");
$(".cke_source").attr("id", "source");
var caretPos = document.getElementById("source").selectionStart;
var textAreaTxt = $(".cke_source").val();
$(".cke_source").val(textAreaTxt.substring(0, caretPos) + dropvalue + textAreaTxt.substring(caretPos) );
});
});
</script>


The only downside is that this technique requires CKEditor to be in source mode, which is brought up automatically using javascript. To achieve the effect in the screenshot we use Font Awesome and Jquery.

Screen Shot 2016-04-15 at 02.37.43.png
A screenshot of this shortcut.
Screen Shot 2016-04-15 at 02.37.43.png (54.06 KiB) Viewed 2417 times


Thought it would be useful to share!