I would like to add class "text-justify" automatically to every p, anyone know how to do this?
Now I am using this code:
CKEDITOR.on('dialogDefinition', function (ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'table' || dialogName == 'tableProperties') {
var info = dialogDefinition.getContents('info');
// Remove fields
var cellSpacing = info.remove('txtCellSpace');
var cellPadding = info.remove('txtCellPad');
var border = info.remove('txtBorder');
var width = info.remove('txtWidth');
var height = info.remove('txtHeight');
var align = info.remove('cmbAlign');
}
});
$('#content, #longContent').ckeditor({
contentsCss: '/CMS/style_ckeditor.css',
allowedContent: true,
extraPlugins: 'button,menubutton,htmlbuttons,menu,floatpanel,panel',
htmlbuttons: [
{
name:'button1',
icon:'icon1.png',
html:'<p class="act-left">Sekretarz Zgromaczenia<br /><strong>Alfred Błaszczyk</strong></p><p class="act-right">Przewodniczący Zgromadzenia<br /><strong>Tomasz Radomski</strong></p><div class="clearfix"></div>',
title:'Dodaj podpisy'
},
{
name:'button2',
icon:'icon3.png',
html:'<ol class="law"><li> <ol><li>tekst</li></ol></li></ol>',
title:'Dodaj paragraf'
}
]
}).ckeditorGet().on('insertElement', function (event) {
var el = event.data;
if (el.is('table')) {
$(event.data.$)
.addClass('table table-bordered table-striped')
.removeAttr('cellpadding cellspacing')
.wrap('<div class="table-responsive"></div>');
}
}, null, null, 20);
It works for adding classes for table, but when I would like to do similar to P, it didn't work.
just use :
$('#content').ckeditor({
on: {
instanceReady: function () {
this.dataProcessor.htmlFilter.addRules({
elements: {
ul: function (el) {
el.addClass('ul');
},
table: function (el) {
el.addClass('entry');
}
}
});
}
}
});
For Ckeditor4
Related
Is there anyway to show only one region on jvector map . After this i have to highlighted particular city on that region onclick event below is the code that i have tried.
<li>United Kingdom
<div id="map"></div>
var wrld2 = {
map: 'world_mill',
normalizeFunction: 'polynomial',
regionStyle: regionStyling,
backgroundColor: 'none',
regionsSelectableOne: true,
regionsSelectable: true,
series: {
regions: [{
values: {},
attribute: 'fill'
}]
}
};
$('#map').vectorMap(wrld2);
var mapObj2 = $('#map').vectorMap('get', 'mapObject');
function findRegion(robj, rname) {
var code = '';
$.each(robj, function (key) {
if (unescape(encodeURIComponent(robj[key].config.name)) === unescape(encodeURIComponent(rname))) {
code = key;
}
});
return code;
}
$('ul').on('click', 'a:first-child', function (event) {
var elem = event.target,
evtype = event.type,
cntrycode = findRegion(mapObj2.regions, $(elem).text());
if (evtype === 'click') {
mapObj2.clearSelectedRegions();
mapObj2.setSelectedRegions([cntrycode]);
}
});
Is there any method? http://jsfiddle.net/gwdhzaLb/2/
I have two completer. one for Math custom functions and another for string custom functions. i want to trigger string functions using (.)period and for ctrl_space for math function.
Now if i press (.) or ctrl_space, it showing all the functions. but i want differentiate between two of them.Thanks..
var stringFunctions = ["Trim","Length","ToLower","ToUpper","ToNumber","ToString"]
var mathFunctions = ["Abs","Ceil","Exp","Floor","Log","ln","Pow","Round","Sqrt","cos","sin","tan","cosh","sinh","tanh","acos","asin","atan","Max","Min","Sum","Std","Var","Average","Norm","Median"]
var myCompleter1 = {
// identifierRegexps: [/[a-zA-Z_0-9\.\$\-\u00A2-\uFFFF]/],
getCompletions: function(editor, session, pos, prefix, callback) {
console.info("myCompleter prefix:", this.prefix);
callback(
null,
myList.filter(entry=>{
return entry.includes(this.prefix);
}).map(entry=>{
return {
value: entry
};
})
);
}
}
var myCompleter2 = {
// identifierRegexps: [/[a-zA-Z_0-9\.\$\-\u00A2-\uFFFF]/],
getCompletions: function(editor, session, pos, prefix, callback) {
console.info("myCompleter prefix:", this.prefix);
callback(
null,
myList.filter(entry=>{
return entry.includes(this.prefix);
}).map(entry=>{
return {
value: entry
};
})
);
}
}
langTools.addCompleter(myCompleter1);
langTools.addCompleter(myCompleter2);```
You can check the text of the line in the completer to decide if it is after dot or not
var stringFunctions = ["Trim", "Length", "ToLower", "ToUpper", "ToNumber", "ToString"]
var mathFunctions = ["Abs", "Ceil", "Exp", "Floor", "Log", "ln", "Pow", "Round",
"Sqrt", "cos", "sin", "tan", "cosh", "sinh", "tanh", "acos", "asin", "atan",
"Max", "Min", "Sum", "Std", "Var", "Average", "Norm", "Median"
]
var myCompleter1 = {
getCompletions: function(editor, session, pos, prefix, callback) {
var line = session.getLine(pos.row)
var lineStart = line.slice(0, pos.column - prefix.length)
var myList = !/\.\s*$/.test(lineStart) ? mathFunctions : stringFunctions;
callback(null, myList.map(entry => {
return {
value: entry,
score: 1000
};
}));
}
}
var langTools = ace.require("ace/ext/language_tools")
langTools.addCompleter(myCompleter1);
var editor = ace.edit("editor", {
maxLines: 20,
minLines: 5,
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: false,
})
// automatically open popup after dot or word characters
var doLiveAutocomplete = function(e) {
var editor = e.editor;
var hasCompleter = editor.completer && editor.completer.activated;
if (e.command.name === "insertstring") {
// Only autocomplete if there's a prefix that can be matched
if (/[\w.]/.test(e.args)) {
editor.execCommand("startAutocomplete")
}
}
};
editor.commands.on('afterExec', doLiveAutocomplete);
<script src=https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js></script>
<script src=https://ajaxorg.github.io/ace-builds/src-noconflict/ext-language_tools.js></script>
<div id=editor></div>
I am working with chartjs, I am trying to animate chart from right to left or left to right on load.
var canvas = document.getElementById('chart_canvas');
var ctx = canvas.getContext('2d');
// Generate random data to plot
var DATA_POINT_NUM = 10;
var data = {
labels: [],
datasets: [
{
data: [],
},
]
}
for (var i=0; i<DATA_POINT_NUM; i++) {
data.datasets[0].data.push(Math.random()*10);
data.labels.push(String.fromCharCode(65+i));
}
var oldDraw = Chart.controllers.line.prototype.draw;
Chart.controllers.line.prototype.draw = function(animationFraction) {
var animationConfig = this.chart.options.animation;
if (animationConfig.xAxis === true) {
var ctx = this.chart.chart.ctx;
var hShift = (1-animationFraction)*ctx.canvas.width;
ctx.save();
ctx.setTransform(1, 0, 0, 1, hShift,0);
if (animationConfig.yAxis === true) {
oldDraw.call(this, animationFraction);
} else {
oldDraw.call(this, 1);
}
ctx.restore();
} else if (animationConfig.yAxis === true) {
oldDraw.call(this, animationFraction);
} else {
oldDraw.call(this, 1);
}
}
var lineChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
animation: {
duration: 5000,
xAxis: true,
yAxis: true,
}
}
});
Example 1
The above code works fine on windows, but I'm facing issue on mac devices.While animating from left to right the data displays incorrectly means that the data moves to upward from x axis.How to fix this issue?
I am attaching screenshot.
Screenshot
Please change setTransform to transform.
Try the following code
var canvas = document.getElementById('chart_canvas');
var ctx = canvas.getContext('2d');
// Generate random data to plot
var DATA_POINT_NUM = 10;
var data = {
labels: [],
datasets: [
{
data: [],
},
]
}
for (var i=0; i<DATA_POINT_NUM; i++) {
data.datasets[0].data.push(Math.random()*10);
data.labels.push(String.fromCharCode(65+i));
}
var oldDraw = Chart.controllers.line.prototype.draw;
Chart.controllers.line.prototype.draw = function(animationFraction) {
var animationConfig = this.chart.options.animation;
if (animationConfig.xAxis === true) {
var ctx = this.chart.chart.ctx;
var hShift = (1-animationFraction)*ctx.canvas.width;
ctx.save();
ctx.transform(1, 0, 0, 1, hShift,0);
if (animationConfig.yAxis === true) {
oldDraw.call(this, animationFraction);
} else {
oldDraw.call(this, 1);
}
ctx.restore();
} else if (animationConfig.yAxis === true) {
oldDraw.call(this, animationFraction);
} else {
oldDraw.call(this, 1);
}
}
var lineChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
animation: {
duration: 5000,
xAxis: true,
yAxis: true,
}
}
});
I have a grid in ext with some custom columns, and I want to be able to sort this column - I want to sort it by what is displayed inside of it, but really I just cannot figure out how to define a sorter for a column that will not be based on the dataIndex - I tried using a custom model, but I could not get that to work.
{
text: 'Parent',
dataIndex: 'Parent',
renderer: function(value, meta, record) {
var ret = record.raw.Parent;
if (ret) {
return ret.Name;
} else {
meta.tdCls = 'invisible';
return record.data.Name;
}
},
sortable: true
},
You should be able to override the doSort method of the column. Here's the gist of it. I also created a working fiddle (http://jsfiddle.net/cfarmerga/LG5uA/). The fiddle uses the string length of a field as the property to sort on, but of course you could apply your own custom sort logic.
var grid = Ext.create('Ext.grid.Panel',{
//...
columns: [
{ text: 'name', dataIndex: 'name', sortable: true },
{
text: 'Custom',
sortable : true,
dataIndex: 'customsort',
doSort: function(state) {
var ds = this.up('grid').getStore();
var field = this.getSortParam();
ds.sort({
property: field,
direction: state,
sorterFn: function(v1, v2){
v1 = v1.get(field);
v2 = v2.get(field);
return v1.length > v2.length ? 1 : (v1.length < v2.length ? -1 : 0);
}
});
}
}
]
//....
});
For Ext JS version 5, it looks like doSort was taken out, so I couldn't override that. Instead, I went the route of listening to the sortchange event, and from there, I used the Ext.data.Store.setSorters method. The code is a bit custom, and overly complex because of the data that I'm using, so keep that in mind (Fiddle here):
// grid class
initComponent: function() {
...
this.on('sortchange', this.onSortChange, this);
},
onSortChange: function(container, column, direction, eOpts) {
// check for dayColumnIndex
if (column && column.dayColumnIndex !== undefined) {
this.sortColumnByIndex(column.dayColumnIndex, direction);
}
},
sortColumnByIndex: function(columnIndex, direction) {
var store = this.getStore();
if (store) {
var sorterFn = function(rec1, rec2) {
var sortValue = false;
if (rec1 && rec2) {
var day1;
var daysStore1 = rec1.getDaysStore();
if (daysStore1) {
day1 = daysStore1.getAt(columnIndex);
}
var day2;
var daysStore2 = rec2.getDaysStore();
if (daysStore2) {
day2 = daysStore2.getAt(columnIndex);
}
if (day1 && day2) {
var val1 = day1.get('value');
var val2 = day2.get('value');
sortValue = val1 > val2 ? 1 : val1 === val2 ? 0 : -1;
}
}
return sortValue;
};
if (direction !== 'ASC') {
sorterFn = function(rec1, rec2) {
var sortValue = false;
if (rec1 && rec2) {
var day1;
var daysStore1 = rec1.getDaysStore();
if (daysStore1) {
day1 = daysStore1.getAt(columnIndex);
}
var day2;
var daysStore2 = rec2.getDaysStore();
if (daysStore2) {
day2 = daysStore2.getAt(columnIndex);
}
if (day1 && day2) {
var val1 = day1.get('value');
var val2 = day2.get('value');
sortValue = val1 < val2 ? 1 : val1 === val2 ? 0 : -1;
}
}
return sortValue;
};
}
store.setSorters([{
sorterFn: sorterFn
}]);
}
}
There is a convert method on the Ext.data.Model class that allows you to convert the data before it's being used. Then you can just specify this 'dataIndex' in your column and do a normal sort. The column will be sorted by that converted value. Here is the a sample model with just one field (Parent) and with it's corresponding conversion:
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'Parent', type: 'string', convert: sortParent},
// other fields...
],
sortParent: function(value, record) {
var ret = record.raw.Parent;
if (ret) {
return ret.Name;
} else {
meta.tdCls = 'invisible';
return record.data.Name;
}
}
});
I have am trying to implement something along the lines of
Slickgrid, column with a drop down select list?
my code is;
slick.editors.js ;
(function ($) {
// register namespace
$.extend(true, window, {
"Slick": {
"Editors": {
"Text": TextEditor,
"Integer": IntegerEditor,
"Date": DateEditor,
"YesNoSelect": YesNoSelectEditor,
"Checkbox": CheckboxEditor,
"PercentComplete": PercentCompleteEditor,
"LongText": LongTextEditor,
"SelectOption": SelectCellEditor
}
}
});
with the function defined futher down,
function SelectCellEditor(args) {
var $select;
var defaultValue;
var scope = this;
this.init = function () {
if (args.column.options) {
opt_values = args.column.options.split(',');
} else {
opt_values = "yes,no".split(',');
}
option_str = ""
for (i in opt_values) {
v = opt_values[i];
option_str += "<OPTION value='" + v + "'>" + v + "</OPTION>";
}
$select = $("<SELECT tabIndex='0' class='editor-select'>" + option_str + "</SELECT>");
$select.appendTo(args.container);
$select.focus();
};
this.destroy = function () {
$select.remove();
};
this.focus = function () {
$select.focus();
};
this.loadValue = function (item) {
defaultValue = item[args.column.field];
$select.val(defaultValue);
};
this.serializeValue = function () {
if (args.column.options) {
return $select.val();
} else {
return ($select.val() == "yes");
}
};
this.applyValue = function (item, state) {
item[args.column.field] = state;
};
this.isValueChanged = function () {
return ($select.val() != defaultValue);
};
this.validate = function () {
return {
valid: true,
msg: null
};
};
this.init();
}
Then in my CSHTML
var columns = [
{ id: "color", name: "Color", field: "color", options: "Red,Green,Blue,Black,White", editor: Slick.Editors.SelectOption },
{ id: "lock", name: "Lock", field: "lock", options: "Locked,Unlocked", editor: Slick.Editors.SelectOption },
];
var options = {
enableCellNavigation: true,
enableColumnReorder: false
};
$(function () {
var data = [];
for (var i = 0; i < 20; i++) {
data[i] = {
color: "Red",
lock: "Locked"
};
}
the grid shows and the colour is shown as if its a regular text in a cell, but no dropdown?.
The drop-down will appear only when you are editing that cell. Adding editable: true to your grid options should work I think.