Global default configuration for CKEditor in bower: config.js

In my current Angular project, we are utilizing the angular-ckeditor module from GitHub. In order to use this module, we need ckeditor.js which was installed through bower. We have multiple pages with ckeditor instances that require the same configuration.

Changing the default configuration in CKEditor by modifying the config.js file is not ideal because upon deployment or sharing, bower reinstalls the ckeditor scripts and overwrites the config.js file.

While I am aware of using 

CKEDITOR.replace('myEditor', { customConfig: '/custom/path/to/config/ckeditor_config.js' });
on a per-instance basis, it is not practical as I do not know the ids for the editors at runtime.

Is there a way to establish global configuration for CKEditor without altering the library's config.js?

Possible solutions include:

  1. Include CKEditor scripts in source control instead of using bower to prevent config.js from being overridden.
  2. Create a custom directive that replaces the directive with ckeditor while applying the customConfig configuration.
  3. Develop a gulp task to update the config.js after bower installation.
  4. Add ids to all ckeditors and utilize the CKEditor.replace() method.
  5. Pass configuration to each ckeditor instance using 
    <textarea ckeditor="{ customConfig: 'myCustomConfig' }"></textarea>
    .
  6. Utilize any undocumented methods if available (preferable).

What would be the most efficient solution to address this issue?

angularjsckeditorbower

Answer №1

To integrate ckeditor.config.js into my project (which uses Grunt), I added it to index.html and linked to ckeditor_config.js.

// scripts/libs/ckeditor.config.js
CKEDITOR.config.customConfig = "/scripts/libs/ckeditor_config.js";

// scripts/libs/ckeditor_config.js
CKEDITOR.editorConfig = function (config) {
  config.toolbarGroups = [
    { name: 'mode' },
    { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
    { name: 'editing',     groups: [ 'find' ] },
    { name: 'basicstyles', groups: [ 'basicstyles' ] },
    { name: 'links' },
    { name: 'styles' },
    { name: 'cleanup' }
  ];
config.removeButtons = 'Anchor,Strike,Styles,Font';
  //config.removePlugins = 'font';
  config.extraPlugins = "find,font";
}
<!-- index.html -->
<script src="bower_components/ckeditor/ckeditor.js"></script>
<script src="scripts/libs/ckeditor.config.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Troubleshooting HTTP requests in Angular: Dealing with

I encountered an issue while attempting to test an http request with a dynamic URL. Within my service file, I have the following snippet: Snippet from My Service File: //other service codes.. //other service codes.. var id = $cookies.id; return $http.ge ...

javascriptangularjsunit-testing

Service has not been properly declared

I encountered an issue with AngularJS where I am struggling to import a Service from one module to another. In the Data module, I have a Service named MenuDataService that I need to utilize in the MenuApp module. However, when attempting to do so, I receiv ...

javascriptangularjs

Troubleshooting: Issue with auto height functionality in Angular's ui-grid

Utilizing angular's ui-grid to display records, I have a scenario where one product has 7 entries and another product has 200 entries. By default, the grid is set to display a maximum of 20 rows when there are more than 20 records. If there are less t ...

angularjsangular-ui-gridui-grid

Unable to retrieve form values from a $modalInstance

When launching a $modalInstance, the user will need to select an option from dynamically loaded radio inputs and return the chosen value. To open the $modalInstance, this function is used: $scope.openAddFriendGroup = function () { var addFriendGroupMod ...

javascriptangularjsangular-ui-bootstrap

Angular 2 has its own version of $q.when called RxJs

Back in the AngularJS 1.* days, I used to have this code snippet to refresh the auth-token: ... if (!refreshTokenInProgress) { refreshTokenInProgress = AuthService.refreshToken(); } $q.when(refreshTokenInProgress, function () { refreshTokenInProgre ...

angularjsangulartypescriptrxjs

Using AngularJS to transfer data from a datepicker to an ng-model

I am currently trying to figure out how to pass the date from a datetimepicker into the model. Unfortunately, I am facing some challenges with this process. I wish I could provide a demo of the issue on a fiddle, but I am unsure of how to do so due to the ...

javascriptjqueryangularjsdatetimepickerangular-ngmodel

Creating AngularJS select boxes with varying sizes and values within an ng-repeat loop

I've identified the issue, but my attempts to resolve it have been unsuccessful so far. Any assistance would be greatly appreciated. Currently, I am working on generating a table from JSON data within an ng-repeat loop. One of the columns in the tabl ...

angularjsselectangularjs-ng-repeat

Seeking guidance on recompiling a directive within Angular?

I have implemented a directive to display data in a tree-like structure. This directive allows for filtering of the data. However, when I clear the filter, the directive does not automatically update to reflect the changes in the data. It only updates when ...

angularjs

AngularJS does not allow access to the variable value outside of the resource service's scope,

I have developed an AngularJS factory service to handle REST calls. The service is functioning correctly, but I am facing a challenge where I need to set values into $scope.variable and access them outside of the resource service. However, when attempting ...

javascriptangularjsangular-promise

Master the art of adjusting chart width on angular-chart with the help of chart.js

I am currently using angular-chart along with Angular and chart.js to create multiple charts on a single page. However, I am facing an issue where each chart is taking up the entire width of the screen. I have tried various methods to limit the width based ...

javascriptangularjschart.jsangular-chart

tslint issues detected within a line of code in a function

I am a novice when it comes to tslint and typescript. Attempting to resolve the error: Unnecessary local variable - stackThird. Can someone guide me on how to rectify this issue? Despite research, I have not been successful in finding a solution. The err ...

javascriptjqueryangularjstypescripttslint

Verifying StartDate and EndDate using AngularJS and Bootstrap Datepicker

My HTML Coding <form name="myForm"> <div class="row"> <div class="col-md-2"> <input data-ng-model="Data.StartDate" type="text" id="startDate" name="startDate" class="form-control" data-da ...

javascriptangularjshtmlangular-ui-bootstrapbootstrap-datepicker

Preparing user context prior to executing controllers within AngularJS

I recently created an AngularJS application and integrated a REST API to fetch resources for the app. As part of the authentication process, I store the user's access token in a cookie. When the user reloads the page, I need to retrieve user informati ...

javascriptangularjsajaxpromiserestangular

AngularJS encountered an error: $http.get 405 (Method Not Allowed)

Whenever I receive a request from a URL like this: $http({ method: 'GET', url:'http://mooc-lms.dev.web.nd/v0.3/users/login' }).success(function(data, status, headers, config) { //code }); An error ...

angularjshttphttp-status-code-405

Leveraging Angular js for performing operations in Putty

At the moment, we depend on Putty for connecting to the app server and checking logs. I am looking for a solution that would allow me to automate this process using angular js. Is it possible to send commands from my angular js or any other client-side a ...

javascriptangularjssshputty

`Trying out an HTTP POST request`

I have created a save function: $scope.save = function(){ $scope.product.$save(function(){... Update The $save functionality has been implemented in my resource: .factory('SingleProduct', function($resource){ return $resource(' ...

angularjsmockingkarma-runnerkarma-jasmine

reorder the array based on reverse pass

Here is the code snippet I am currently working with: jade (html) ng-repeat="message in messageList | orderBy: [sortingByIsUnread, sortingBySentDate] javascript $scope.sortingBySentDate = function (message) () { return moment(message.sentDate). ...

angularjsangularjs-ng-repeat

AngularJS: Starting a $scope property in the right way

Check out my small angular code snippet below: html file: <body ng-controller="myCtrl"> <div class="container"> .... </div> </body> javascript file: app.controller('myCtrl', function($scope) { $scope.wh ...

angularjs

Combining ng-repeat and ng-model in a controller

Hello everyone, I'm a newbie here and also new to AngularJS. I am currently working on creating a form using ng-repeat, but I'm struggling to understand some of the angular concepts. Here is the JS in my controller: $scope.myCurrentAssets = { ...

angularjsangularjs-ng-repeat

The Angular 2 Final Release is encountering an issue where it is unable to locate the module name with the

Recently, I made the transition to Angular 2 Final Release from RC 4 and encountered an issue with an error message cannot find name 'module' in my code: @Component({ selector: 'dashboard', moduleId: module.id, templateUrl: ...

angularjsangular