How to add clipboard functionality to Django CkEditor Code Snippets

Hello and welcome to the devmaesters website. In this post I am going to show you how you can add a copy to clipboard functionality to your django CkEditor code snippets section using jQuery and CSS.

Before we begin i'll like to let everyone know that the main codes used to implement this feature is gotten from this gist copy-pre.css. So kudus and thanks to Stephen Harris.

I am going to assume that you have your project up and running already and that you have added the codesnippets plugin to your Django CkEditor. To add the copy to clipboard follow the steps below.

Step 1

Add jQuery to your project by importing either locally or via CDN Below is a CDN link for jQuery

<script
  src="https://code.jquery.com/jquery-3.6.3.min.js"
  integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
  crossorigin="anonymous"></script>

Step 2

Create a main.js file inside your project static folder and import it into your project below the jQuery CDN as shown below

<script
  src="https://code.jquery.com/jquery-3.6.3.min.js"
  integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
  crossorigin="anonymous"></script>

  <script src="{% static 'main.js' %}"></script>

Step 3

Copy and paste the code below into the main.js file you created in step 2

jQuery( document).ready(function($){
	var copyid = 0;
	$('pre').each(function(){
		copyid++;
		$(this).attr( 'data-copyid', copyid).wrap( '<div class="pre-wrapper"/>');
		$(this).parent().css( 'margin', $(this).css( 'margin') );
		$('<button class="copy-snippet">Copy</button>').insertAfter( $(this) ).data( 'copytarget',copyid );
	});

	$('body').on( 'click', '.copy-snippet', function(ev){
		ev.preventDefault();

		var $copyButton = $(this);

		$pre = $(document).find('pre[data-copyid=' + $copyButton.data('copytarget' ) + ']');
		if ( $pre.length ) {
			var textArea = document.createElement("textarea");

			// Place in top-left corner of screen regardless of scroll position.
			textArea.style.position = 'fixed';
			textArea.style.top = 0;
			textArea.style.left = 0;

			// Ensure it has a small width and height. Setting to 1px / 1em
			// doesn't work as this gives a negative w/h on some browsers.
			textArea.style.width = '2em';
			textArea.style.height = '2em';
			
			// We don't need padding, reducing the size if it does flash render.
			textArea.style.padding = 0;

			// Clean up any borders.
			textArea.style.border = 'none';
			textArea.style.outline = 'none';
			textArea.style.boxShadow = 'none';

			// Avoid flash of white box if rendered for any reason.
			textArea.style.background = 'transparent';

			//Set value to text to be copied
            // change .html() to .text()
			textArea.value = $pre.text();

			document.body.appendChild(textArea);
			textArea.select();

			try {
				document.execCommand('copy');
				$copyButton.text( 'Copied').prop('disabled', true);;
			} catch (err) {
				$copyButton.text( 'FAILED: Could not copy').prop('disabled', true);;
			}
			setTimeout(function(){
				$copyButton.text( 'Copy').prop('disabled', false);;
			}, 3000);
		}
	});
});

Step 4

I am sure you have a main.css or styles.css stylesheet that is being used by all the pages on your site with the code snippets section. Copy the codes below and paste it into the css stylesheet.

.pre-wrapper{
	position:relative;
}
.pre-wrapper pre{
	padding-top: 25px;
}
.pre-wrapper .copy-snippet {
	border-radius: 0;
	min-width:55px;
	background: none repeat scroll 0 0 transparent;
	border: 1px solid #bbb;
	color: #26589F;
	font-family: 'HELEVETICA',sans-serif;
	font-size: 12px;
	font-weight: normal;
	line-height: 1.42rem;
	margin: 0;
	padding: 0px 5px;
	text-align: center;
	text-decoration: none;
	text-indent: 0;
	position:absolute;
	background:#ccc;
	top:30px;
	right:20px;
}
.pre-wrapper .copy-snippet:disabled{
	color:#555;
}

Result

Conclusion

Follow the steps above to implement a clipboard functionality in your django project. You can get creative and switch up design to use a clipboard icon instead on a button. As always thanks for reading and feel free to leave a comment down below if you have any questions.