I'm having trouble making my own module to extend and incorporate a button that inserts markup to the ckeditor. I have used the following resources but cannot get it to work.
- http://www.slideshare.net/ranelpadon/ckeditor-widgets-with-drupal
- http://ckeditor.com/slides/ckeditor-in-drupal-8/#/
- http://webcache.googleusercontent.com/search?q=cache:KKR6-B3lhdAJ:alexcoder.info/en/content/dobavlenie-plagina-ckeditor-v-drupal-8+&cd=6&hl=en&ct=clnk&gl=uk
- https://github.com/wwalc/colorbutton
- https://github.com/wwalc/panelbutton
I managed to get the colorbutton/panelbutton modules to work, but the functionality is completely different to what I want.
I have the following file & folder structure within modules/grouped_texts/
Here is an updated screenshot of the file structure:
The idea as you probably well know is to extend the CKEditor Module to include a custom tool, that on click inserts markup into my custom content editor.
The custom button 'grouped_texts' appears within the page '/admin/config/content/formats/manage/impact_editor' as you can see in the screenshot below.
But when I come to edit a page with the editor enabled, the icon does not show. See screenshot below:
As i'm getting familiar with drupal 8 and the limited resources to enable me to debug the extension of this module. Is there something in my code i've done wrong? Can you offer a solution to this problem? Here is the snippets of code i've used:
grouped_texts.info.yml:
name: CKEditor grouped_texts
type: module
description: This plugin adds code tag button.
core: 8.x
package: CKEditor
version: VERSION
dependencies:
- ckeditor
grouped_texts.php:
/**
* @file
* Definition of \Drupal\grouped_texts\Plugin\CKEditorPlugin\grouped_texts.
*/
namespace Drupal\grouped_texts\Plugin\CKEditorPlugin;
use Drupal\ckeditor\CKEditorPluginInterface;
use Drupal\ckeditor\CKEditorPluginButtonsInterface;
use Drupal\ckeditor\CKEditorPluginBase;
use Drupal\Component\Plugin\PluginBase;
use Drupal\editor\Entity\Editor;
/**
* Defines the "grouped_texts" plugin.
*
* @CKEditorPlugin(
* id = "grouped_texts",
* label = @Translation("grouped_texts")
* )
*/
class grouped_texts extends CKEditorPluginBase implements CKEditorPluginInterface, CKEditorPluginButtonsInterface {
/**
* Implements \Drupal\ckeditor\Plugin\CKEditorPluginInterface::getDependencies().
*/
function getDependencies(Editor $editor) {
return array();
}
/**
* Implements \Drupal\ckeditor\Plugin\CKEditorPluginInterface::getLibraries().
*/
function getLibraries(Editor $editor) {
return array();
}
/**
* Implements \Drupal\ckeditor\Plugin\CKEditorPluginInterface::isInternal().
*/
function isInternal() {
return FALSE;
}
/**
* Implements \Drupal\ckeditor\Plugin\CKEditorPluginInterface::getFile().
*/
function getFile() {
return drupal_get_path('module', 'grouped_texts') . '/js/plugins/plugin.js';
}
/**
* Implements \Drupal\ckeditor\Plugin\CKEditorPluginButtonsInterface::getButtons().
*/
function getButtons() {
return array(
'grouped_texts' => array(
'label' => t('grouped_texts'),
'image' => drupal_get_path('module', 'grouped_texts') . '/js/plugins/grouped_texts/icons/grouped_texts.png',
),
);
}
/**
* Implements \Drupal\ckeditor\Plugin\CKEditorPluginInterface::getConfig().
*/
public function getConfig(Editor $editor) {
return array();
}
}
plugin.js:
(function ($, Drupal, CKEDITOR) {
Drupal.behaviors.myCkeditor = {
attach: function (context, settings) {
CKEDITOR.plugins.add('grouped_texts', {
requires: 'widget',
icons: 'grouped_texts',
init: function(editor){
editor.widgets.add('grouped_texts', {
allowedContent: true,
editables: {
mytitle: {
selector: '.grouped-texts-title',
},
mycontent: {
selector: '.grouped-texts-content',
}
},
template:
'<div class="grouped-texts"><h2 class="grouped-texts-title">[Insert title here]</h2><div class="grouped-texts-content"><p>[Insert sub-elements here]</p></div></div>',
upcast: function(element){
return element.name == 'div' && element.hasClass('grouped-texts');
},
});
editor.ui.addButton('grouped_texts', {
label : 'grouped_texts',
command : 'grouped_texts',
icons : CKEDITOR.getUrl(this.path + 'icons/grouped_texts.png')
});
editor.config.contentsCss.push(CKEDITOR.getUrl(this.path + 'css/contents.css'));
}
});
}};
})(jQuery, Drupal, CKEDITOR);
Thanks in advance.