lemonde / angular-ckeditor Goto Github PK

Hi @Yvem @mariusbrn ,
I'm a member of cdnjs. We want to host this library.
I'd like to confirm that if https://www.npmjs.com/package/angular-ckeditor officially maintained or not. If yes, could you please synchronize the version between GitHub and NPM? I found that it's v1.0.3 on GitHub but v0.3.1 on NPM.
Thank you.

cdnjs/cdnjs#9184

I created a custom plugin which adds a an element via the insertNode call. However, even though the editor's data is being updated the model is not. The code is similar to the below with the attributes and html set from an object.

var editorSelection = editor.getSelection();
var editorRange = editorSelection.getRanges()[0];
var newAnchor = new CKEDITOR.dom.element('a', editor.document);

newAnchor.setAttributes({
id: 'customId',
name: 'customName',
type: 'customType'
});
newAnchor.setHtml('customText');

editorRange.insertNode(newAnchor);

I'm using ckeditor extraPlugins uploadImage, and when I drop an image file into ckeditor it doesn't update the model until I do another action in the editor such as adding text.

How can I make the content of the CKEditor on the view mode only?

With the callback below:

TypeError: Cannot read property 'clearCustomData' of null
at CKEDITOR.tools.createClass.proto.detach (http://localhost:8089/ckeditor/ckeditor.js:784:341)
at CKEDITOR.editor.editable (http://localhost:8089/ckeditor/ckeditor.js:352:219)
at CKEDITOR.tools.extend.destroy (http://localhost:8089/ckeditor/ckeditor.js:243:307)
at onDestroy (http://localhost:8089/vendor/angular-ckeditor/angular-ckeditor.js:137:16)
at l.$get.l.$broadcast

when i assigning or concat html string to ng-model does not update.

html
<textarea ckeditor="CKConfig" ng-model="content" ></textarea>

controller.js
$scope.content ="<p><img src="img.jpg"/></p>" ;

Hi,
I have multiple instances of ckeditor in inline editing mode on the same page to whom I want to give different names with the id of my sections as shown below
<div ckeditor="options" ng-model="section.content" contenteditable="true" id="sectioneditor-{{section.id}}"></div>
However the section id is not replaced - I see the id of ckeditor as "sectioneditor-{{section.id}}" instead of "sectioneditor-1". The section object is already in the scope.
What am I doing wrong ??

Is it feasible to trigger angular-ckeditor directive after the page has loaded?

var textarea = document.getElementById("myTextarea");
textarea.setAttribute("ckeditor", "options")

at least didn't do the trick.

Ckeditor is not properly rending the variable from ng-repeat.

Hello!

Is seems "angular-ckeditor" is not working with angular 1.4.

Anyone can confirm ?

Thanks !

TypeError: Cannot read property 'status' of null
at ckeditorController.ready

this.ready = function ready() {
if (this.readyDefer) return this.readyDefer.promise;

  var readyDefer = this.readyDefer = $q.defer();
  if (this.instance.status === 'ready') readyDefer.resolve(); //error is thrown here since instance is null.
  else this.$on('instanceReady', readyDefer.resolve);

  return readyDefer.promise;

};

In Samsung S4, Google nexus devices, the error mentioned above props up. Also in device mode emulator in chrome dev tools, this issue is coming up. However this issue is not happening in apple devices.

greater wrapper for angular users, but I noticed that there is one issue using ckeditor inside the bootstrap $modal.

the issue can be seen when you close/dismiss the modal window, I guess the issue is because of duplicated destroy. so I change a little bit to avoid it, not very sure this is an good approach.

// Destroy editor when the scope is destroyed.
$scope.$on('$destroy', function onDestroy() {
  if(this.instance) {
    instance.destroy(false);      
  }
});

Hi, how to sendo data from form via post $http:
I try but dont send new data, see my example:

     app.controller('FormCtrl', function ($scope, $http, $httpParamSerializerJQLike, $state) {

  $scope.submitForm = function() {

$http(
  {
    method: 'POST',
    url: url+ 'save_edit_document',
    data: $httpParamSerializerJQLike($scope.doc),
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
  }
  ).success(function(){
  $state.go('showDoc', {'itemId': $scope.doc.id});
      });
    };
  });

unsuccessful to add plugin to ckeditor options obj.
extraPlugins: ['imagebrowser', 'mediaembed']

Hi there,

I was wondering if this plugin was being actively developed on?

Thanks

Hi, currently in the process of switching from the regular version of CKEditor to the angular version.

I have a large config.js file (200+ lines) inside the root dir of the regular ckeditor lib folder, and am wondering if there's any easy way I can reuse this? Or should I plan on plugging everything into a $scope.options object?

Initiating ckeditor makes form dirty - can You make something not to do so?

https://github.com/lemonde/angular-ckeditor/blob/master/angular-ckeditor.js#L58
With $parse(attrs.ready)(scope) we only get a evaluated callback function, never called it in link.
well, I should put ready="callback()" as the ng-click way

I think we can call it with scope, element, controller.instance or more parameters, so we can have some custom actions with the editor.

And now with #20, the whole function is called after the ready promise is resolved, the setImmediate wrapper function is not necessary anymore.
Tried this with unit tests, seems ckeditor won't fire event handlers right after setData.

I think the package.json should list angular-ckeditor dependencies as peerDependencies.
It should not install them via bower.

• bower might not even available, resulting in installation errors
• dependencies of angular-ckeditor are already installed via their npm packages
• in some environments (docker) even with bower installed, bower refuses to install because being run as sudo

I would suggest to remove the install script from the scripts section and add a corresponding peerDependencies section.

Probably good to add some version information in a header of the various distribution files and make that part of your release process?

When typing in language that requires character composition (e.g. Japanese, Korean or Chinese), change/saveSnapshot events are not fired. As a result, the model fails to correctly sync with the actual value in the editor.

To resolve this issue, would it be possible to officially provide an attribute that optionally switches syncing logic to a dumber one but works all the time including such languages?

Dumb version checking every X ms (alternative sync method suggested in this PR):

var SYNC_INTERVAL = 100;
var cachedData = ckeditor.instance.getData();
var intervalId = $interval(function () {
  var newData = ckeditor.instance.getData();
  if (newData !== cachedData) {
    ngModel.$setViewValue(newData);
  }
  cachedData = newData;
}, SYNC_INTERVAL);
element.on('$destroy', function () {
  $interval.cancel(intervalId);
});

Smarter version listening to events (current code):

// Sync view on specific events.
['dataReady', 'change', 'saveSnapshot'].forEach(function (event) {
  ckeditor.$on(event, function syncView() {
    ngModel.$setViewValue(ckeditor.instance.getData());
  });
});

Hello,

I am trying to do an npm install but it seems like behind the scenes it's trying to do a bower install. I am a little confused at what is happening. This is the error message I am getting. Any guidance or clarification would be appreciated.

c:\temp>npm i angular-ckeditor
npm WARN package.json [email protected] No repository field.
npm WARN package.json [email protected] No README data
npm WARN package.json [email protected] No license field.
\

[email protected] install c:\temp\cbankerTest\node_modules\angular-ckedit
or
bower install

'bower' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\Program Files (x86)\nodejs\node.exe" "C:\Program Files (
x86)\nodejs\node_modules\npm\bin\npm-cli.js" "i" "angular-ckeditor"
npm ERR! node v0.12.7
npm ERR! npm v2.11.3
npm ERR! code ELIFECYCLE

npm ERR! [email protected] install: bower install
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script 'bower install'.
npm ERR! This is most likely a problem with the angular-ckeditor package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! bower install
npm ERR! You can get their info via:
npm ERR! npm owner ls angular-ckeditor
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! c:\temp\cbankerTest\npm-debug.log

angular-ckeditor suffers from the issue described here http://stackoverflow.com/questions/9093424/placeholder-in-contenteditable-focus-event-issue and here http://onefusedlife.com/2012/09/19/jquery-html-tip-focus-cursor-inside-contenteditable-element-after-click/

I'll send a PR soon.

oops, wrong projet

Hi,
I have multiple instances of ckeditor in the same page in inline editing mode.
In the first editor the basicstyles + paragraph are working correctly.
But from the 2nd editor onwards the combobox for basicstyles and paragraph are not shown onclicking.
Any help would be really appreciated.

Thanks

Hi, I'm using angular ckeditor in my code, it works well in chrome and firefox but in ie11 and edge I meet a problem: the model doesn't keep synchronous between text field and my angular controller. Any solution?

By download and copy the code, I can not let it work, It shows nothing, Seems the angular-ckeditor modular is not work.

Would you please give a online demo for this, I can check what I missing.

How to get ckeditor instance in my controller? I want to definde my custom blur event.

How to remove ck-editors footer

Hello, thanks for your great work in this project.

I'd like to ask a question, is it possible to add a custom toolbar group to the editor? I have created a plugin that adds multiple buttons to the toolbar, but I don't know how to group them in a new toolbar group, not an existing one.

Thank you.

I'm using wiredep to include ckeditor to my index template.
I have to include two files, ckeditor.js and ckeditor-angularjs.js, but wiredep won't copy this files... and finally, i don't have these files into my index.html and my karma.conf.js.

in my bower.json, i have this declaration (after doing bower install ckeditor-angularjs --save):

 "dependencies": {
    "ckeditor-angularjs": "*"
 }

My Gruntfile.js :

wiredep: {
        app: {
            src: ['src/main/webapp/index.html'],
            exclude: [
                /angular-i18n/  // localizations are loaded dynamically
            ]
        },
        test: {
            src: 'src/test/javascript/karma.conf.js',
            exclude: [/angular-i18n/, /angular-scenario/],
            ignorePath: /\.\.\/\.\.\//, // remove ../../ from paths of injected javascripts
            devDependencies: true,
            fileTypes: {
                js: {
                    block: /(([\s\t]*)\/\/\s*bower:*(\S*))(\n|\r|.)*?(\/\/\s*endbower)/gi,
                    detect: {
                        js: /'(.*\.js)'/gi
                    },
                    replace: {
                        js: '\'{{filePath}}\','
                    }
                }
            }
        }
    }

i tested with overrides option in bower.json but it wont work... :

"overrides": {
"bootstrap": {
  "main": [
    "dist/js/bootstrap.js",
    "dist/css/bootstrap.css",
    "less/bootstrap.less"
  ]
},
"ckeditor-angularjs": {
  "main": [
    "./src/main/webapp/bower_components/ckeditor/ckeditor.js",
    "build/ckeditor-angularjs.min.js"
  ]
},
"ng-file-upload": {
  "main": "ng-file-upload-all.js"
}

}

Do you know how can solve this problem ?
Thanks.

i want to add CKFINDER into CKEDITOR, so i do like this:
$scope.options = { language: 'en', allowedContent: true, entities: true, filebrowserBrowseUrl: '../ckfinder/ckfinder.html', filebrowserImageBrowseUrl:'../ckfinder/ckfinder.html?type=Images', filebrowserFlashBrowseUrl: '../ckfinder/ckfinder.html?type=Flash', filebrowserUploadUrl: '../ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files', filebrowserImageUploadUrl: '../ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images', filebrowserFlashUploadUrl: '../ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash' };
but there is no BrowServer button when click into icon image. How can i add CKFINDER?

Hi,

I have integrated this ckeditor with this wonderful directive but sadly i'm only able to load the values in editor on page load and not onclick/function call.

I need to load the values which are coming from a function which are based on user inputs/selection

I'm not sure if there is a function to call or something to trigger the viewupdate . All i did was assign the $scope with a new value but the editor seems to only keep the previous value (No binding)

Hi,
How can I re render the CKEDITOR after asynchronously loading required ckeditor.js and angular.ckeditor.js. I am able to get the instance of CKEDITOR in console but CKEDITOR is not being rendered. is there any way to re-render it?

This seems really obvious to me that the ready function should be able to get the instance of the ckEditor so that you can do custom configuration.

How would you go about doing that?

Hey Guys,

I'm trying to work through this AMD issue with RequireJs&Angular&Ckeditor but I'm having some issues currently.

Currently this is my setup

main.js file
paths: { 'ckeditor': '../../bower_components/angular-ckeditor/angular-ckeditor.min', 'ckeditor-core': '../../bower_components/ckeditor/ckeditor', }, shim: { 'ckeditor-core': { exports: 'CKEDITOR', deps: ['angular'] }, 'ckeditor': { deps: ['ckeditor-core'] }, }

test.js
define(['./module','ckeditor'], function (controllers,angularCkEditor) { controllers.controller('TestCtrl', [ '$scope', function($scope) { console.log(angularCkEditor); } }]; });

test.html

<div ckeditor="options" ng-model="content" ready="onReady()"></div>

Nothing shows for test.html and also when i log 'angularCkEditor', it fails but if i log ckeditor-core itself, it works.

Can someone see what I could be doing wrong?

Lots of popular ng-modules (ui-router, ng-route, ng-animate), have

module.exports = 'ngRoute' // for example

in their entry point; in your case it's ckeditor.js.

I'm using this project in a browserified build; can we provide an NPM export similarly? We can use this as a rough guide: http://blog.npmjs.org/post/112064849860/using-jquery-plugins-with-npm.

See also tableau-mkt/jquery.addressfield#52.

ckeditor instance creating for each loop and it is creating with same name.

So on finding the instance from CKEDTIOR,it showing only one instance but on f12 it showing muliple instance.how to get the perticular instance.

Its created ckedtior with the same name "sample-{{$index}}". But the div control id is unique.

In the code snippet ,node is the json object it has been used as model and node.Options contains multiple values and these values am binding using ng-repeat and creating content editable div with ckeditor attribute for each value of node.Options.

if we look in console CKEDITOR.instances it showing only one instance.but in DOM its creating multiple ckeditor instance corresponding to the node.Options with the same id as "sample-{{$index}}".

So here my concern is why CKEDITOR.instances is having only one instance with the name "sample-{{$index}}" ,if we observe {{$index}} is not replace with actual value. ckeditor instance is creating.

i found one more similar question for which no body answered ​http://stackoverflow.com/questions/28715234/assign-id-to-ckeditor-inside-the-ng-repeat

i have included ckedior directive in my project with bower install angular-ckeditor . im getting CKEDITOR not defined error in console. can you help me?

Please add angular-ckeditor to NPM

In our use case, we want to receive the config for a given CKEditor instance asynchronously via AJAX.

Therefore I workaround the limitations of your directive by making use of CKEDITOR.editorConfig.

I would prefer a cleaner solution by this lib rather my hacky approach :-)
Maybe you even have an idea how to update an editors height hereby?

My approach looks somewhat like this:

var editors = angular.module('editors', ['ckeditor']);
  editors.controller('EditorController', [
    '$scope', 'EditorManager', function($scope, EditorManager) {
      $scope.input = {};
      $scope.options = {};
    }
  ]);
editors.factory('EditorManager', [function() {
     var editorService;
     editorService = {};
     editorService.options = {
        custom: {
          height: '500px',
          language: 'de'
        }
     };
     return editorService;
   }
 ]);
  editors.directive('ckeditorize', [
    'EditorManager', function(EditorManager) {
      var loadConfig, setHeight;
      setHeight = function(id, height) {
        var cke;
        cke = angular.element("#cke_" + id);
        if (cke.length) {
          cke.find(".cke_contents").animate({
            height: "" + height
          }, 500, "swing");
        }
      };
      loadConfig = function(scope, element, attrs) {
        var ckeditorController, editorOption, editorOptionName;
        editorOptionName = attrs.ckeditorOption;
        editorOption = EditorManager.options[editorOptionName]; // This shall happen async later
        scope.$parent.options = editorOption;
        ckeditorController = element.controller('ckeditor');
        ckeditorController.ready().then(function() {
          var config, editor;
          editor = attrs.id;
          config = {};
          angular.copy(editorOption, config);
          if (editor && CKEDITOR.instances[editor]) {
            CKEDITOR.editorConfig(config);
            if (config.height) {
              setHeight(attrs.id, config.height);
            }
          }
        });
      };
      return {
        restrict: 'C',
        scope: {
          ckeditor: '='
        },
        link: function(scope, element, attrs) {
          loadConfig(scope, element, attrs);
        }
      };
    }
  ]);

For a given HTML snippet:

<div data-ng-editor="EditorController">
    <textarea id="custom" name="custom" class="ckeditorize" data-ng-model="input.custom" ckeditor="options" data-ckeditor-option="custom"></textarea>
</div>

(Out setup is pretty complicated, but I hope I was able to destille the necessary bits - CodePen couldn't deal with AngularJS, sorry.)

Hi guys, can you please quickly check, if the angular models gets properly updated when editing in the source mode with latest version of angular-ckeditor and ckeditor itself? I have older versions (0.1.1 and 4.4.5) and it does not - model updates only after exiting the source mode.

I had to manually modify the update events to include key, paste and selectionChange (one of these did the trick) - as recommended e.g. here http://stackoverflow.com/a/25600234/1315795.

I am trying to add mathjax plugin to my ck editor and getting the following error - >

Uncaught TypeError: d.replace is not a functionA @ ckeditor.js:249(anonymous function) @ ckeditor.js:248(anonymous function) @ ckeditor.js:475(anonymous function) @ ckeditor.js:236e @ ckeditor.js:231A @ ckeditor.js:231r @ ckeditor.js:231(anonymous function) @ ckeditor.js:232

I have tried the following things ->

1. included the directive in my partial html -
   <div ckeditor="data_options" ng-model="note.note_data" ready="onReady()"></div>

2. added configuration options in my controller -

$scope.data_options = {
            lang: 'en',
            allowedContent: true,
            entities: false,
            extraPlugins: ['mathjax'],
            mathJaxClass: 'm-equation',
            mathJaxLib: 'http://cdn.mathjax.org/mathjax/2.6-latest/MathJax.js?config=TeX-AMS_HTML'
        };

But still I am getting the same error. Am I missing something ? If yes, then how can I get it to work

Hi, I'd like the option to disable the inline mode toolbar for the traditional one. Was thinking of adding check for a disableInline config value, something simple like:

if (config.disableInline)
{
    instance = this.instance = CKEDITOR.replace($element[0], config);
}
else
{
    instance = this.instance = CKEDITOR.inline($element[0], config);
}

If this is acceptable, I can prepare a pull request. If not, let me know what would be the best way to integrate this option.

How do I access the save button in the toolbar? I got the editor showing and it takes the content. But how do I save the edited content by clicking the save button in the toolbar?

I am trying to customize the config for plugins that I've added on CKEditor. For instance, wordcount. I have several instances of the editor, and I'd like to customize the charcounts for each by passing it into a directive...

Is this possible by using the CKEDITOR global object?
Thanks!

I really not sure why, but my ng-model only change de the value when the user type "enter".
Without enter the user can type anything but the model still the default value...

What can be?
This is an issue?