Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
M using ckeditor ,i would like to add word count and spell checker feature,
can anyone help me,i already download plugins for word count
following is my code
CKEDITOR.editorConfig = function (config) {
// Define changes to default configuration here. For example:
// config.language = 'fr';`
// config.uiColor = '#AADC6E';
config.extraPlugins = 'onchange, wordcount';
config.minimumChangeMilliseconds = 100;
config.htmlEncodeOutput = false;
config.toolbar_Custom = [
{ name: 'styles', items: ['Styles', 'Format'] },
{ name: 'basicstyles', items: ['Bold', 'Italic', 'Strike', '-', 'RemoveFormat'] },
{ name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Blockquote'] },
{ name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
];
config.toolbar_Full.push(['CountSelection']);
};
Try adding this line and remove wordcount from config.extraPlugins:
config.plugins = 'wordcount';
Also add this line to your config.toolbar_Custom array:
{ name: 'editing', items: [ 'SpellChecker' ] },
Hope this helps
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/
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 10 months ago.
Improve this question
Using Gatsby v4. In my blog posts there is a field author. There is a separate authors file which includes details of the blog post authors - full name and avatar.
Post File:
---
date: "2021-12-31"
title: "Happy New Year"
author: chuck
---
## Happy New Year!
content/authors/author.yaml
- id: chuck
name: Chuck Norris
avatar: chuck.jpg
The GraphQL looks like this:
export const pageQuery = graphql`
query($slug: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
html
excerpt(pruneLength: 200)
frontmatter {
title
author {
id
name
avatar
},
}
fields {
slug
readingTime {
minutes
}
}
}
}
But in the BlogPost template the data.markdownRemark.frontmatter.author is null.
In gatsby-config.js I have:
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/content/authors`,
name: `authors`
}
},
and
mapping: {
'MarkdownRemark.frontmatter.author': `AuthorYaml`
}
But it doesn't help. Same code used to work on Gatsby v2 and stops working with conversion to v4.
Turns out there was a typo in a different place that causes this.
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 have a config.toolbarGroups setting in config.js but I don't know what name to use for the groups to add font family/font size controls. (It seems the documentation is lacking in this regard). I've found some suggestion that I should use CKBuilder to create a package that already includes it, but I can't redeploy the entire ckeditor just to add a couple of buttons.
Edit: My CKEditor is version 4
Any advise?
Thanks!
config.extraPlugins = 'font';
You have to add the plugin...
There are two (mutually exclusive) ways to configure the toolbar. Check out the following:
http://ckeditor.com/latest/samples/plugins/toolbar/toolbar.html
I tried to use config.toolbarGroups first, but ended up using config.toolbar instead. Here's what I ended up using:
config.toolbar = [
{ name: 'save', items: [ 'savebtn','Undo','Redo' ] },
{ name: 'clipboard', items: [ 'Cut','Copy','Paste','PasteText','PasteFromWord'] },
{ name: 'document', items: [ 'Find','Replace'] },
'/',
{ name: 'lists', items: [ 'NumberedList','BulletedList','Outdent','Indent'] },
{ name: 'insert', items: [ 'Image','Table','Smiley','SpecialChar'] },
{ name: 'link', items: ['Link','Unlink'] },
'/',
{ name: 'basicstyles', items: [ 'Font','FontSize','Bold','Italic','Underline','Strike','Subscript','Superscript'] },
//'/',
{ name: 'align', items: [ 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] }
];
Note that I am using a save plugin that was generously contributed by kasper Taeymans, which can be found at the following location:
How to add an ajax save button with loading gif to CKeditor 4.2.1. [Working Sample Plugin]
I also found the following document to be really useful, even though it related to version 3:
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar
I used the information in this article to produce my configuration (I'm using version 4.2.1), specifically the names of the items (e.g. Cut, Copy, Paste), as this was the missing link in my case.
Took me a long time to figure out that I explicitly had to add FontSize to the toolbar, too - doesn't seem to work with Font only.
This can be used to add font family and font size in the CkEditor.
This is to be done in config.js.
Also see docs
config.font_names = 'Arial;Times New Roman;Verdana;' + CKEDITOR.config.font_names;
config.toolbar_Full =
[
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'Outdent','Indent','-','Blockquote','CreateDiv','-',
'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] }
];
config.toolbar = 'Full';
Add directly using script :
CKEDITOR.replace('content', {
extraPlugins: 'uicolor,colorbutton,colordialog,font',
});
To change default styles of text :
CKEDITOR.addCss(".cke_editable{cursor:text; font-size: 25px; color: #FFFFFF;background-color: #006991;}");
All,
From CKEditor's developer guide(http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar), you can see there are two ways to define a toolbar:
method 1: config.toolbar_Full =
[
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
....
];
method 2: config.toolbar_Full =
[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']....
];
What's the difference between them? is the method 2 used in earlier version so that they have to support for backward compatibility?
another question:
config.toolbar properties, from the doc, it can be a string like config.toolbar="Full" or an array like:
config.toolbar =
[
[ 'Source', '-', 'Bold', 'Italic' ]
];
Don't you think it's kind of confusion?
As per my knowledge
Method 1: has naming of the group while the second method contains only the itmes used in method 1.
Config.toolbar can be either a name of the settings or the array of the group settings.