From b1940b6b34606cabec2851b951afecef27667594 Mon Sep 17 00:00:00 2001 From: Geet06 <46786109+Geet06@users.noreply.github.com> Date: Fri, 19 Apr 2019 00:37:21 +0530 Subject: [PATCH 1/2] Aurelia-V.3 changes --- README.md | 96 +++++--------------------------- dist/amd/froala-editor.html | 5 +- dist/amd/froala-editor.js | 57 ++++++++++++------- dist/commonjs/froala-editor.html | 5 +- dist/commonjs/froala-editor.js | 53 +++++++++++------- dist/es2015/froala-editor.html | 5 +- dist/es2015/froala-editor.js | 31 +++++++---- dist/system/froala-editor.html | 5 +- dist/system/froala-editor.js | 53 ++++++++++-------- package-lock.json | 20 +------ src/froala-editor.js | 32 ++++++----- 11 files changed, 170 insertions(+), 192 deletions(-) diff --git a/README.md b/README.md index 65924de..6b8e878 100644 --- a/README.md +++ b/README.md @@ -13,8 +13,7 @@ 3. [Integration](#integration) 1. [With Aurelia CLI](#with-aurelia-cli) 2. [With Webpack](#with-webpack) - 3. [With Easy Webpack](#with-easy-webpack) - 4. [With JSPM](#with-jspm) + 3. [With JSPM](#with-jspm) 4. [Usage](#usage) 5. [License](#license) @@ -58,9 +57,6 @@ npm install aurelia-froala-editor --save ```javascript -// Editor files. -import "froala-editor/js/froala_editor.pkgd.min"; - ... // Use the aurelia-froala-editor plugin. @@ -117,16 +113,7 @@ aurelia.use.plugin('aurelia-froala-editor'); "path": "../node_modules/font-awesome/css", "main": "font-awesome.css" }, -"jquery", -{ - "name": "froala-editor", - "path": "../node_modules/froala-editor", - "main": "js/froala_editor.min", - "resources": [ - "./js/**/*.{js}", - "./css/**/*.{css}" - ] -}, + { "name": "aurelia-froala-editor", "path": "../node_modules/aurelia-froala-editor/dist/amd", @@ -136,7 +123,6 @@ aurelia.use.plugin('aurelia-froala-editor'); "froala-editor.html" ], "deps": [ - "jquery", "froala-editor", "font-awesome" ] @@ -256,9 +242,20 @@ aurelia.use.plugin(PLATFORM.moduleName('aurelia-froala-editor')); ```js const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia-webpack-plugin'); - + resolve: { + extensions: ['.js'], + modules:[srcDir,'../node_modules/froala-editor/js','node_modules'], + alias: { + "FroalaEditor": 'froala_editor.pkgd.min.js' + } + }, plugins: [ new AureliaPlugin(), + new ProvidePlugin({ + FroalaEditor: 'froala_editor.pkgd.min.js', + 'Promise': 'bluebird', + Popper: ['popper.js', 'default'] // Bootstrap 4 Dependency. + }), new ModuleDependenciesPlugin({ "aurelia-froala-editor": [ './froala-editor' ], "parent-module": [ "child-module" ], @@ -274,68 +271,6 @@ npm run start -### With Easy Webpack - -To configure your project with Easy Webpack, follow the resources from Aurelia Docs: http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/setup-webpack/2 . - -```bash -git clone git@github.com:aurelia/skeleton-navigation.git -cd skeleton-navigation/skeleton-esnext-webpack -git reset --hard 8997a6f87339a2702f77aeaab7ede5bffe94437f -npm install -``` - -#### Add aurelia-froala-editor - -- Install the aurelia plugin - -```bash -npm install aurelia-froala-editor --save -``` - -- In your `src/main.js` or `src/main.ts` file add: - -```javascript -import { PLATFORM } from "aurelia-pal"; - -// Editor files. -import "froala-editor/js/froala_editor.pkgd.min"; - -... - -// Use the aurelia-froala-editor plugin. -aurelia.use.plugin(PLATFORM.moduleName('aurelia-froala-editor')); -``` - -- In your `src/app.html` include CSS files and Froala Editor component: - -```html - - - - -``` - -- In `package.json` file include the Aurelia Froala Editor plugin: - -```json -"aurelia": { - "build": { - "resources": [ - "aurelia-froala-editor/froala-editor" - ] - } -} -``` - -#### Run application - -```bash -npm run start -``` - - - ### With JSPM #### Installing aurelia-cli @@ -365,9 +300,6 @@ jspm install npm:froala-editor -o "{format: 'global'}" - In your `src/main.js` or `src/main.ts` file add: ```javascript -// Import jQuery -import * as $ from 'jquery'; - // Import Editor. import * as froala from 'froala-editor/js/froala_editor.pkgd.min.js'; diff --git a/dist/amd/froala-editor.html b/dist/amd/froala-editor.html index 0ada1d8..34cc254 100644 --- a/dist/amd/froala-editor.html +++ b/dist/amd/froala-editor.html @@ -1 +1,4 @@ - + diff --git a/dist/amd/froala-editor.js b/dist/amd/froala-editor.js index 73b23a7..9dbc3d5 100644 --- a/dist/amd/froala-editor.js +++ b/dist/amd/froala-editor.js @@ -1,10 +1,18 @@ -define(['exports', 'aurelia-framework', 'aurelia-binding', './froala-editor-config'], function (exports, _aureliaFramework, _aureliaBinding, _froalaEditorConfig) { +define(['exports', 'aurelia-framework', 'aurelia-binding', './froala-editor-config', 'froala-editor/js/froala_editor.pkgd.min.js'], function (exports, _aureliaFramework, _aureliaBinding, _froalaEditorConfig, _froala_editorPkgdMin) { 'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); - exports.FroalaEditor = undefined; + exports.FroalaEditor1 = undefined; + + var _froala_editorPkgdMin2 = _interopRequireDefault(_froala_editorPkgdMin); + + function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { + default: obj + }; + } function _initDefineProp(target, property, descriptor, context) { if (!descriptor) return; @@ -57,11 +65,11 @@ define(['exports', 'aurelia-framework', 'aurelia-binding', './froala-editor-conf var _dec, _dec2, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3; - var FroalaEditor = exports.FroalaEditor = (_dec = (0, _aureliaFramework.customElement)('froala-editor'), _dec2 = (0, _aureliaFramework.inject)(Element, _froalaEditorConfig.Config, _aureliaBinding.ObserverLocator), _dec(_class = _dec2(_class = (_class2 = function () { - function FroalaEditor(element, config, observerLocator) { + var FroalaEditor1 = exports.FroalaEditor1 = (_dec = (0, _aureliaFramework.customElement)('froala-editor'), _dec2 = (0, _aureliaFramework.inject)(Element, _froalaEditorConfig.Config, _aureliaBinding.ObserverLocator), _dec(_class = _dec2(_class = (_class2 = function () { + function FroalaEditor1(element, config, observerLocator) { var _this = this; - _classCallCheck(this, FroalaEditor); + _classCallCheck(this, FroalaEditor1); _initDefineProp(this, 'value', _descriptor, this); @@ -74,27 +82,31 @@ define(['exports', 'aurelia-framework', 'aurelia-binding', './froala-editor-conf this.config = config.options(); this.subscriptions = [observerLocator.getObserver(this, 'value').subscribe(function (newValue, oldValue) { - if (_this.instance && _this.instance.froalaEditor('html.get') != newValue) { - _this.instance.froalaEditor('html.set', newValue); + if (_this.instance && _this.instance.html.get() != newValue) { + _this.instance.html(newValue); } })]; } - FroalaEditor.prototype.tearUp = function tearUp() { + FroalaEditor1.prototype.tearUp = function tearUp() { var _this2 = this; - this.instance = $(this.element.getElementsByTagName("div")[0]); + if (this.config.iframe) { + this.instance = this.element.getElementsByTagName('textarea')[0]; + } else { + this.instance = this.element.getElementsByTagName('div')[0]; + } - if (this.instance.data('froala.editor')) { + if (this.instance['data-froala.editor']) { return; } - this.instance.html(this.value); + this.instance.innerHTML = this.value; if (this.eventHandlers && this.eventHandlers.length != 0) { var _loop = function _loop(eventHandlerName) { var handler = _this2.eventHandlers[eventHandlerName]; - _this2.instance.on('froalaEditor.' + eventHandlerName, function () { + _this2.instance.addEventListener('' + eventHandlerName, function () { var p = arguments; return handler.apply(this, p); }); @@ -104,30 +116,33 @@ define(['exports', 'aurelia-framework', 'aurelia-binding', './froala-editor-conf _loop(eventHandlerName); } } - this.instance.on('froalaEditor.contentChanged froalaEditor.blur', function (e, editor) { + this.instance.addEventListener('contentChanged', function (e, editor) { + return _this2.value = editor.html.get(); + }); + this.instance.addEventListener('blur', function (e, editor) { return _this2.value = editor.html.get(); }); - this.instance.froalaEditor(Object.assign({}, this.config)); + this.instance = new _froala_editorPkgdMin2.default('#' + this.element.id, Object.assign({}, this.config)); }; - FroalaEditor.prototype.tearDown = function tearDown() { - if (this.instance && this.instance.data('froala.editor')) { - this.instance.froalaEditor('destroy'); + FroalaEditor1.prototype.tearDown = function tearDown() { + if (this.instance && this.instance['data-froala.editor']) { + this.instance.destroy(); } this.instance = null; }; - FroalaEditor.prototype.attached = function attached() { + FroalaEditor1.prototype.attached = function attached() { this.tearUp(); }; - FroalaEditor.prototype.detached = function detached() { + FroalaEditor1.prototype.detached = function detached() { this.tearDown(); }; - return FroalaEditor; + return FroalaEditor1; }(), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, 'value', [_aureliaFramework.bindable], { enumerable: true, initializer: null @@ -142,4 +157,4 @@ define(['exports', 'aurelia-framework', 'aurelia-binding', './froala-editor-conf return {}; } })), _class2)) || _class) || _class); -}); +}); \ No newline at end of file diff --git a/dist/commonjs/froala-editor.html b/dist/commonjs/froala-editor.html index 0ada1d8..34cc254 100644 --- a/dist/commonjs/froala-editor.html +++ b/dist/commonjs/froala-editor.html @@ -1 +1,4 @@ - + diff --git a/dist/commonjs/froala-editor.js b/dist/commonjs/froala-editor.js index d8cf3cd..d398d2a 100644 --- a/dist/commonjs/froala-editor.js +++ b/dist/commonjs/froala-editor.js @@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true }); -exports.FroalaEditor = undefined; +exports.FroalaEditor1 = undefined; var _dec, _dec2, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3; @@ -13,6 +13,12 @@ var _aureliaBinding = require('aurelia-binding'); var _froalaEditorConfig = require('./froala-editor-config'); +var _froala_editorPkgdMin = require('froala-editor/js/froala_editor.pkgd.min.js'); + +var _froala_editorPkgdMin2 = _interopRequireDefault(_froala_editorPkgdMin); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + function _initDefineProp(target, property, descriptor, context) { if (!descriptor) return; Object.defineProperty(target, property, { @@ -58,11 +64,11 @@ function _initializerWarningHelper(descriptor, context) { throw new Error('Decorating class property failed. Please ensure that transform-class-properties is enabled.'); } -var FroalaEditor = exports.FroalaEditor = (_dec = (0, _aureliaFramework.customElement)('froala-editor'), _dec2 = (0, _aureliaFramework.inject)(Element, _froalaEditorConfig.Config, _aureliaBinding.ObserverLocator), _dec(_class = _dec2(_class = (_class2 = function () { - function FroalaEditor(element, config, observerLocator) { +var FroalaEditor1 = exports.FroalaEditor1 = (_dec = (0, _aureliaFramework.customElement)('froala-editor'), _dec2 = (0, _aureliaFramework.inject)(Element, _froalaEditorConfig.Config, _aureliaBinding.ObserverLocator), _dec(_class = _dec2(_class = (_class2 = function () { + function FroalaEditor1(element, config, observerLocator) { var _this = this; - _classCallCheck(this, FroalaEditor); + _classCallCheck(this, FroalaEditor1); _initDefineProp(this, 'value', _descriptor, this); @@ -75,27 +81,31 @@ var FroalaEditor = exports.FroalaEditor = (_dec = (0, _aureliaFramework.customEl this.config = config.options(); this.subscriptions = [observerLocator.getObserver(this, 'value').subscribe(function (newValue, oldValue) { - if (_this.instance && _this.instance.froalaEditor('html.get') != newValue) { - _this.instance.froalaEditor('html.set', newValue); + if (_this.instance && _this.instance.html.get() != newValue) { + _this.instance.html(newValue); } })]; } - FroalaEditor.prototype.tearUp = function tearUp() { + FroalaEditor1.prototype.tearUp = function tearUp() { var _this2 = this; - this.instance = $(this.element.getElementsByTagName("div")[0]); + if (this.config.iframe) { + this.instance = this.element.getElementsByTagName('textarea')[0]; + } else { + this.instance = this.element.getElementsByTagName('div')[0]; + } - if (this.instance.data('froala.editor')) { + if (this.instance['data-froala.editor']) { return; } - this.instance.html(this.value); + this.instance.innerHTML = this.value; if (this.eventHandlers && this.eventHandlers.length != 0) { var _loop = function _loop(eventHandlerName) { var handler = _this2.eventHandlers[eventHandlerName]; - _this2.instance.on('froalaEditor.' + eventHandlerName, function () { + _this2.instance.addEventListener('' + eventHandlerName, function () { var p = arguments; return handler.apply(this, p); }); @@ -105,30 +115,33 @@ var FroalaEditor = exports.FroalaEditor = (_dec = (0, _aureliaFramework.customEl _loop(eventHandlerName); } } - this.instance.on('froalaEditor.contentChanged froalaEditor.blur', function (e, editor) { + this.instance.addEventListener('contentChanged', function (e, editor) { + return _this2.value = editor.html.get(); + }); + this.instance.addEventListener('blur', function (e, editor) { return _this2.value = editor.html.get(); }); - this.instance.froalaEditor(Object.assign({}, this.config)); + this.instance = new _froala_editorPkgdMin2.default('#' + this.element.id, Object.assign({}, this.config)); }; - FroalaEditor.prototype.tearDown = function tearDown() { - if (this.instance && this.instance.data('froala.editor')) { - this.instance.froalaEditor('destroy'); + FroalaEditor1.prototype.tearDown = function tearDown() { + if (this.instance && this.instance['data-froala.editor']) { + this.instance.destroy(); } this.instance = null; }; - FroalaEditor.prototype.attached = function attached() { + FroalaEditor1.prototype.attached = function attached() { this.tearUp(); }; - FroalaEditor.prototype.detached = function detached() { + FroalaEditor1.prototype.detached = function detached() { this.tearDown(); }; - return FroalaEditor; + return FroalaEditor1; }(), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, 'value', [_aureliaFramework.bindable], { enumerable: true, initializer: null @@ -142,4 +155,4 @@ var FroalaEditor = exports.FroalaEditor = (_dec = (0, _aureliaFramework.customEl initializer: function initializer() { return {}; } -})), _class2)) || _class) || _class); +})), _class2)) || _class) || _class); \ No newline at end of file diff --git a/dist/es2015/froala-editor.html b/dist/es2015/froala-editor.html index 0ada1d8..34cc254 100644 --- a/dist/es2015/froala-editor.html +++ b/dist/es2015/froala-editor.html @@ -1 +1,4 @@ - + diff --git a/dist/es2015/froala-editor.js b/dist/es2015/froala-editor.js index 1502e1d..103f289 100644 --- a/dist/es2015/froala-editor.js +++ b/dist/es2015/froala-editor.js @@ -48,7 +48,9 @@ import { ObserverLocator } from "aurelia-binding"; import { Config } from './froala-editor-config'; -export let FroalaEditor = (_dec = customElement('froala-editor'), _dec2 = inject(Element, Config, ObserverLocator), _dec(_class = _dec2(_class = (_class2 = class FroalaEditor { +import FroalaEditor from 'froala-editor/js/froala_editor.pkgd.min.js'; + +export let FroalaEditor1 = (_dec = customElement('froala-editor'), _dec2 = inject(Element, Config, ObserverLocator), _dec(_class = _dec2(_class = (_class2 = class FroalaEditor1 { constructor(element, config, observerLocator) { _initDefineProp(this, 'value', _descriptor, this); @@ -62,38 +64,43 @@ export let FroalaEditor = (_dec = customElement('froala-editor'), _dec2 = inject this.config = config.options(); this.subscriptions = [observerLocator.getObserver(this, 'value').subscribe((newValue, oldValue) => { - if (this.instance && this.instance.froalaEditor('html.get') != newValue) { - this.instance.froalaEditor('html.set', newValue); + if (this.instance && this.instance.html.get() != newValue) { + this.instance.html(newValue); } })]; } tearUp() { - this.instance = $(this.element.getElementsByTagName("div")[0]); + if (this.config.iframe) { + this.instance = this.element.getElementsByTagName('textarea')[0]; + } else { + this.instance = this.element.getElementsByTagName('div')[0]; + } - if (this.instance.data('froala.editor')) { + if (this.instance['data-froala.editor']) { return; } - this.instance.html(this.value); + this.instance.innerHTML = this.value; if (this.eventHandlers && this.eventHandlers.length != 0) { for (let eventHandlerName in this.eventHandlers) { let handler = this.eventHandlers[eventHandlerName]; - this.instance.on(`froalaEditor.${eventHandlerName}`, function () { + this.instance.addEventListener(`${eventHandlerName}`, function () { let p = arguments; return handler.apply(this, p); }); } } - this.instance.on('froalaEditor.contentChanged froalaEditor.blur', (e, editor) => this.value = editor.html.get()); + this.instance.addEventListener('contentChanged', (e, editor) => this.value = editor.html.get()); + this.instance.addEventListener('blur', (e, editor) => this.value = editor.html.get()); - this.instance.froalaEditor(Object.assign({}, this.config)); + this.instance = new FroalaEditor(`#${this.element.id}`, Object.assign({}, this.config)); } tearDown() { - if (this.instance && this.instance.data('froala.editor')) { - this.instance.froalaEditor('destroy'); + if (this.instance && this.instance['data-froala.editor']) { + this.instance.destroy(); } this.instance = null; @@ -119,4 +126,4 @@ export let FroalaEditor = (_dec = customElement('froala-editor'), _dec2 = inject initializer: function () { return {}; } -})), _class2)) || _class) || _class); +})), _class2)) || _class) || _class); \ No newline at end of file diff --git a/dist/system/froala-editor.html b/dist/system/froala-editor.html index 0ada1d8..34cc254 100644 --- a/dist/system/froala-editor.html +++ b/dist/system/froala-editor.html @@ -1 +1,4 @@ - + diff --git a/dist/system/froala-editor.js b/dist/system/froala-editor.js index 1ec1d3d..4c96b3a 100644 --- a/dist/system/froala-editor.js +++ b/dist/system/froala-editor.js @@ -1,9 +1,9 @@ 'use strict'; -System.register(['aurelia-framework', 'aurelia-binding', './froala-editor-config'], function (_export, _context) { +System.register(['aurelia-framework', 'aurelia-binding', './froala-editor-config', 'froala-editor/js/froala_editor.pkgd.min.js'], function (_export, _context) { "use strict"; - var inject, customElement, bindable, ObserverLocator, Config, _dec, _dec2, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, FroalaEditor; + var inject, customElement, bindable, ObserverLocator, Config, FroalaEditor, _dec, _dec2, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, FroalaEditor1; function _initDefineProp(target, property, descriptor, context) { if (!descriptor) return; @@ -63,13 +63,15 @@ System.register(['aurelia-framework', 'aurelia-binding', './froala-editor-config ObserverLocator = _aureliaBinding.ObserverLocator; }, function (_froalaEditorConfig) { Config = _froalaEditorConfig.Config; + }, function (_froalaEditorJsFroala_editorPkgdMinJs) { + FroalaEditor = _froalaEditorJsFroala_editorPkgdMinJs.default; }], execute: function () { - _export('FroalaEditor', FroalaEditor = (_dec = customElement('froala-editor'), _dec2 = inject(Element, Config, ObserverLocator), _dec(_class = _dec2(_class = (_class2 = function () { - function FroalaEditor(element, config, observerLocator) { + _export('FroalaEditor1', FroalaEditor1 = (_dec = customElement('froala-editor'), _dec2 = inject(Element, Config, ObserverLocator), _dec(_class = _dec2(_class = (_class2 = function () { + function FroalaEditor1(element, config, observerLocator) { var _this = this; - _classCallCheck(this, FroalaEditor); + _classCallCheck(this, FroalaEditor1); _initDefineProp(this, 'value', _descriptor, this); @@ -82,27 +84,31 @@ System.register(['aurelia-framework', 'aurelia-binding', './froala-editor-config this.config = config.options(); this.subscriptions = [observerLocator.getObserver(this, 'value').subscribe(function (newValue, oldValue) { - if (_this.instance && _this.instance.froalaEditor('html.get') != newValue) { - _this.instance.froalaEditor('html.set', newValue); + if (_this.instance && _this.instance.html.get() != newValue) { + _this.instance.html(newValue); } })]; } - FroalaEditor.prototype.tearUp = function tearUp() { + FroalaEditor1.prototype.tearUp = function tearUp() { var _this2 = this; - this.instance = $(this.element.getElementsByTagName("div")[0]); + if (this.config.iframe) { + this.instance = this.element.getElementsByTagName('textarea')[0]; + } else { + this.instance = this.element.getElementsByTagName('div')[0]; + } - if (this.instance.data('froala.editor')) { + if (this.instance['data-froala.editor']) { return; } - this.instance.html(this.value); + this.instance.innerHTML = this.value; if (this.eventHandlers && this.eventHandlers.length != 0) { var _loop = function _loop(eventHandlerName) { var handler = _this2.eventHandlers[eventHandlerName]; - _this2.instance.on('froalaEditor.' + eventHandlerName, function () { + _this2.instance.addEventListener('' + eventHandlerName, function () { var p = arguments; return handler.apply(this, p); }); @@ -112,30 +118,33 @@ System.register(['aurelia-framework', 'aurelia-binding', './froala-editor-config _loop(eventHandlerName); } } - this.instance.on('froalaEditor.contentChanged froalaEditor.blur', function (e, editor) { + this.instance.addEventListener('contentChanged', function (e, editor) { + return _this2.value = editor.html.get(); + }); + this.instance.addEventListener('blur', function (e, editor) { return _this2.value = editor.html.get(); }); - this.instance.froalaEditor(Object.assign({}, this.config)); + this.instance = new FroalaEditor('#' + this.element.id, Object.assign({}, this.config)); }; - FroalaEditor.prototype.tearDown = function tearDown() { - if (this.instance && this.instance.data('froala.editor')) { - this.instance.froalaEditor('destroy'); + FroalaEditor1.prototype.tearDown = function tearDown() { + if (this.instance && this.instance['data-froala.editor']) { + this.instance.destroy(); } this.instance = null; }; - FroalaEditor.prototype.attached = function attached() { + FroalaEditor1.prototype.attached = function attached() { this.tearUp(); }; - FroalaEditor.prototype.detached = function detached() { + FroalaEditor1.prototype.detached = function detached() { this.tearDown(); }; - return FroalaEditor; + return FroalaEditor1; }(), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, 'value', [bindable], { enumerable: true, initializer: null @@ -151,7 +160,7 @@ System.register(['aurelia-framework', 'aurelia-binding', './froala-editor-config } })), _class2)) || _class) || _class)); - _export('FroalaEditor', FroalaEditor); + _export('FroalaEditor1', FroalaEditor1); } }; -}); +}); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 66e8062..d8ee4f2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2045,7 +2045,6 @@ "conventional-changelog-ember": "^2.0.1", "conventional-changelog-eslint": "^3.0.0", "conventional-changelog-express": "^2.0.0", - "conventional-changelog-jquery": "^0.1.0", "conventional-changelog-jscs": "^0.1.0", "conventional-changelog-jshint": "^2.0.0", "conventional-changelog-preset-loader": "^2.0.1" @@ -2135,15 +2134,7 @@ "q": "^1.5.1" } }, - "conventional-changelog-jquery": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/conventional-changelog-jquery/-/conventional-changelog-jquery-0.1.0.tgz", - "integrity": "sha1-Agg5cWLjhGmG5xJztsecW1+A9RA=", - "dev": true, - "requires": { - "q": "^1.4.1" - } - }, + "conventional-changelog-jscs": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/conventional-changelog-jscs/-/conventional-changelog-jscs-0.1.0.tgz", @@ -3815,8 +3806,7 @@ "resolved": "https://registry.npmjs.org/froala-editor/-/froala-editor-2.8.5.tgz", "integrity": "sha512-pjijB1ObCvzFr5+iV91Pl40W4oKT1wKZ4zuNoWKQUvPhiHZe2yYaD+dgBUklzxttpe9TD9RvEygPo2JytSN/2g==", "requires": { - "font-awesome": ">=4.4.0", - "jquery": ">=1.11.0" + "font-awesome": ">=4.4.0" } }, "fs-access": { @@ -6442,11 +6432,7 @@ "integrity": "sha512-pa9tbBWgU0EE4SWgc85T4sa886ufuQdsgruQANhECYjwqgV4z7Vw/499aCaP8ZH79JDS4vhm8doDG9HO4+e4sA==", "dev": true }, - "jquery": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz", - "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==" - }, + "js-tokens": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", diff --git a/src/froala-editor.js b/src/froala-editor.js index d5814a7..b0b29f2 100644 --- a/src/froala-editor.js +++ b/src/froala-editor.js @@ -3,9 +3,12 @@ import {ObserverLocator} from "aurelia-binding"; import {Config} from './froala-editor-config'; +// Import Froala Editor +import FroalaEditor from 'froala-editor/js/froala_editor.pkgd.min.js' + @customElement('froala-editor') @inject(Element, Config, ObserverLocator) -export class FroalaEditor { +export class FroalaEditor1 { @bindable value; @bindable config = {} @bindable eventHandlers = {} @@ -25,52 +28,53 @@ export class FroalaEditor { observerLocator .getObserver(this, 'value') .subscribe((newValue, oldValue) => { - if (this.instance && this.instance.froalaEditor('html.get') != newValue) { - this.instance.froalaEditor('html.set', newValue); + if (this.instance && this.instance.html.get() != newValue) { + this.instance.html(newValue); } }) ]; } // Starting poing. - tearUp () { + tearUp () { // Get element. if (this.config.iframe) { - this.instance = $(this.element.getElementsByTagName('textarea')[0]); + this.instance = this.element.getElementsByTagName('textarea')[0]; } else { - this.instance = $(this.element.getElementsByTagName('div')[0]); + this.instance = this.element.getElementsByTagName('div')[0]; } // Check if editor isn't already initialized. - if (this.instance.data('froala.editor')) { + if (this.instance['data-froala.editor']) { return; } // Set the HTML for the inner element. - this.instance.html(this.value); + this.instance.innerHTML = this.value; // Set events. if (this.eventHandlers && this.eventHandlers.length != 0) { for(let eventHandlerName in this.eventHandlers) { let handler = this.eventHandlers[eventHandlerName]; - this.instance.on(`froalaEditor.${eventHandlerName}`, function() { + this.instance.addEventListener(`${eventHandlerName}`, function() { let p = arguments; return handler.apply(this, p) }); } } - this.instance.on('froalaEditor.contentChanged froalaEditor.blur', (e, editor) => this.value = editor.html.get()); + this.instance.addEventListener('contentChanged', (e, editor) => this.value = editor.html.get()); + this.instance.addEventListener('blur', (e, editor) => this.value = editor.html.get()) // Initialize editor. - this.instance.froalaEditor(Object.assign({}, this.config)); + this.instance = new FroalaEditor(`#${this.element.id}`, Object.assign({}, this.config)); } // Destroy. tearDown () { - if (this.instance && this.instance.data('froala.editor')) { - this.instance.froalaEditor('destroy'); + if (this.instance && this.instance['data-froala.editor']) { + this.instance.destroy(); } this.instance = null; @@ -85,4 +89,4 @@ export class FroalaEditor { detached () { this.tearDown(); } -} \ No newline at end of file +} From e0dff24e9e8aceb9f5437d9542f9fcb70e8483f2 Mon Sep 17 00:00:00 2001 From: Geet06 <46786109+Geet06@users.noreply.github.com> Date: Fri, 19 Apr 2019 00:53:05 +0530 Subject: [PATCH 2/2] Removed pkgd.min file from jspm documentation --- README.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/README.md b/README.md index 6b8e878..a825c0c 100644 --- a/README.md +++ b/README.md @@ -300,10 +300,6 @@ jspm install npm:froala-editor -o "{format: 'global'}" - In your `src/main.js` or `src/main.ts` file add: ```javascript -// Import Editor. -import * as froala from 'froala-editor/js/froala_editor.pkgd.min.js'; - -... // Use the aurelia-froala-editor plugin. aurelia.use.plugin('aurelia-froala-editor');