I am currently in the process of integrating a custom toolbar into my Angular-Ckeditor setup.
Here are the details:
angular: 1.5.8
angular-ckeditor : 1.0.3
ckeditor: 4.7.1
It seems that the angular-ckeditor has not received updates in the past 9 months, which makes me suspect that it may not fully support colored text and backgrounds. However, I am uncertain about this.
This is how the editorOptions are configured:
app.service('EditorOptions', function() {
this.basic = {
toolbar: [
{ name: 'clipboard', items: ['Undo', 'Redo' ] },
{ name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript'] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
{ name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar'] },
'/',
{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
{ name: 'tools', items: [ 'Maximize'] }
]...
A script is called from the frontend:
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.7.1/ckeditor.js"></script>In the controller:
$scope.editorOptions = angular.merge({}, EditorOptions.basic, {
on: {
blur: function() {
$scope.updateNode($scope.node);
}
}
});
Finally, here is the form code:
<textarea ckeditor="editorOptions" ng-model="node.body"></textarea>
I am facing an issue where the toolbar configurations for colors are not displaying. All other toolbar groups render correctly. Can anyone provide insight into why this might be happening?