I'm using the jquery version of ckeditor, like this:
$(".textarea").ckeditor();
I need to specify the toolbar buttons, but I don't know how. All the help I found here on stackoverflow or using google was for the old javascript ckeditor version, OR I don't know how to use it with jquery (code above).
Also, how do I specify the css file location, so that the ckeditor loads my css and displays the data the same way it will be displayed on the site?
Anyone can help with this mess?
$(".textarea").ckeditor(function() {
// Instance loaded callback.
}, {
// Config here.
});
Not sure if this is a new feature of CKEDITOR, but just want to share my solution (in case it helps anyone looking for this now):
$("textarea.youreditor").ckeditor
(
{
customConfig: "/path/to/custom/config.js"
}
);
... and my config looks like this (simply copied the default config.js:
CKEDITOR.editorConfig = function(config)
{
config.toolbar_Full =
[
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] }
];
};
** I am cross posting my solution from here: How do I pass in config info to CKEditor using the jQuery adapter?
This is how I set the config using jQuery....
var config = {
toolbar: [ /* Whatever toolbars you wish go here. */ ],
height: 250,
width: 500,
align: "left",
contentsCss: ["body { /* Style your body any way you like */ } otherCSSStuff { /* Style away. */} "]
/*and whatever other options you wish to config... */
};
$( 'textarea.editor' ).ckeditor( config, function() { /* Your callback function. */ } );
Related
I'm using the WordPress plugin TablePress for tables. It creates DataTables tables which I'd like to modify after init.
Problem: the tables are already initialized by the plugin, which means I can't use the constructor anymore.
// Already set by the plugin:
$('#tablepress-1').dataTable({
columnDefs: [
{ targets: -1, className: 'dt-body-right'}
]
});
I'm looking for something like that (pseudocode):
var table = $('#tablepress-1').dataTable();
table.updateConfig({
columnDefs: [
{ targets: -1, className: 'dt-body-right'}
]
})
Any idea? Thanks!
It is not so clear exactly what you want to modify. Many options cannot be modified, and to modify for example columnDefs require re-initialisation (which needs destroy: true). If the options you want to modify is generic / static you can extend DataTables defaults:
$.extend( true, $.fn.dataTable.defaults, {
columnDefs: [
{ targets: '_all', className: 'dt-body-right' } // _all not -1
]
})
className and any other default can still be overwritten by the options
passed to the constructor. If that is the problem you can "monkey patch" DataTables:
const orgDT = $.fn.DataTable
$.fn.DataTable = function(config) {
config.columns[0].className += ' table-success'
return orgDT.call(this, config)
}
This gives 100% control over however this "tablepress" initalise DataTables - the config is simply picked up and can be altered before the table is instantiated.
I use ui-grid in my project with angularjs.
In my project ui-grid exports content to excel file and it's working perfectly.
Here is ui-grid declaration:
and here ui-grid definition in javascript:
$scope.gridOptions = {
columnDefs: [
{ field: 'name' },
{ field: 'company', cellFilter: 'mapCompany:this.grid.appScope.companyCatalog' }
],
enableGridMenu: true,
enableSelectAll: true,
exporterCsvFilename: 'myFile.csv',
exporterPdfDefaultStyle: {fontSize: 9},
exporterPdfTableStyle: {margin: [30, 30, 30, 30]},
exporterPdfTableHeaderStyle: {fontSize: 10, bold: true, italics: true, color: 'red'},
exporterPdfHeader: { text: "My Header", style: 'headerStyle' },
exporterPdfFooter: function ( currentPage, pageCount ) {
return { text: currentPage.toString() + ' of ' + pageCount.toString(), style: 'footerStyle' };
},
exporterPdfCustomFormatter: function ( docDefinition ) {
docDefinition.styles.headerStyle = { fontSize: 22, bold: true };
docDefinition.styles.footerStyle = { fontSize: 10, bold: true };
return docDefinition;
},
exporterPdfOrientation: 'portrait',
exporterPdfPageSize: 'LETTER',
exporterPdfMaxGridWidth: 500,
exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location")),
data : [
{
"name": "Derek",
"company": 423638
},
{
"name": "Frederik",
"company": 513560
}
],
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
},
gridMenuCustomItems: [
{
title:'Custom Export',
action: function ($event) {
// this.grid.api.exporter.csvExport( uiGridExporterConstants.ALL, uiGridExporterConstants.ALL, true );
var exportData = uiGridExporterService.getData(this.grid, uiGridExporterConstants.ALL, uiGridExporterConstants.ALL, true);
var csvContent = uiGridExporterService.formatAsCsv([], exportData, this.grid.options.exporterCsvColumnSeparator);
uiGridExporterService.downloadFile (this.grid.options.exporterCsvFilename, csvContent, this.grid.options.exporterOlderExcelCompatibility);
},
order:0
}
]
};
Here is workin PLUNKER!
But I need to export content to RTL excel file.
My question is how can I export ui-grid content to RTL excel file?
You have two options here. You can use the built-in menu, which I just did successfully on a demo from UIGrid or you can add in another module, the ui.grid.exporter
From the documentation:
This module provides the ability to export data from the grid. Data
can be exported in a range of formats, and all data, visible data, or
selected rows can be exported, with all columns or visible columns. No
UI is provided, the caller should provide their own UI/buttons as
appropriate, or enable the gridMenu
I used the built-in gridMenu, which downloaded a file without an extension called undefined. I was able to open it as is from LibreOffice Calc.
If you want more control, depending on your use case, then use the exporter feature. The exporter feature allows data to be exported from the grid in csv or pdf format. The exporter can export all data, visible data or selected data.
If you want to export as Excel you need to have installed the Excel-Builder module, available through: bower install excelbuilder.
You are leaving out a lot in your question though. The user can set the RTL or LTR options in excel itself, depending on the version. To do it in code will take another library or program of some kind. Years ago I did a lot of MS Word and Excel programming using Visual Basic.
My point is, you need to specify the excel version, do you want to modify the file programmatically, are you sending the file somewhere or does the user download it and then they open it with excel? etc... I need more of the details for your use case.
Looking through the Monaco examples and typings, it looks like themes can be configured via the defineTheme API. I'm trying to apply a VSCode theme to a Monaco instance, and am struggling with how to set the background color (for the whole editor, not just for a token).
Rules are defined as an array of objects with this shape:
IThemeRule {
token: string;
foreground?: string;
background?: string;
fontStyle?: string;
}
What should token be for setting the editor background?
More generally, is there a good way to apply this theme to a Monaco instance, without ripping out theme parsing logic from VSCode source? After a quick attempt to rip out the logic, it seems like a simple custom parser (ie. parse JSON theme definition -> flat list of IThemeRules) is the better way to go.
You can define your own theme and change the editor.background in colors option
monaco.editor.defineTheme('my-dark', {
...,
colors: {
"editor.background": '#394555'
}
});
You can define your theme like this
const theme = {
base: 'vs',
inherit: true,
rules: [
{ token: 'custom-info', foreground: 'a3a7a9', background: 'ffffff' },
{ token: 'custom-error', foreground: 'ee4444' },
{ token: 'custom-notice', foreground: '1055af' },
{ token: 'custom-date', foreground: '20aa20' },
]
}
and then apply it like this
monaco.editor.defineTheme('myTheme', theme)
var editor = monaco.editor.create(document.getElementById('container'), {
value: getCode(),
language: 'myCustomLanguage',
theme: 'myTheme'
});
I am trying to create custom tags in jsdoc 3.4.2. The config.json file is
{
"tags": {
"allowUnknownTags": true,
"dictionaries": ["jsdoc","closure"]
},
"source": {
"include": [
"app/"
],
"exclude": [],
"includePattern": ".+\\.js(doc|x)?$",
"excludePattern": "(^|\\/|\\\\)_"
},
"plugins": [
"plugins/custom-tags.js"
],
"templates": {
"cleverLinks": false,
"monospaceLinks": false
},
"opts": {
"destination": "./docs",
"recurse": true,
"encoding": "utf8"
}
}
In the custom-tags.js i have added these lines
exports.defineTags = function (dictionary) {
dictionary.defineTag("service", {
mustHaveValue: true,
canHaveType: false,
canHaveName: true,
onTagged: function (doclet, tag) {
doclet.service = tag.value;
}
});
};
But when i used the #service in the code, it is not showing. I had looked some link relating this and found out for custom tags we need to create template, but not found a way of creating one. I had installed jsdoc globally on my windows machine.
You are correct there is a two step process.
First you define a tag for jsdoc to find in the code and update its doclet object (like you have done)
Second you need the template, the thing which turns the doclet object into HTML, to know about the new property and do something with it.
Like you I've had a hard time finding instructions on making templates. The best I can suggest is check the jsdoc source code. You'll need to create a JavaScript file which exposes a publish function. The publish function will then iterate over the doclet object to generate HTML.
I had the same need as you but all I wanted to do was add a new section (header and text maybe a table of parameters) to the existing jsdoc template. I didn't really want to go and create a whole new template just for that so I ended up defining my tags in a way that they would end up appending or prepending HTML to the doclet.description property. Worked for me.
exports.defineTags = function(dictionary) {
dictionary.defineTag('routeparam', {
mustHaveValue: true,
mustNotHaveDescription: false,
canHaveType: true,
canHaveName: true,
onTagged: function(doclet, tag) {
if (!doclet.routeparams) {
doclet.routeparams = [];
}
doclet.routeparams.push({
'name': tag.value.name,
'type': tag.value.type ? (tag.value.type.names.length === 1 ? tag.value.type.names[0] : tag.value.type.names) : '',
'description': tag.value.description || '',
});
}
});
};
exports.handlers = {
newDoclet: function(e) {
const parameters = e.doclet.routeparams;
if (parameters) {
const table = tableBuilder.build('Route Parameters', parameters);
e.doclet.description = `${e.doclet.description}
${table}`;
}
}
}
Feel free to check out my repo to see how I did it https://github.com/bvanderlaan/jsdoc-route-plugin
I have a page where i'm using jstree and i would like to know if it's possible to add more options after instantiate it. In that case i want to add the dnd plugin depending if the user loged has that role assigned.
That's how i instantiate it:
$treeview.jstree({
"core" : {
"check_callback" : function (operation, node, node_parent, node_position) {
}
,"multiple":false
}
,"plugins" : [ "contextmenu","state" ]
,"dnd": {
copy : false
}
,"contextmenu": {"items": rewriteItems}
,"state": { "key":$treeview }
});
You must add the plugins that you need when jstreeis going to be instantiate but exists a way that can control if the nodes are draggable or not.
Your code will look like this:
var isDraggable = true;
$treeview.jstree({
"core" : {
"check_callback" : function (operation, node, node_parent, node_position) {
}
,"multiple":false
}
,"plugins" : [ "contextmenu","state","dnd" ]
,"dnd": {
copy : false,
is_draggable:function() { return isDraggable; }
}
,"contextmenu": {"items": rewriteItems}
,"state": { "key":$treeview }
});
You need to create a boolean variable isDraggable where you will keep true/false depending if the user is able to do that action. Then when you run your code and if the user is not able to drag the nodes the value will be false and he won't be able to drag it.