Is there anyway we can add a custom toolbar in Angular code?
https://www.tinymce.com/docs/demo/custom-toolbar-menu-button/
This is the link to custom toolbar.
I need to get this in Angular5.
The answer from Michael is right but I have found necessary to be in the appropriate scope to define the callback function of the button. I have defined the configuration in the environment, as suggested above. The button functionality is initialised in the constructor of the component instead so I do have full access to my components variables and methods.
In environment.ts:
tinyMceOptions: {
toolbar: 'repo'
},
In Component.ts:
export class MyComponent implements OnInit{
tinymceOptions = environment.tinyMceOptions;
constructor() {
let component = this;
this.tinymceOptions["setup"] = function setup(editor: any) {
function repo() {
component.myfunction()
}
editor.addButton('repo', {
icon: 'browse',
tooltip: "Browse Document Repository",
onclick: repo
});
};
}
}
You can pass your own configuration to the editor via our component for integrating TinyMCE into Angular:
https://www.tinymce.com/docs/integrations/angular2/#usingthecomponentinyourtemplates
In particular please see the init parameter.
For tinymce version > 5.x you'll have to use editor.ui.registry.addButton with onAction
editor.ui.registry.addButton('myCustomToolbarButton', {
icon: 'browse',
tooltip: "Browse Document Repository",
onAction: function () {}
});
Related
So I have implemented Echarts with a Vue application, on one of the charts, I am trying to get the item clicked and pass it back to the parent component that way I can do specific calculations to it.
The 'on click' method works and I can console.log('params') easily, however, trying to reach any other functions outside of it is not possible for some reason...
here is my code...
data() {
return {
myChart: null,
selectedState: {}
}
}.
mounted() {
this.myChart = echarts.init(document.getElementById("geoMap"))
this.myChart.on('click', function(params){
// It will run the console.log with correct info, but the
// method is not reachable...
console.log(params)
this.setSelectedState(params)
})
},
// Inside my vue script this is just a method to set the data for now...
methods: {
setSelectedState(params){
this.selectedState = params
},
}
any help would be nice!! thanks!
You're not in the Vue component context when listening to the chart event, so you have to change your callback function to an arrow one to access the component's this :
this.myChart.on('click', params => {
this.setSelectedState(params)
});
methods: {
setSelectedState(params) {
console.log(params);
this.selectedState = params
}
}
By the way, you should use ref instead of getting your div with document.getElementById to attach your chart :
<div ref="geoMap"></div>
this.myChart = echarts.init(this.$refs.geoMap);
I have trouble accessing the Vue component. It is a chart which uses computed properties, which are reactive.
In the documentation I found an example how to "reflow" a the chart, which works fine. However I want to trigger this behaviour whenever the state changes.
mounted() {
this.isMounted = true;
this.$store.watch(state => {
if (state.lineData.data.length > 0) {
this.reflow(); // ### Want to access the reflow method here
// this.$computed.chartOptions.chart desired something like this
}
});
},
computed: {
chartOptions() {
var ref = this;
return {
chart: {
map: worldMap,
height: "620px",
events: {
click: function() {
console.log(this);
this.reflow(); ### This works
}
}
},
}
}
Is there a way to access the computed property from the mounted method or am I doing here something fundamentally wrong? Is there a better way to do this? The click event from the highcharts API is reserved and does not allow me to use custom methods :-/
I found a (for me) good solution:
import Highcharts from "highcharts"; // access to all highcharts components
Highcharts.charts[0].reflow(); // select the correct one an reflow it
I've created a backend and am now trying to build a frontend, using it. I'm very new to Vue.js and am having a hard time telling it to do what I want; probably because of missing some basic concepts. Hopefully someone can point me in the right direction.
The App.vue groups following components: Header, main section (routed), footer and a modal login dialog.
The issue I'm trying to solve is to display the modal login dialog when clicking the Login button (which lives in the header component); currently, nothing besides the messages being logged happens.
For this I've created an event bus and am firing an event:
export default {
name: 'SppdTeamTunerHeader',
methods: {
emitShowLoginDialogEvent () {
EventBus.$emit('ShowLoginDialog', true)
}
}
}
Emitting the event works as I can see in the Vue DevTools for Chrome.
Here's the complete code of App.vue:
<template>
<div id="app">
<SppdTeamTunerHeader/>
<router-view></router-view>
<SppdTeamTunerFooter/>
<LoginDialogModal
v-show="isLoginDialogVisible"
/>
</div>
</template>
<script>
import SppdTeamTunerHeader from '#/components/TheHeader'
import SppdTeamTunerFooter from '#/components/TheFooter'
import LoginDialogModal from '#/components/LoginDialogModal'
import { EventBus } from '#/common/EventBus'
export default {
name: 'App',
components: {
SppdTeamTunerHeader,
SppdTeamTunerFooter,
LoginDialogModal
},
data: function () {
return {
isLoginDialogVisible: false
}
},
mounted () {
EventBus.$on('ShowLoginDialog', function (isVisible) {
console.log('Setting ShowLoginDialog isVisible=' + isVisible + '. isLoginDialogVisible=' + this.isLoginDialogVisible)
if (isVisible) {
this.isLoginDialogVisible = true
} else {
this.isLoginDialogVisible = false
}
console.log('Finished setting isLoginDialogVisible=' + this.isLoginDialogVisible)
})
},
destroyed () {
EventBus.$off('ShowLoginDialog')
}
}
</script>
When checking the console, following is being printed when clicking the login button:
Setting ShowLoginDialog isVisible=true. isLoginDialogVisible=undefined
Finished setting isLoginDialogVisible=true
The value logged for isLoginDialogVisible can't come from the variable defined in the data function as it prints undefined, whereas it has been defined as false (I guess that's my main problem).
I've read quite a few articles about the subject, e.g:
https://codingexplained.com/coding/front-end/vue-js/why-components-data-properties-must-be-functions
https://v2.vuejs.org/v2/guide/instance.html#Data-and-Methods
The modal dialog example I've based the implementation comes from here: https://alligator.io/vuejs/vue-modal-component/
This is happening because you are not using an Arrow function. Instead of a plain function, use arrow function like this:
mounted () {
// Note the use of arrow function.
EventBus.$on('ShowLoginDialog', (isVisible) => {
// .. All your code
})
}
If you use plain function function () {}, then this pointer is not accessible within inner function. Arrow function will lexically bind this pointer to mounted() function's this context. So use an arrow function i.e. () => {};
Note: If you insist on using plain old function syntax then use closure variable to keep track of this pointer:
mounted () {
// Assign this pointer to some closure variable
const vm = this;
EventBus.$on('ShowLoginDialog', function (isVisible) {
console.log('Setting ShowLoginDialog isVisible=' + isVisible + '. isLoginDialogVisible=' + vm.isLoginDialogVisible)
if (isVisible) {
vm.isLoginDialogVisible = true
} else {
vm.isLoginDialogVisible = false
}
console.log('Finished setting isLoginDialogVisible=' + vm.isLoginDialogVisible)
})
}
This has nothing to do with Vue.js. It is a typical JavaScript behavior.
I believe your listener for the EventBus events needs to be accessible to App. Right now EventBus and App are two separate instances. You could mount the event handler inside App like this:
mounted () {
EventBus.$on('ShowLoginDialog', function (isVisible) {
...
});
I'm trying to load a component dynamically in my Angular2 app.
By dynamically I don't just mean to insert into the DOM a component that is missing from the parent component's template; I mean to download from the server another component, because the User might not ever need it, and then insert it into the DOM.
So I followed this to understand how to load the component with Systemjs and now I see that, in RC4, we need to use this and ComponentResolver to inject things into the DOM.
So here is my code for the module-wrapper component that should put things together:
export class ModuleWrapperComponent implements OnInit {
#ViewChild("module", { read: ViewContainerRef }) target: ViewContainerRef;
#Input() isOpen: boolean;
#Input() moduleId: number;
type: string = null;
moduleRef: ComponentRef<any> = null;
private isViewInitialized: boolean = false;
constructor(private resolver: ComponentResolver) { }
private _loadModule(moduleId: number): Promise<string> {
if (!!this.type)
return Promise.resolve(this.type);
var mod = {
component: "DashboardComponent",
path: "/app/modules/dashboard.component"
};
return System
.import(mod.path)
.then(() => this.type = mod.component);
}
updateComponent() {
if (!this.isViewInitialized)
return;
if (!!this.moduleRef)
this.moduleRef.destroy();
if (this.isOpen) {
this._loadModule(this.moduleId)
.then(type => {
this.resolver.resolveComponent(type)
.then(factory => {
this.moduleRef = this.target.createComponent(factory)
// to access the created instance use
// this.compRef.instance.someProperty = 'someValue';
// this.compRef.instance.someOutput.subscribe(val => doSomething());
});
})
}
}
ngOnChanges() {
this.updateComponent();
}
ngAfterViewInit() {
this.isViewInitialized = true;
this.updateComponent();
}
ngOnDestroy() {
if (!!this.moduleRef)
this.moduleRef.destroy();
}
}
Sadly, I get this error from ComponentResolver:
Error: Cannot resolve component using 'DashboardComponent'. at new BaseException$1 (http://localhost:63815/lib/#angular/compiler//bundles/compiler.umd.js:971:27)
I reckon that loading the module in Systemjs is not enough...so how do I tell ComponentResolver that I've downloaded a new component? The official documentation is still young and lacking...
On a side note, say that my Dashboard component loads additional stuff with imports...Systemjs will handle all that automatically, won't it?
Thanks in advance!
This does not exactly answer your question.
BUT,
We had a similar requirement and were loading components dynamically using SystemJs.
It was all working fine until we started thinking about build and deployment strategies and came across Webpack
Since the value of moduleId is only known at runtime, so webpack will not be able to resolve the actual module components at compile time and will not bundle those files.
You will need to have static imports for your dynamic module components somewhere in your code if you want them to be bundled as part of your single app.js
I'm reviewing the Durandal documentation, and I can't find a concrete implementation of listening for Durandal events, e.g, router events.
Can someone point me to the docs, or (if there is no documentation on this) an example?
In your view model you should listen to activator events. Link. check this example from Durandal starter template. It is listening to activate and canDeactivate events:
define(['plugins/http', 'durandal/app', 'knockout'], function (http, app, ko) {
//Note: This module exports an object.
//That means that every module that "requires" it will get the same object instance.
//If you wish to be able to create multiple instances, instead export a function.
//See the "welcome" module for an example of function export.
return {
displayName: 'Flickr',
images: ko.observableArray([]),
activate: function () {
//the router's activator calls this function and waits for it to complete before proceding
if (this.images().length > 0) {
return;
}
var that = this;
return http.jsonp('http://api.flickr.com/services/feeds/photos_public.gne', { tags: 'mount ranier', tagmode: 'any', format: 'json' }, 'jsoncallback').then(function(response) {
that.images(response.items);
});
},
select: function(item) {
//the app model allows easy display of modal dialogs by passing a view model
//views are usually located by convention, but you an specify it as well with viewUrl
item.viewUrl = 'views/detail';
app.showDialog(item);
},
canDeactivate: function () {
//the router's activator calls this function to see if it can leave the screen
return app.showMessage('Are you sure you want to leave this page?', 'Navigate', ['Yes', 'No']);
}
};
});
Here's some example code from the project I have worked in:
//authentication.js
define(['durandal/events'], function(events){
var authentication = {};
events.includeIn(authentication);
//perform login then trigger events to whoever is listening...
authentication.trigger('logged:on',user);
//perfom logoff then trigger events to whoever is listening...
authentication.trigger('logged:off');
return {
authentication: authentication
}
});
//logon.js
//pull in authenticaion
define(['authentication'], function(authentication){
authentication.on('logged:on',loggedOn);
//callback that gets called when the logged:on event is fired on authentication
function loggedOn(user){
console.log(user);
}
});