We Keep Coding

Youtube plugin can't be added to my ckeditor

I have ckeditor library
$(function () {
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace('editor1');
//bootstrap WYSIHTML5 - text editor
})
And I wanted to add YouTube plugin to it.
I downloaded the file from the official site and extract it inot plugins folder in ckeditor and the config.js file is:
/**
* #license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here.
// For complete reference see:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
// The toolbar groups arrangement, optimized for two toolbar rows.
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' },
{ name: 'youtube' }
];
config.allowedContent = true;
// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
config.removeButtons = 'Underline,Subscript,Superscript';
// Set the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';
// Simplify the dialog windows.
config.removeDialogTabs = 'image:advanced;link:advanced';
config.extraPlugins = 'youtube';
};
But it doesn't work.
And I tried other plugins and didn't work neither.

How to clear pre-defined blockly custom blocks in Angular

I have some problem initializing custom blocks
I created blockly custom blocks to modal
export const ConditionBlocklyBlock: Block[] = [
{
type: 'SUM_MAT',
message0: '%1 %2 %3',
colour: '#F88370',
tooltip: 'tooltip',
inputsInline: true,
args0: [
{
type: 'input_value',
name: 'first_value'
},
{
type: 'field_dropdown',
name: 'operator',
options: [
[ '>', '>' ],
[ '>=', '>=' ],
[ '<', '<' ],
[ '<=', '<=' ],
[ '==', '==' ]
]
},
{
type: 'input_value',
name: 'second_value'
}
],
output: "Boolean"
},
{
type: 'swapList',
message0: '%1 %2 %3',
colour: '#F88370',
tooltip: 'tooltip',
inputsInline: true,
args0: [
{
type: 'input_value',
name: 'first_value',
check: 'Boolean'
},
{
type: 'field_dropdown',
name: 'logical_operator',
options: [
[ 'AND', 'AND' ],
[ 'OR', 'OR' ],
]
},
{
type: 'input_value',
name: 'second_value',
check: 'Boolean'
}
],
output: 'Boolean'
}
];
const conditionBlocks: Block[] = ConditionBlocklyBlock;
Blockly.defineBlocksWithJsonArray(conditionBlocks);
When the modal is opened, the block is initialized.
The first time it is opened, it is normal, but from the second time on, the following log appears.
Block definition #77 in JSON array overwrites prior definition of "SUM".
Block definition #78 in JSON array overwrites prior definition of "SUM-MAT".
Block definition #79 in JSON array overwrites prior definition of "SUM_MV".
JsonOverwritesLog
Please give me some advice.

The ckeditor toolbar missing

I made a custom ckeditor but I had all the basic things plus a few more. I've been trying to use ckeditor and tried both by both replacing textarea element by class name and by javascript code, but in both situations, all I get in my textarea is
My code for it is here:
{{ Form::textarea('LONG_DESCRIPTION', $article->LONG_DESCRIPTION, ['class' => 'edito', 'id'=>'editor1']) }}
<script src="/*****/vendor/ckeditor/ckeditor.js"></script>
<script>
CKEDITOR.replace('editor1',
{
toolbar: 'MyToolbar'
});
</script>
And this is the config file just in case:
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.toolbar = 'MyToolbar';
config.toolbar_MyToolbar =
[
{ name: 'document', items : [ 'NewPage','Preview' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','Scayt' ] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'
,'Iframe' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format' ] },
{ name: 'basicstyles', items : [ 'Bold','Italic','Strike','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'tools', items : [ 'Maximize','-','About' ] }
];
};
What am I doing wrong or have wrong for it not to work and just appear as that in the image?

CKeditor adding class to img tag

I am trying to add a class to any inserted img tag in CKeditor. I have tried various ways but can't seem to figure out how the setting of this plugin works. Whilst there are tonnes of documents, it only mentions that a code needs to be added, but not where it should be added, there are loads of files.
I tried adding it to the bottom on config.js
/**
* #license Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here.
// For complete reference see:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
// The toolbar groups arrangement, optimized for two toolbar rows.
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' }
];
// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
config.removeButtons = 'Underline,Subscript,Superscript';
// Set the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';
// Simplify the dialog windows.
config.removeDialogTabs = 'image:advanced;link:advanced';
config.extraPlugins = 'confighelper';
config.stylesSet = 'my_styles';
};
CKEDITOR.stylesSet.add( 'my_styles', [
{ name: 'Custom Image', element: 'img', attributes: { 'class': 'myClass' }}
]);
That didn't work
So I tried adding it to the actual html page
<script>
CKEDITOR.stylesSet.add( 'my_styles', [
{ name: 'Custom Image', element: 'img', attributes: { 'class': 'myClass' }}
]);
</script>
That didn't work either
Reading their docs I can't make any sense of it http://docs.ckeditor.com/#!/guide/dev_howtos_styles
How does one add a class to any img tags added through the editor?

I'm not using CKEDITOR, but the problem could be, that the stylesSet is not declared on CKEDITOR call, since its defined later.
Try moving CKEDITOR.stylesSet.add prior to editorConfig.
Alternatively put your styles into the first code block:
CKEDITOR.editorConfig = function( config ) {
...
...
config.stylesSet = [
{ name: 'Custom Image', element: 'img', attributes: { 'class': 'myClass' }}
];
};
</script>
There are also some more Docs about the usage http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-stylesSet

add toolbargroup items dynamically in ckeditor

config.toolbarGroups = [
{ name: 'basicstyles'},
{ name: 'colors'},
{ name: 'links', items : [ 'Source', 'RemoveFormat' , 'Blockquote','BulletedList'] },
{ name: 'clipboard', items: [ 'Undo','Redo'] }
];
Now I want to add dynamnically readmore item to clipboard
Here is my editor initialization,
editor = CKEDITOR.replace('descr',{
toolbar : 'Full',
resize_enabled : false
);
Thanks in Advance!!