I'm trying to figure out how to listen to events in a React way. Right now I'm adding an event listener in the CKEditor way.

var AlloyEditorView = React.createClass({
  componentDidMount: function() {
    this._editor = AlloyEditor.editable(this.props.id, this.props.alloyEditorConfig);
    CKEDITOR.instances[this.props.id].on('blur', this.props.onBlur)
  }
)};

And then in my event handler to read the data:

CKEDITOR.instances[this.props.id].getData();

However, this obviously isn't very React-y since this way it's impossible to treat the editable text as component state. I would rather do something like this.props.text and have AlloyEditor return the text.

Would you please be so kind to add an example of how to listen to events and access text state in a React way?

If this is not possible in the current version, I might have a shot add creating a reusable AlloyEditor mixin that glues CKEditor and React together even more :)

Hi I want to add "Source dialog" plugin,

I have downloaded the plugin but where i need to keep here to reflect the same.

i added the config as below
alloyEditorConfig : {extraPlugins: AlloyEditor.Core.ATTRS.extraPlugins.value + ',sourcedialog',toolbars:alloyToolBar},

But i am getting below error
Uncaught Error: [CKEDITOR.resourceManager.load] Resource name "dialog" was not found at "file:///C:/Users/sesa407391/Downloads/alloyeditor-react-component-master/dist/alloyeditor/plugins/dialog/plugin.js?t=H8DA".
at CKEDITOR.resourceManager. (vendor.bundle.js:22290)
at f (vendor.bundle.js:22285)
at Array.D (vendor.bundle.js:22285)
at w (vendor.bundle.js:22285)
at HTMLScriptElement.A.CKEDITOR.env.ie.f.$.onerror (vendor.bundle.js:22286)

Hi all, I tried to use this sample with the latest version of alloyeditor and react, which are:
"alloyeditor": "^2.0.0-alpha.1", "react": "^16.7.0", "react-dom": "^16.7.0",

Due to a 'window' undefined error, I only loaded alloyeditor.js in client side. This sample went up and running well.

class AlloyEditorComponent extends React.Component {
  componentDidMount() {
      const AlloyEditor = require("alloyeditor").default;
      console.log("AE: ", AlloyEditor);

      const { container, alloyEditorConfig } = this.props;
      this._editor = AlloyEditor.editable(container, alloyEditorConfig);
  }

However, when I implemented this in my project, the toolbar doesn't show up, while the editor is functioning (including formatting, bullet, numbering...). There's an error message in Console: Uncaught TypeError: AlloyEditor.fire is not a function. I compared the console output of "AE: " in the code above and noticed a difference:

In this sample, the fire of AlloyEditor is:

but my version shows:

It looks like AlloyEditor exports different code in two projects. What would cause such problem? My project use webpack, no gulp, and Server Side Rendering. (It's good enough if the Editor works in Browser side only.) Thanks for the help.

Hi!
When I use it, I encountered some problems:

Uncaught TypeError: Cannot set property 'dir' of undefined
Uncaught TypeError: Cannot read property 'add' of undefined

Uncaught SyntaxError: Unexpected token <

index.html

I used it
import AlloyEditorComponent from './AlloyEditor'
<AlloyEditorComponent container='editable' />

and index.html

<script> window.ALLOYEDITOR_BASEPATH = 'alloyeditor/'; window.CKEDITOR_BASEPATH = 'alloyeditor/'; </script>
<link href="alloyeditor/assets/alloy-editor-ocean-min.css" rel="stylesheet">

I'm just trying to add some class to the editor when it is active so that the user knows that he is editing but I can't find a way to easily plug events on the editor (I never used React and wanted to avoid getting into it just for that).
So is there some basic events triggered by the editor like "focus" or "click", even some kind of "active" state would work for me?

Thanks for the answer and the great tool!

Hi @ipeychev ,

Can you provide some guidelines on how I can use this component as direct plugin.

In index.html we have two globals pointing alloyeditor to the base path. Is there a way of providing the same information without the use of window globals?

I install the plugin on a static HTML page, the editor is working PERFECTLY, it's save my ass!
But for some reason, the toolbar is not showing, since yesterday i`m debuing the code but nothing...
Can you guide me in the configuration?

After cloning and installing dependencies (which have many vulnerabilities btw), I tried to compile the example and got the following output:

» npm run build

> [email protected] build /Users/koryschneider/git/alloyeditor-react-component
> gulp build

fs.js:35
} = primordials;
    ^

ReferenceError: primordials is not defined
    at fs.js:35:5
    at req_ (/Users/koryschneider/git/alloyeditor-react-component/node_modules/natives/index.js:143:24)
    at Object.req [as require] (/Users/koryschneider/git/alloyeditor-react-component/node_modules/natives/index.js:55:10)
    at Object.<anonymous> (/Users/koryschneider/git/alloyeditor-react-component/node_modules/graceful-fs/fs.js:1:37)
    at Module._compile (internal/modules/cjs/loader.js:1133:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10)
    at Module.load (internal/modules/cjs/loader.js:977:32)
    at Function.Module._load (internal/modules/cjs/loader.js:877:14)
    at Module.require (internal/modules/cjs/loader.js:1019:19)
    at require (internal/modules/cjs/helpers.js:77:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `gulp build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/koryschneider/.npm/_logs/2020-10-07T21_03_32_367Z-debug.log

Side note, the section in the alloy editor documentation which references this repository should link to this repository. That page even says "Talk is cheap. Show me the code" but does not show any code at all.

Hi!
https://github.com/ipeychev/alloyeditor-react-component/blob/master/dist/alloyeditor/assets/alloy-editor-ocean.css#L7 :

@font-face {
  ...
  url('fonts/alloyeditor-ocean.svg#alloyeditor-ocean') format('svg');
}

Could you please either provide this file or remove that line, otherwise webpack-isomorphic-tools complains that the file doesn't exists, and indeed, I don't see it in the fonts folder https://github.com/ipeychev/alloyeditor-react-component/tree/master/dist/alloyeditor/assets/fonts.

I'm trying to incorporate Alloy into a React app using webpack / npm.
All is fine though I can't make it 'find' the CK editor using the paths you set up as global variables.
The alloyeditor directory is in node_modules and I rather not include a whole alloy dir inside my project in the same way the example is showing.
Any ideas on how this can work?

This approach of hardcoding the paths doesn't seem to work with React Router 💔

Anyone got an example project that solves this issue?

How can I make a all-in-one React component with Alloyeditor, but without

  window.ALLOYEDITOR_BASEPATH = 'alloyeditor/';

	window.CKEDITOR_BASEPATH = 'alloyeditor/';

Hi guys, I need some help :

Uncaught TypeError: Cannot read property 'focus' of undefined
    at Constructor.focus............

I'm trying to find what is this error, my text color changes when I click on the color button but I have always this error (even if the plugins works well).

Thanks in advance for help.

I have installed alloy editor and it's working fine (ie content becomes editable and I can click on toolbar buttons to successfully apply formatting) however the icons are not displaying so I see strange symbols on the toolbar (see screenshot below).

There are no errors in the console. Has anyone encountered this before? Any ideas on how to solve?