We Keep Coding

Add a non-breaking space button to the toolbar in CKeditor

I'm facing a problem with CKeditor (V4.17.0). I'm using it in a Symfony (V5) project. I installed the WYSIWYG with this doc. Then I downloaded the Non-breaking space plugin, I placed it in the path public/bundles/fosckeditor/plugins and I configured my yaml file:
twig:
form_themes:
- '#FOSCKEditor/Form/ckeditor_widget.html.twig'
fos_ck_editor:
default_config: config
configs:
config:
allowedContent: true
extraPlugins: 'nbsp'
removePlugins: 'elementspath,exportpdf,image,media, about'
toolbar:
- { name: "styles", items: [ 'Bold', 'Italic', 'Strike' ] }
- { name: "plugins", items: ['insertNbsp'] }
- { name: "paragraph", items: ['NumberedList'] }
plugins:
nbsp:
path: 'ckeditor/plugins/nbsp/'
filename: 'plugin.js'
My webpack.config.js :
.copyFiles([
{
from: './assets/images',
to: 'images/[path][name].[ext]',
},
{
from: './node_modules/ckeditor4/',
to: 'ckeditor/[path][name].[ext]',
pattern: /\.(js|css)$/,
includeSubdirectories: false,
},
{
from: './node_modules/ckeditor4/adapters',
to: 'ckeditor/adapters/[path][name].[ext]'
},
{
from: './node_modules/ckeditor4/lang',
to: 'ckeditor/lang/[path][name].[ext]'
},
{
from: './node_modules/ckeditor4/skins',
to: 'ckeditor/skins/[path][name].[ext]'
},
{
from: './node_modules/ckeditor4/vendor',
to: 'ckeditor/vendor/[path][name].[ext]'
},
{
from: './public/bundles/fosckeditor/plugins',
to: 'ckeditor/plugins/[path][name].[ext]'
},
])
The editor appear on the page, in my toolbar I've got everything I asked except the Non-breaking space plugin.
How can I insert into it ?

I don't think this plugin is used that way. You can't, if I'm not mistaken, load that into the toolbar.
Would it be possible for you to use this source code instead of the original plugin.js
CKEDITOR.plugins.add( 'nbsp',
{
init : function( editor )
{
editor.ui.addButton('Insert &nbsp', {
label: 'Insert ',
command: 'insertNbsp',
toolbar: 'insert',
icon: this.path + 'icons/icon.png'
});
// Insert if Ctrl+Space is pressed:
editor.addCommand( 'insertNbsp', {
exec: function( editor ) {
editor.insertHtml( ' ', 'text' );
}
});
editor.setKeystroke( CKEDITOR.CTRL + 32 /* space */, 'insertNbsp' );
}
} );
think about creating an icons folder as well as an icon of your choice to see a button in your toolbar.

Spec file not getting identified by Protractor cucumber framework

my Test config file is not able to find the spec file. i already have spec files created. previously i ran those scripts also.. but for more framework update i updated the paths of the files.. that makes spec files error and even i gave the full path also it is not able to find the spec file.
Spec File
var utilityInit,page2//browser2;
page1=new facebook(firstBrowser);
module.exports=function(){
this.Given(/^Open the browser and Load the URL$/,async function(){
await firstBrowser.get(properties.get("url1"));
browser.logger.info("Title of the window is :"+await browser.getTitle());
//screenshots.takesScreenshot("filename");
});
this.When(/^User entered the text in the search box$/,async function(){
firstBrowser.sleep(3000);
await page1.email().sendKeys(testData.Login.CM[0].Username);
browser.sleep(3000);
await page1.password().sendKeys(testData.Login.CM[0].Password);
});
this.Then(/^click on login button$/,async function(){
browser.sleep(3000);
await facebook.submit().click();
});
this.Then(/^User tried to open in new browser instance$/,async function(){
browser2=await openNewBrowser.newBrowserInit(firstBrowser);
utilityInit=new utility(browser2);
utilityInit.ignoreSync(properties.get("url2"));
browser2.manage().window().maximize();
console.log(await utilityInit.title()+" title");
browser2.sleep(5000);
});
this.When(/^User entered the text in the email field$/,async function(){
page2=new facebook(browser2);
console.log(await page2.title()+" browser2");
await page2.search().sendKeys("testing");
browser2.sleep(3000);
page1=new facebook(firstBrowser);
console.log(await page1.title()+" browser1")
await page1.email().sendKeys(testData.Login.CM[0].Username);
screenshots.takeScreenshot("newScreenshot");
firstBrowser.sleep(5000);
})
}
Config file
const log4js = require('log4js');
var fs=require('fs');
global.screenshots = require('protractor-take-screenshots-on-demand');
global.browser2;
var propertiesReader=require('properties-reader');
exports.config = {
//seleniumAddress: 'http://localhost:4444/wd/hub',
directConnect:true,
framework: 'custom',
// path relative to the current config file
frameworkPath: require.resolve('protractor-cucumber-framework'),
capabilities: {
'browserName': 'chrome',
metadata: {
browser: {
name: 'chrome',
version: '79'
},
device: 'MacBook Pro 15',
platform: {
name: 'OSX',
version: '10.12.6'
},
disableLog:true,
durationInMS:true,
openReportInBrowser:true
}
},
ignoreUncaughtExceptions:false,
// Spec patterns are relative to this directory.
specs: [
'../Proc/src/test/java/com/proc/features/test.feature'
],
beforeLaunch:function(){
if (fs.existsSync('./logs/ExecutionLog.log')) {
fs.unlink('./logs/ExecutionLog.log')
}
log4js.configure({
appenders: {
out: { type: 'console' },
info:{ type: 'dateFile', filename: '../Reports/logs/info', "pattern":"-dd.log",alwaysIncludePattern:false},
"console" : {
"type": "console",
"category": "console"
},
"file" : {
"category": "test-file-appender",
"type": "file",
"filename": "../Reports/logs/log_file.log",
"maxLogSize": 10240,
// "backups": 3,
// "pattern": "%d{dd/MM hh:mm} %-5p %m"
}
},
categories: {
"info" :{"appenders": ["console"], "level": "info"},
"default" :{"appenders": ["console", "file"], "level": "DEBUG"},
//"file" : {"appenders": ["file"], "level": "DEBUG"}
}
});
},
cucumberOpts: {
require:['../src/test/resources/com.proc.utility/timeOutConfig.js','../src/test/java/com/proc/TestCases/spec.js'],
tags: false,
profile: false,
format:'json:../Reports/jsonResult/results.json',
'no-source': true
},
onPrepare: function () {
const logDefault = log4js.getLogger('default');
const logInfo=log4js.getLogger('info');
screenshots.browserNameJoiner = ' - '; //this is the default
//folder of screenshot
screenshots.screenShotDirectory = '../Screenshots';
global.openNewBrowser=require("../src/test/resources/com.proc.utility/newBrowserinstance.js")
global.testData=require("../TestData/testData.json");
browser.logger = log4js.getLogger('protractorLog4js');
global.firstBrowser=browser;
global.properties=propertiesReader("../TestData/propertyConfig.properties");
browser.waitForAngularEnabled(false);
browser.manage().window().maximize();
global.facebook=require("../src/test/java/com/proc/pages/fbPageObjects.js");
global.utility=require("../src/test/resources/com.proc.utility/testFile.js");
},
plugins: [{
package: '../Proc/node_modules/protractor-multiple-cucumber-html-reporter-plugin',
options:{
// read the options part for more options
automaticallyGenerateReport: true,
removeExistingJsonReportFile: true,
reportPath:"../Reports/HtmlReports",
reportName:"test.html"
},
customData: {
title: 'Run info',
data: [
{label: 'Project', value: 'Framework Setup'},
{label: 'Release', value: '1.2.3'},
{label: 'Cycle', value: 'Test Cycle'}
]
},
}]
};
Log
H:\workspace\Proc\Configuration>protractor testConfig.js
[23:38:00] I/launcher - Running 1 instances of WebDriver
[23:38:00] I/direct - Using ChromeDriver directly...
DevTools listening on ws://127.0.0.1:51680/devtools/browser/e9688f83-2047-4535-91ba-bf2100fe6016
0 scenarios
0 steps
0m00.000s
can some one please help me to clear this issue.. this is related to my project framework POC..

To clarify some other comments I have seen being made by others here, you do not have to give the exact file path. You can do
specs: [
'../Proc/src/test/java/com/proc/features/']
This path does not look correct to me ^ are you sure that is the correct path? also you have a javascript project but your file structure is a java structure src/test/java why?

it's a simple thing that makes my framework works..
npm install cucumber#1.3.3 --save-dev

This because of the Spec path
specs: [
'../Proc/src/test/java/com/proc/features/test.feature' //Provide a complete path to your test file along with file extension(.ts)
],
Hope it helps you

How to implement gatsby-remark-images-grid in markdown using Gatsby.js

I'm making a blog in Gatsby.js using markdown and I want to use CSS grid in my blogposts to display a nice grid of images.
So I know Gatsby has got fantastic plugins to solve almost every problem.
I found out about gatsby-remark-images-grid which is supposed to solve my problem, but I can't seem to get it to work.
I did install it correctly (I think: npm install gatsby-remark-images-grid --save), put it in my gatsby-config.js, which looks like this:
module.exports = {
siteMetadata: {
title: 'Kids and Coconuts',
siteUrl: 'https://kidsandcoconuts.com',
},
plugins: [
'gatsby-plugin-react-helmet',
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: 'gatsby-starter-default',
short_name: 'starter',
start_url: '/',
background_color: '#663399',
theme_color: '#663399',
display: 'minimal-ui',
icon: 'src/images/gatsby-icon.png', // This path is relative to the root of the site.
},
},
`gatsby-plugin-catch-links`,
'gatsby-plugin-offline',
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
`gatsby-remark-prismjs`,
{
resolve: "gatsby-remark-images-grid",
options: {
},
},
]
}
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/content`,
name: "pages",
},
},
],
}
and I tried to put a image grid in one of my blogpost:
```
![](../time.jpg)
![](../time.jpg)
```
Does somebody see what am I forgetting or doing wrong?

Define the path in the markdown file. If markdown files are in src/pages/index.md and in src/images/image.jpg you would put this in the MD file.
images:
- /images/image1.jpg
- /images/image2.jpg
- /images/image3.jpg

ckeditor do not work when i add extraPlugins

i have uploaded codesnippet plugin inside /ckeditor/plugins/ directory.
My config.js file codes are:
CKEDITOR.editorConfig = function( config ) {
config.toolbar = [
{ name: 'basic', items: [ 'Bold', 'Italic', 'Underline' ] },
{ name: 'font', items: [ 'Font' ] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', 'Blockquote' ] },
{ name: 'links', items: [ 'Link', 'Unlink' ] },
{ name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule' ] },
{ name: 'last', items: [ 'Maximize' ] }
];
config.extraPlugins = 'codesnippet';
config.format_tags = 'p;h1;h2;h3;pre';
config.entities = false;
config.removeDialogTabs = 'image:advanced;link:advanced;table:advanced';
config.disableNativeSpellChecker = false;
};
But when i add config.extraPlugins = 'codesnippet'; line then editor do not work even i can't see textarea field.
And when i remove config.extraPlugins = 'codesnippet'; line then editor works perfectly.

Use the online builder to add the codesnippet plugin to your editor. Most probably your editor is missing dependencies.
Most plugins in CKEditor require some additional plugins to operate. If you download manually plugin A, there is a chance that you need to download dependencies for plugin A... and plugin B, which is required by plugin A. And sometimes you will need to download dependencies for plugin C, which was required by plugin B. Sounds like a nightmare, this is why we created online builder and why package managers exist.

How to exclude files from Dojo's Build System?

I'm following the official documentation page about the topic but I cannot configure it to ignore .txt files.
I have a all.profile.js on the root of my project:
var profile = (function(){
return {
basePath: "./",
releaseDir: "../web",
action: "release",
layerOptimize: "closure",
optimize: "closure",
cssOptimize: "comments",
mini: true,
stripConsole: "all",
packages: [
{ name: "myapp", location: "myapp" }
]
};
})();
And this is the package.json inside the folder myapp:
{
"dojoBuild": "myapp.profile.js",
"name": "my-app",
"description": "This is My App",
"version": "1.0",
"main": "src"
}
And this is the myapp.profile.js also inside the folder myapp:
var profile = (function(){
return {
// don't need to do anything on the 'test' folder so don't define it on the trees.
trees: [
["libs","libs",/txt$/], // ignore .txt files -> DOESN'T WORK!
["src","src",/txt$/] // ignore .txt files -> DOESN'T WORK!
],
resourceTags: {
test: function(filename, mid){
console.log("[test] filename: ",filename);
return filename.indexOf("test/") !== -1;
},
copyOnly: function(filename, mid){
//console.log("[copyOnly] mid: ",mid);
return false;
},
miniExclude: function (filename, mid) {
console.log("[miniExclude] filename: ",filename);
return mid in {
'myapp/myapp.profile': 1,
'myapp/package.json': 2
} || mid.indexOf(".txt") !== -1; // .txt are not ignored so exclude them...
},
amd: function(filename, mid) {
//console.log("[amd] mid: ",mid);
// myapp is not AMD but this will 'convert' it
return false;
}
}
};
})();
Finally, this is the folder structure:
web_dev/
-- myapp/
---- libs/
---- src/
---- test/
---- myapp.profile.js
---- package.json
-- all.profile.js
The build tool runs fine, it reads and process all files but the .txt files are still on the release dir.
Please let me know if you spot any mistakes on my logic or how I'm configuring the build system. I'm using Dojo 1.9.1.
Thanks in advance.

I'm not sure what is wrong with my initial scenario but here are the changes that I made to have the desired result:
Move the trees declaration from the myapp.profile.js to
all.profile.js inside the 'myapp' package definition.
Instead of specifying the root of the trees, check
everything and exclude accordingly: [".", ".",
/(\/\.)|(~$)|(test|txt)/]
The final all.profile.js:
var profile = {
basePath: "./",
releaseDir: "../web",
releaseName: "built",
action: "release",
layerOptimize: "closure",
optimize: "closure",
cssOptimize: "comments",
mini: true,
stripConsole: "all",
packages: [
{
name: "myapp",
location: "myapp",
trees: [
// don't bother with .hidden, tests and txt.
[".", ".", /(\/\.)|(~$)|(test|txt)/]
]
}
]
};
If anyone can pin point exactly what I was doing wrong, please share.