How could I use ckeditor with Angular2 component?
Doing something like:
import {Component} from 'angular2/core'
#Component({
selector: 'e',
template: `
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script>
CKEDITOR.replace( 'editor1' );
</script>
`
})
export class E {
}
and printing it in index.html like:
<html>
<head>
<title>Hello</title>
<script src="../ckeditor/ckeditor.js"></script>
<script src="../systemjs/dist/system.src.js"></script>
<script src="../es6-shim/es6-shim.js"></script>
<script src="../angular2/bundles/angular2-polyfills.js"></script>
<script src="../rxjs/bundles/Rx.js"></script>
<script src="../angular2/bundles/angular2.dev.js"></script>
<script src="../angular2/bundles/router.dev.js"></script>
<script src="../angular2/bundles/http.dev.js"></script>
<script src="http://fgnass.github.io/spin.js/spin.min.js"></script>
<script>
System.config({
packages: {
compiled: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('../compiled/boot')
.then(null, console.error.bind(console));
</script>
</head>
<body>
Hackathon incoming!
<e>Loading...</e>
</body>
</html>
doesn't work. It works good when I put all the textarea with script code in index.html but I really want to have it in component template. It's like the ckeditor doesn't see the textarea ID when it is in component.
How can I make ckeditor plugin working good with Angular2 component? Thank you
Don't add the script to your template. use this instead
import {Component} from 'angular2/core'
declare const window: any;
#Component({
selector: 'e',
template: `
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
`
})
export class E {
constructor(){}
ngOnInit(){
if(window.CKEDITOR) {
window.CKEDITOR.replace('editor1');
}
}
}
UPDATE:
Check angular2 lifecycle hooks, and since the components are javascript you can execute any script code from inside your component.
A better way,
implement a CKEDITOR component that will be used like this
<CKEditor [targetId]="editor1" [rows]="10" [cols]="80"> </CKEditor>
ckeditor.component.ts
import {Component, Input} from 'angular2/core';
declare const window: any;
#Component({
selector: 'CKEditor',
template: `
<textarea name="targetId" id="targetId" rows="rows" cols="cols">
This is my CKEditor component.
</textarea>
`
})
export class CKEditorComponent {
#Input() targetId;
#Input() rows = 10; //you can also give default values here
#Input() cols;
constructor(){}
ngOnInit(){
if(window.CKEDITOR) {
window.CKEDITOR.replace('editor1');
}
}
}
The best way,
Get the typescript definition file for CKEditor, I found it here.
Add it to your project, after that you will be able to use the library.
this is only for illustrating, not tested.
import * as CKEDITOR from 'CKEDITOR/PATH';
.
.
ngOnInit(){
CKEDITOR.replace( targetId );
}
Related
I am developing a single page application (SPA) using Laravel and VueJs. Where the index.blade.php page looks like:
<html>
<head>
<link rel="stylesheet" href="/css/app.css" />
</body>
<body>
<div id="app">
<layout></layout>
</div>
<script src="/js/app.js"></script>
</body>
</html>
The layout.vue component looks like:
<template>
<div>
<input type="text" #keyup="search" />
<router-view></router-view>
</div>
</template>
<script>
import router from 'router'
export default {
data() {
return {
popover: false
}
},
methods: {
search: function (e) {/*Ajax code to search*/}
}
}
</script>
Everything is working fine except slower page loading at first. I see a white page until javascript works. So I've decided to put some html code in index.blade.php. I want to put the html from layout.vue page to index.blade.php so that I can see the html layout before javascript loads. How can I properly merge layout.vue with index.blade.php so that #keyup method works?
<title>Laravel</title>
I use following
/ In app.js
import VueMeta from 'vue-meta'
Vue.use(VueMeta)
// in vue file
<template>
<div>
</div>
</template>
<script>
export default {
metaInfo: { title: 'Dashboard' },
};
</script>
It's change document title, not actual title tag (Source Code).
i want to change title also in source-code.(Ctrl+U);
You can use
document.title = 'Dashboard'
I followed this: https://www.codeproject.com/Articles/1181888/Angular-in-ASP-NET-MVC-Web-API-Part
Error:
My URL - - - > http://localhost/home
Server Error in '/' Application.
The resource cannot be found.
Description: HTTP 404. The resource you are looking for (or one of its
dependencies) could have been removed, had its name changed, or is
temporarily unavailable. Please review the following URL and make
sure that it is spelled correctly.
Requested URL: /home
Version Information: Microsoft .NET Framework Version:4.0.30319;
ASP.NET Version:4.7.2110.0
systemjs.config.js
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
'app': 'app',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: 'main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
appcomponent
import { Component } from "#angular/core"
#Component({
selector: "user-app",
template: `
<div>
<nav class='navbar navbar-inverse'>
<div class='container-fluid'>
<ul class='nav navbar-nav'>
<li><a [routerLink]="['home']">Home</a></li>
</ul>
</div>
</nav>
<div class='container'>
<router-outlet></router-outlet>
</div>
</div>
`
})
export class AppComponent {
}
app.routing
import { ModuleWithProviders } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { HomeComponent } from './Components/home.component';
const appRoutes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
app.module
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
_layout.cshtml
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="/systemjs.config.js"></script>
<script src="../node_modules/angular2/bundles/router.dev.js"></script>
<script>
System.import('app/main.js').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Need support please
in your systemjs.config.js change 'npm:': 'node_modules/' to 'npm:': '/node_modules/'
No issues in the code. All good. I was requesting a wrong url.
Also one small change in system.config.js
Instead of 'npm:': 'node_modules/', we need to use 'npm:': '/node_modules/'
I'm new in Polymer and I trying to do mobile app use Polymer and Cordova.
I use neon-animated-pages for pretty animation, and now I have some issue with iron-ajax. When I open project in browser on localhost:8080 all my pages already loaded and if I change page I want to make iron-ajax request. How can i do this?
example index.html
<dom-module id="my-app">
<template>
<style>
// some style
</style>
<app-header-layout fullbleed>
<app-header>
<app-toolbar>
<div main-title>Title</div>
<paper-input label="page" value="{{page::change}}"></paper-input>
<paper-icon-button icon="menu"></paper-icon-button>
</app-header>
<div class="content">
<neon-animated-pages id="page"
selected="{{page}}"
attrForSelected="index"
entry-animation="slide-from-right-animation"
exit-animation="slide-left-animation">
<neon-animatable index="0"><login-app name="login"></login-app></neon-animatable>
<neon-animatable index="1"><profile-page name="profile"></profile-page></neon-animatable>
<neon-animatable index="2"><secondary-page name="secondary"></secondary-page></neon-animatable>
</neon-animated-pages>
</div>
<footer>
© Polymer project
</footer>
</app-header-layout>
</template>
<script>
Polymer({
is: 'my-app',
behaviors: [GlobalsBehaviour],
properties: {
page: {
type: Number,
reflectToAttribute: true,
value: 0
}
}
});
</script>
And example some page with iron-ajax:
<dom-module id="secondary-page">
<template>
<style>
:host {
display: block;
}
</style>
<div>secondary PAGE</div>
<div>Var value - {{my}}</div>
<iron-ajax
id="login"
url="https://www.some.url/"
method="get"></iron-ajax>
</template>
<script>
Polymer({
is: 'secondary-page',
properties: {
my: {
type: String,
value: 'my'
}
}
});
</script>
I have just started trying out angular js and using the egghead.io videos. One of the samples is about routeProvider. I am using vs.net 2012 to run it but cant get it to display any of the templates or messages when I hit:
http://localhost/app.html/pizza
This is the sourcecode inside of app.html:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
// Create a new module
var app = angular.module("app", []);
app.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: "app.html",
controller: "AppCtrl"
})
.when('/pizza', {
template: "yum"
})
});
app.controller("AppCtrl", function ($scope) {
$scope.model = {
message: "this is my app"
}
});
</script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<div ng-app="app" ng-controller="AppCtrl">
</div>
Modified from JoeyP's post to make it work:
index.html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
// Create a new module
var app = angular.module("app", []);
app.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: "app.html",
controller: "AppCtrl"
})
.when('/pizza', {
templateUrl: "yum.html" // there was a typo here in the OP
})
.otherwise( {
redirectTo: '/'
});
});
app.controller("AppCtrl", function ($scope) {
$scope.message= "this is my app";
});
</script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<div ng-app="app">
<div ng-view></div>
</div>
app.html
<div>
Go get some pizza! {{message}}
</div>
yum.html
<p>
MMMM, pizza
more pizzaaaaaaaa
</p>
Note: The code need to be run on web-server (ex. Apache) to function.
app.html and yum.html are fetched by angular after the page has loaded. So in your example http://localhost/pizza should point to the page with the above code and yum.html (as well as app.html) should be located in the root of your project.
On load angular will download app.html if you hit "/" and yum.html if you hit "/pizza". Here's an example
index.html (excluding <html>,<head>,<body>, etc)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
// Create a new module
var app = angular.module("app", []);
app.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: "app.html",
controller: "AppCtrl"
})
.when('/pizza', {
template: "yum.html" // there was a typo here in the OP
})
});
app.controller("AppCtrl", function ($scope) {
$scope.model = {
message: "this is my app"
}
});
</script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<div ng-app="app">
<div ng-view></div>
</div>
app.html
<div>
<p ng-bind="model.app"><p>
<a ng-href="/pizza">Go get some pizza!</a>
</div>
yum.html
<p>
MMMM, pizza
</p>
The ng-controller attribute isn't needed because you defined the controllers in the routes. You do need the ng-view attribute somewhere in the main html file so angular knows where to insert the template.
John from egghead.io really needs to update this section of his tutorial.
See this answer:
Failed to instantiate module [$injector:unpr] Unknown provider: $routeProvider
you need to add this dependency:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
var app = angular.module("app", ['ngRoute']);
P.S. template: "yum" is totally valid, as in template: "<p>yum</p>"
(JoeyP thinks you're trying to do templateUrl: "yum.html")