I am trying to set an explicit list of allowed contents in my ck editor, but it seems that I'm not being inclusive enough in my list because almost all my plugins are disabled. If I set the ACF back to auto (delete allowedContent) then all the plugins come back. Here is my allowedConent in the config.js
config.allowedContent =
{
h1: true,
h2: true,
h3: true,
'span, p, ul, ol, li,': {
styles: 'color, margin-left, margin-right, font-size'
},
'a[!href,target,name]': true,
b: true,
u: true,
i: true,
}
Yet the only buttons that seem to be enabled are bold, underline, and italics. I'm trying to figure out why my other plugins aren't working. For instance, the link plugin has the following:
var allowed = 'a[!href]',
required = 'a[href]';
// Add the link and unlink buttons.
editor.addCommand( 'link', new CKEDITOR.dialogCommand( 'link', {
allowedContent: allowed,
requiredContent: required
} ) );
editor.addCommand( 'anchor', new CKEDITOR.dialogCommand( 'anchor', {
allowedContent: 'a[!name,id]',
requiredContent: 'a[name]'
} ) );
As you can see, I have anchor with the necessary properties defined (anchor with an href and name), yet the button doesn't show up! I have verified my syntax is correct by printing out CKEDITOR.instances["editor-1"].filter.allowedContent and it shows the object I'm expecting. I have also tried adding a bunch of common elements like to see if adding one of them brings the plugins back, but it does not. So what am I missing?
Well it seems that I was mixing my object syntax and my string syntax. Once I corrected this, the anchor and font-size buttons started appearing. The following is what I have so far:
config.allowedContent =
{
h1: true,
h2: true,
h3: true,
a: {
attributes: ['!href','target','name']
},
b: true,
u: true,
i: true,
// font-size
span: {
styles: { 'font-size': '#(size)' },
overrides: [ { element :'font', attributes: { 'size': null } } ]
}
}
I still need to figure out the proper definition for font-color and a few others, but that's just a matter of inspecting the plugins' code and seeing what they expect.
Related
I am currently working on a project for my company, where I need to plot highstock charts, which show energy-data of our main buildings.
Since it is live data, new datapoints come per Websocket every few-or-so seconds. However, the graph should only show one datapoint every hour. I wanted to clear this with the highstock dataGrouping, but it does not really work. It groups the points yes, but it still shows the „transmission“, the graph-line, between them. Thus making the whole graph completely irreadable.
In an other Version of the project, the graph only shows the latest datapoint of each group (as specified in the „approximate“ object in the chart options), but also does not start a new group after the chosen Interval runs through.
I've been sitting on this problem for about 3 days now and have not found any proper completely working solution yet.
Unfortunately, due company policy and due to hooks and components necessary, which are only used here in the company, I'm not able to give you a jsfilddle or similar, even though I'd really love to. What I can do is give you the config, mabye you find something wrong there?
const options = {
plotOptions: {
series: {
dataGrouping: {
anchor: 'end',
approximation: function (groupData: unknown[]) {
return groupData[groupData.length - 1];
},
enabled: true,
forced: true,
units: [['second', [15]]],
},
marker: {
enabled: false,
radius: 2.5,
},
pointInterval: minutesToMilliseconds(30),
pointStart: currentWeekTraversed?.[0]?.[0],
},
},
}
This would be the plotOptions.
If you need any more information, let me know. I'll see then, what and how I can send it to you.
Thank you for helping. ^^
This is example how dataGrouping works with live data,
try to recreate your case in addition or use another demo from official Highcharts React wrapper page.
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'minute',
count: 15,
text: '15S',
preserveDataGrouping: true,
dataGrouping: {
forced: true,
units: [
['second', [15]]
]
}
}, {
type: 'hour',
count: 1,
text: '1M',
preserveDataGrouping: true,
dataGrouping: {
forced: true,
units: [
['minute', [1]]
]
}
}
},
Demo: https://jsfiddle.net/BlackLabel/sr3oLkvu/
I'm using handsontable on an angular app with ngHandsontable. I can see that I need to set search to true in the table settings, which should make a query method available.
Can someone explain how I am able to access that method through my angular controller?
<input class="" id="handsonSearch" placeholder="Search..." ng-model="searchQuery" />
<hot-table settings="tableSettings.settings"
datarows="mappingData"
col-headers="true"
height="700">
<hot-column data="Column1" title="'Column One'"></hot-column>
</hot-table>
Angular
function GlobalMappingController($scope) {
$scope.tableSettings = {
settings: {
contextMenu: true,
colHeaders: true,
dropdownMenu: true,
afterChange: afterChange,
beforeChange: beforeChange,
search: true,
query: $scope.searchQuery
}
};
The issue is access to the root handsOnTable instance created by ngHandsOnTable isn't as intuitive as you might think, but in order to access all the functions handsOnTable has by itself you have to do something like this.
First, declare the variable we'll use as the instance of the table
$scope.handsOnTable;
You can access the root for handsOnTable by setting the afterInit parameter in the settings array
$scope.tableSettings = {
settings: {
contextMenu: true,
colHeaders: true,
dropdownMenu: true,
afterChange: afterChange,
beforeChange: beforeChange,
search: true,
query: $scope.searchQuery,
//insert this
afterInit: function() {
$scope.handsOnTable = this;
}
}
};
You can then set an ng-change on the input to something like this:
function search() {
$scope.handsOnTable.search.query($scope.searchQuery);
$scope.handsOnTable.render();
}
You'll also need to, in the same manner as the afterInit, set afterchange with the same statement. If you've got your own custom version of the function then just put it in after everything else has ran.
Keep in mind you'll have to keep the input box bound to searchQuery and add onChange="search()" but that should work - at least it did for me.
I'm having difficulty deactivating the Advanced Content Filter (config.allowedContent = true; dosen't seem to work). I've tried everything that I've read on the forums, including clearing the cache, and making it an external file.
CKEditor 4.2.2 - allowedContent = true is not working
I've even added config.protectedSource.push lines, and they work to a point. The CKEditor still adds div tags and partially deletes other tags.
I'm creating a set of well designed templates for clients to use, so In the end I don't want CKEditor to touch my code at all. Here is what I have in the config.js. If anyone can see something I did wrong, or knows of a way to make it work, please help this somewhat stressed web guy.
Thanks,
Rusty
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'insert' },
{ name: 'links' },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'tools' },
{ name: 'about' }
];
// Define changes to default configuration here. For example:
// config.uiColor = '#AADC6E';
// misc options
config.allowedContent = true; // allowedContent doesn't work :-(
// Protected Source
config.protectedSource.push(/<section>[\s\S]*?<\/section>/gi); // allow <section></section>
config.protectedSource.push(/<span>[\s\S]*?<\/span>/gi); // allow <span></span>
config.protectedSource.push( /<link[\s\S]*?\>/g ); // allow <link> tag
config.protectedSource.push( /<!--[\s\S]*?\>/g ); // allow <comment> tag
config.protectedSource.push( /<br[\s\S]*?\/>/g ); // allow BR Tags
config.protectedSource.push(/<script>[\s\S]*?<\/script>/gi); // allow <script></script>
config.protectedSource.push(/<div>[\s\S]*?<\/div>/gi); // allow <div></div>
config.removeButtons = 'Anchor,Iframe';
config.format_tags = 'p;h1;h2;h3;h4;h5;h6'; // format button options
config.height = '500px'; // edit window height
config.skin = 'moono';
config.stylesSet = 'vam_styles:/templates/admin/-css/vam_styles.js'; // style button options
// Only add rules for p and span elements.
config.stylesheetParser_validSelectors = /\^(p|span\div)\.\w+/;
config.stylesheetParser_skipSelectors
};
I'm creating a set of well designed templates for clients to use, so In the end I don't want CKEditor to touch my code at all.
This is not possible. CKEditor is not a web site builder into which you can load any possible HTML. It is a rich text editor. So you should use it to edit the textual part of the website, not the whole layout.
For instance, if you had a layout with two columns and some header above them, it would be best if there were 3 editors - one for each column and one for the header. Of course, in this basic case CKEditor could be used to edit or 3 sections at once, but the more complex the layout the more important it is to use CKEditor correctly.
PS. It's CKEditor, not ckEditor.
Thanks for your reply.
I wasn't talking about site design templates, but page design templates. On the Full featured version of CKEditor there is a template button that we've been able to enhance. We now are able to let our clients choose several well designed page layouts that are responsive for different devises. It is very effective.
After trying everything I found the culprit that was causing the problem. I was using <br> instead of <br />. As soon as I switched the editor left my code alone.
Best Wishes!
Rusty
I am using CKEditor version 4. I am making custom styles. The problem is, when the styles are shown in the dropdown, any styles with float:right move over on the display like this:
Item 1
Item 2
FLoat right item
Normal Item
I have been trying to override the styles but it is not working. They are created dynamically with JavaScript and I am not even sure the class names to affect this.
Anyone know how I can fix this?
My code for the styles is like this:
{ name: 'Image 25% Right', element: 'span', attributes: { 'class': 'img_right_25' } },
{ name: 'Image 25% Left', element: 'span', attributes: { 'class': 'img_left_25' } },
{ name: 'Image 50% Right', element: 'span', attributes: { 'class': 'img_right_50' } },
{ name: 'Image 50% Left', element: 'span', attributes: { 'class': 'img_left_50' } },
and then
.img_right_25 {
float:right;
margin-left:10px;
}
.img_left_25 {
float:left;
margin-right:10px
}
In editor.css, try adding a rule like this:
.cke_panel_listItem * {
float:none !important;
}
Then refresh the page (make sure that the old contents of editor.css is not being used from cache!).
What this is trying to do (I haven't tested it) is force every descendant element under .cke_panel_listItem to have a float value of "none". The !important should make sure that that this rule cannot be overridden by subsequent style definitions and so the styling made by JS is disregarded.
How to disable a particular column using handsontable in handsontable.I want first column only editable other three columns get disable.I'm using readonly true for three columns but it's not work how to disable....
columns: [
{
type:'handsontable',
handsontable: {
colHeaders: ['EmployeeNo','EmployeeName','Department','Designation'],
data: manufacturerData,
columns:[{},{readOnly: true},
{
readOnly: true
},
{
readOnly: true
}]
}
},
{}]
In Project i do it with this line of codes.
cells : function(row, col, prop) {
var cellProperties = {};
if (col > 0) {
cellProperties.readOnly = true;
}
else
{
cellProperties.readOnly = false;
}
return cellProperties;
}
You can find working example of it on given link. but give example is for set a row to readonly. http://handsontable.com/demo/conditional.html
Your code is working properly. Please see JSFiddle with approach similar to you.
$("#test").handsontable({
startRows: 1,
startCols: 1,
rowHeaders: true,
colHeaders: true,
minSpareCols: 0,
minSpareRows: 0,
contextMenu: false,
fillHandle: false,
outsideClickDeselects: false,
removeRowPlugin: false,
currentRowClassName: 'currentRow',
currentColClassName: 'currentCol',
columnSorting: true,
colHeaders: ['Col1','Col2','Col3','Col4'],
columns: [{},
{readOnly: true},
{readOnly: true},
{readOnly: true}]
});
Working link : http://jsfiddle.net/rvd61fuy/
Let me know, if you are facing anyother issue.
To disable you could make the cell/column readonly and maybe even set the background color to a grey(to give a special effect).Both the methods i.e the one where you use readonly:true in the column declaration when initializing the handsontable and also the one where you use cell properties and use conditions to determine if you need to set a cell to read only when the table is being rendered,both methods seem to be working for me.You need to instantiate your HOT correctly, that may be the problem. Also when using cell properties you needn't use cellProperties.readOnly = false as by default the cells are not read only unless you have coded for that seperately. If you need further assistance let me know.
Also check that you have the latest version of handsontable. I ran into problems trying to implement readonly on cells which had checkbox columns with erratic results.
Using the version below solved my issues (below is what I used in my HTML page)
<script src="http://docs.handsontable.com/pro/1.9.0/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://docs.handsontable.com/pro/1.9.0/bower_components/handsontable-pro/dist/handsontable.full.min.css">