[GSoC 2016] CKEditor plugins - 1. week

Posted by : at

Category : gsoc-2016

The Google Summer of Code 2016 coding period started last week, May 23rd and since then, every student started to actively work on their project. After the one-month long community bonding period, it was time to start coding.

I had many things scheduled for this first week. Firstly, I found some interesting mockups to get a broader idea, what we are building and how it should look like. Secondly, I created a GitHub repository and a sandbox project on d.o.

After that preparation, I immediately jumped into it and went through some tutorials on how to make custom CKEditor plugins for Drupal. I found this tutorial really useful. It was really easy to follow and it guided me step by step. I have also read many discussions about custom plugin development and how to convert them to Drupal. And there is also some nice documentation on the CKEditor API for Drupal.

A general overview of the CKEditor and it’s development was also presented at DrupalCon Amsterdam 2014 by wwalc.


With all those nice guides and examples, it was fairly easy to make the first version of my plugin. I created a new Drupal module, found some nice icons and started working with the javascript file. The initial version is using user-defined <tmgmt-segment> tags in the source code. With them we define specific segments (e.g. divisions and paragraphs), that are then easier to translate. As by our goals, when the user clicks on the ‘Display segments’ button, a simple search is performed on our tags. They are then replaced by some nice icons, showing where the segments start and end. This enables the translator to see them clearly and perform his actions. This is shown below.

Displaying segments (first version)

Goals for next week

For next week we want to extend the functionality of the initial plugin by displaying the context below the text area and show the segments in both editors (source and translation) - to clearly distinguish the currently marked segment. Also, a specific word that was clicked should be displayed below. We can then use it to gather possible translations, check if it already exists in the TMGMT memory, etc. I also believe the module needs to be renamed to something more simple and easier to read - on our weekly meeting we agreed on the name tmgmt_ckeditor, since we are building a TMGMT specific CKEditor plugin.

You can find my code on GitHub and follow my progress there. Looking forward to start implementing some more fun stuff!

About Saša Nikolič
Saša Nikolič

Web Developer. Occasionally, I write blogs and present publicly.

Email : [email protected]

Website : https://www.sasanikolic.com

About Saša Nikolič

I'm a Front-End Drupal Developer for MD Systems working remotely. I have serious passion for UI effects, animations and creating intuitive, dynamic user experiences. I love structure and order and I also stand for quality.

Useful Links