We are upgrading tinyMCE from v3.5 to v4.2.6 and in previous we used tinyMCEPopup in many places for the requirement. But in new version it raising an error as "ReferenceError: tinyMCEPopup is not defined".
Please suggest me on this.
Please find the below sample custom plugin's js file where we used tinyMCEPopup.
tinyMCEPopup.requireLangPack();
var ImagepopupDialog = {
init : function() {
},
insert : function(text) {
tinyMCEPopup.editor.execCommand('mceInsertContent', false, text);
tinyMCEPopup.close();
}
};
tinyMCEPopup.onInit.add(ImagepopupDialog.init, ImagepopupDialog);
In Tinymce 4 popups are working differently than with Tinymce 3.
Now, you need to call the editor.windowmanager to open up a popup.
The code would be something like this:
win = editor.windowManager.open({
title: "Special character",
spacing: 10,
padding: 10,
items: [
charMapPanel,
{
type: 'label',
name: 'preview',
text: ' ',
style: 'font-size: 40px; text-align: center',
border: 1,
minWidth: 100,
minHeight: 80
},
{
type: 'label',
name: 'previewTitle',
text: ' ',
style: 'text-align: center',
border: 1,
minWidth: 140,
minHeight: 80
}
],
buttons: [
{text: "Close", onclick: function() {
win.close();
}}
]
});
Related
I have the chart bellow and I want to add the percentage to the series body. Like I manipulate the image bellow in red.
how Is this possible?
https://codesandbox.io/s/label-line-adjust-forked-09ukre?file=/index.js
var dom = document.getElementById("chart-container");
var myChart = echarts.init(dom, null, {
renderer: "canvas",
useDirtyRect: false
});
var app = {};
var option;
var datas = [
////////////////////////////////////////
[
{ name: "test1", value: 20 },
{ name: "test2", value: 40 },
{ name: "test3", value: 40 }
]
];
option = {
title: {
text: "test",
left: "center",
textStyle: {
color: "#999",
fontWeight: "normal",
fontSize: 14
}
},
series: datas.map(function (data, idx) {
return {
type: "pie",
radius: [80, 160],
top: "10%",
height: "33.33%",
left: "center",
width: 400,
itemStyle: {
borderColor: "#fff",
borderWidth: 1
},
label: {
alignTo: "edge",
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
time: {
fontSize: 10,
color: "#999"
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
data: data
};
})
};
if (option && typeof option === "object") {
myChart.setOption(option);
}
window.addEventListener("resize", myChart.resize);
Thanks
To place information inside the chart, you have to use position: "inside" in the label. Set what is put inside the label with the formatter. (Here, {c} is the value of a data item)
label: {
formatter: "{c}%",
position: "inside"
},
But it seems that it's not possible to have both a label inside AND one outside the same chart (like in your image). However, a workaround can do the job here. Like using 2 identical series except one has the label from your example code, and one has the label code I wrote above. One chart will be on top of the other (wich is a bit messy) but the result will be as you want :
I'm new one of echarts, I need to set the text in centre of donuts chart. I tried and google it no use, I tried it by html also but I cant able to achieve it. Please any one suggest me, How can I resolved it. Thanks in advance.
In options I add the total in title but I need to show that one into centre.
var myChart = echarts.init(document.getElementById('pieChart1'));
var idx = 1;
pieChartOption = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
title: {
text: "Total "+10+"%",
left: 'center'
},
series: [
{
name: 'Test one',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: true,
label: {
show: true,
color: '#000',
fontSize: '80',
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 10, name: 'Success', itemStyle : {normal : {label : { show : false},labelLine : { show : false}, color: '#5E50A1'}}},
{value: 20, name:'Failed', itemStyle : {normal : {label : { show : false},labelLine : { show : false}, color: '#FFB200'}}},
{value: 30,name:'Onprocess', itemStyle : {normal : {label : { show : false},labelLine : { show : false}, color: '#FF434F'}}}
]
}
]
}
myChart.setOption(pieChartOption);
<html lang="en">
<head>
<meta charset="utf-8">
<title>Using ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小的Dom-->
<div id="pieChart1" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
</body>
<!--引入echarts. Using echarts-all.js for convenience -->
<!-- CDN is taken from https://cdnjs.com/libraries/echarts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/2.2.7/echarts-all.js"></script>
</html>
As far as I understand, you do not plan to place labels in the center, only the total, right? In this case the most simple option it is a markPoint (see live example):
series: [{
// ...
markPoint: {
tooltip: { show: false },
label: {
show: true,
formatter: '{b}',
color: 'black',
fontSize: 20,
},
data: [{
name: 'Total 10%',
value: '-',
symbol: 'circle',
itemStyle: { color: 'transparent' },
x: '50%',
y: '50%',
}],
},
// ...
}]
P.S. Library that you included in example is very strange (copyrights?, binary data?) and distort default behaviour. Please don't use them, take the any pack from the repo instead https://www.jsdelivr.com/package/npm/echarts?path=dist
You can use the graphic property, like this:
https://jsfiddle.net/motz75an/
graphic: {
elements: [{
type: 'text',
left: 'center',
top: 'middle',
z: 999,
style: {
text: `Total 10%`,
textAlign: 'center',
fontSize: 26,
}
}]
},
In my application,there is a screen for generating PDF .In web browser, the PDF is getting downloaded, content is displayed but in the mobile it is getting downloaded and saved in PDF format and the content is not getting written to the PDF.
Plugin used: cordova pdfMake
Here is the code for reference
createPdf(val1,val2,val3) {
this.Descr=val1;
this.ValueDescr=val2;
this.VisionDescr=val3;
var docDefinition = {
content: [
{ text: 'Family Description', style: 'header' },
{ },
{ text: 'Family History :', style: 'subheader' },
{ text: this.Descr ,style: 'story', margin: [20, 0, 0, 30] },
{ text: 'Family Values :', style: 'subheader' },
{ text: this.ValueDescr ,style: 'story', margin: [20, 0, 0, 30]},
{ text: 'Family Vision :', style: 'subheader' },
{ text: this.VisionDescr ,style: 'story', margin: [20, 0, 0, 30] },
],
styles: {
header: {
fontSize: 18,
bold: true,
alignment: 'center',
},
subheader: {
fontSize: 14,
bold: true,
margin: [0, 15, 0, 0]
},
story: {
fontSize: 12,
width: '50%',
}
}
}
if(this.Descr || this.ValueDescr || this.VisionDescr)
{
this.pdfObj = pdfMake.createPdf(docDefinition);
// alert("PDF has been created successfully.Kindly wait for it to be downloaded...")
this.downloadPdf(this.pdfObj);
}
}
downloadPdf(val) {
this.pdfObj = val;
if (this.platform.is('cordova')) {
this.pdfObj.getBuffer((buffer) => {
var blob = new Blob([buffer], { type: 'application/pdf' });
// Save the PDF to the data Directory of our App
this.file.writeFile(this.file.externalDataDirectory, 'familydescription.pdf', blob, { replace: true }).then(fileEntry => {
// Open the PDf with the correct OS tools
this.fileOpener.open(this.file.externalDataDirectory + 'familydescription.pdf', 'application/pdf');
})
});
} else {
// On a browser simply use download!
this.pdfObj.download();
}
}
Ionic Information
Ionic:
ionic (Ionic CLI) : 4.2.1 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.2
#ionic/app-scripts : 3.2.0
Cordova:
cordova (Cordova CLI) : 8.1.2 (cordova-lib#8.1.1)
Cordova Platforms : android 7.1.2, ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-keyboard 2.0.5, cordova-plugin-ionic-webview 1.1.1, (and 30 other plugins)
System:
Android SDK Tools : 26.1.1 (/Users/aligntech/Library/Android/sdk/)
ios-deploy : 1.9.4
NodeJS : v10.13.0 (/usr/local/bin/node)
npm : 6.4.1
OS : macOS
Xcode : Xcode 10.1 Build version 10B61
I found the solution for the above problem I posted it. I solved it by handling it in a different way
createPdf(val1,val2,val3) {
let self = this;
this.Descr=val1;
this.ValueDescr=val2;
this.VisionDescr=val3;
var docDefinition = {
content: [
{ text: 'Family Description', style: 'header' },
{ },
{ text: 'Family History :', style: 'subheader' },
{ text: this.Descr ,style: 'story', margin: [20, 0, 0, 30] },
{ text: 'Family Values :', style: 'subheader' },
{ text: this.ValueDescr ,style: 'story', margin: [20, 0, 0, 30]},
{ text: 'Family Vision :', style: 'subheader' },
{ text: this.VisionDescr ,style: 'story', margin: [20, 0, 0, 30] },
],
styles: {
header: {
fontSize: 18,
bold: true,
alignment: 'center',
},
subheader: {
fontSize: 14,
bold: true,
margin: [0, 15, 0, 0]
},
story: {
fontSize: 12,
width: '50%',
}
}
}
if(this.Descr || this.ValueDescr || this.VisionDescr)
{
this.pdfObj = pdfMake.createPdf(docDefinition);
pdfMake.createPdf(docDefinition).getBuffer(function (buffer) {
let utf8 = new Uint8Array(buffer);
let binaryArray = utf8.buffer;
self.saveToDevice(binaryArray,"familydescription.pdf")
});
// this.downloadPdf(this.pdfObj);
}
}
saveToDevice(data:any,savefile:any){
let self = this;
self.file.writeFile(self.file.externalDataDirectory, savefile, data, {replace:false});
const toast = self.toastCtrl.create({
message: 'File saved to your device',
duration: 3000,
position: 'top'
});
toast.present();
}
and I found an issue the bug is with file opener which I used in previous code!
I Referred above code from this website https://medium.com/#rakeshuce1990/ionic-how-to-create-pdf-file-with-pdfmake-step-by-step-75b25aa541a4 use this link for detailed reference.
Can anyone help me in creating a form inside a layout window in extjs 3.4. like this? I tried using Ext.Formpanel but it shows error.
Ext.onReady(function() {
// tabs for the center
var tabs = new Ext.TabPanel({
region: 'center',
margins: '3 3 3 0',
activeTab: 0,
defaults: {
autoScroll: true
},
items: [
{
title: 'Movie Grid',
},
{
title: 'Movie Description',
},
{
title: 'Nested layout',
},
{
title: 'The bomb',
}
]
});
// Panel for the west
var nav = new Ext.Panel({
title: 'Movie Information Form',
region: 'west',
split: true,
width: 200,
collapsible: true,
margins: '3 0 3 3',
cmargins: '3 3 3 3',
});
var win = new Ext.Window({
title: 'Button',
closable: true,
width: 600,
height: 350,
//border: false,
plain: true,
layout: 'border',
items: [
nav,
tabs
]
});
win.show(this);
});
This is the js file for creating a layout window. I need to create a form inside "movie information form".
I have solved error in your code.Please check & reply.
https://fiddle.sencha.com/#view/editor&fiddle/2750
I have removed this which was passed to show() of window.
I have used highcharts in my iphone application, Everything works great except one is that when I click on pagination arrows of legend in highchart, it skips one page and goes to next page.
Say I have 4 pages, so if I am on 1st page right now and click to view another page then it jumps to 3rd page. After clicking next for 3rd page I go to 4th page and when I click on prev it skips 3rd page and jumps to 2nd page. And very important to take note is, its happening on iphone only not browser.
I am surprised to see this and unable to identify why this behaviour is there with pagination...
following is my code for creating highchart
var defaultBarChart = {
options: {
chart: {
type: 'column',
alignTicks:false,
//height: 250,
width: Constants.analyticChartWidth
},
yAxis: {
title: {
text: ''+$filter('translate')('values')
}
},
tooltip: {
enabled: false,
style: {
width: 200,
padding: 10,
lineHeight: "normal"
},
useHTML:true
},
legend: {
verticalAlign: 'bottom',
align: 'left',
x: 0,
itemStyle: {
width: deviceWidth,
'color':'#434f5a',
'font-size':'12px'
},
maxHeight: 105,
navigation: {
activeColor: '#3E576F',
animation: true,
arrowSize: 18,
inactiveColor: '#CCC'
}
},
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: [
''
],
crosshair: true
},
tooltip: {
/* style: {
width: 100
}*/
enabled: false
},
/* tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true,
style: {
width: 100
}
},*/
series: [{
name: '',
data: [0],
showInLegend: false
}],
loading: false,
credits: {
enabled: false
}
};
I want to ask, if problem anywhere else other than navigation can affect on it?
Please.. help me to get out of this...!!