How to avoid CKeditor to load files when it's invoked - yii2

I use CKEditor in a modal window, so it's "invoked" when the modal is shown.
When this happens I see CKEditor try to loads files like:
ckeditor/lang/es.js?t=J5S8
ckeditor/styles.js?t=J5S8
ckeditor/plugins/confighelper/plugin.js?t=J5S8
ckeditor/skins/moono-lisa/editor.css
...
I tried to load all these files in the page, but when CKeditor is invoked it tries to load again more files, even the ones I already loaded.
This is a problem in my case because I use an AssetManager and Minification system in my framework (Yii2), and since everything is packed in one file, CKeditor fails when it tries to load again files.
Is there any way to preload everything that CKeditor will need, in order to have the Assets and Minify process working well ?
My CKEditor config is:
CKEDITOR.replace('#editor', {
customConfig: '',
height: 200,
language: 'es',
extraPlugins: 'confighelper',
removePlugins: 'elementspath',
resize_enabled: false,
toolbarLocation: 'top',
toolbar: [
{ name: 'styles', items: [ 'Format' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline' ] },
{ name: 'links', items: [ 'Link', 'Unlink' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Undo', 'Redo' ] },
{ name: 'editing', groups: [ 'spellchecker' ], items: [ 'Scayt' ] },
{ name: 'tools', items: [ 'Maximize' ] },
]
});

Related

Why does ckeditor plugin tab doesn't work?

Hy,
I need the tab function to work in Ckeditor and I put the "tab" plugin in the plugin folder and I told the editor but when I press tab on the keyboard the focus leaves the editor. What am I doing wrong? My script:
<script>
CKEDITOR.replace( 'editor', {
width: 795, height: 642,
enterMode: CKEDITOR.ENTER_DIV,
shiftEnterMode: CKEDITOR.ENTER_BR
}
);
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'forms', groups: [ 'forms' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
'/',
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'about', groups: [ 'about' ] }
];
config.removeButtons = 'Source,Save,Templates,NewPage,Preview,Print,Flash,HorizontalRule,Smiley,PageBreak,Iframe,ShowBlocks,Maximize,About,Link,Unlink,Anchor,Language,CreateDiv';
config.extraPlugins = 'tab'; };
</script>
If you wish to move the text when pressing tab, you need to set the tabSpaces configuration setting to value greater than 0 e.g.
var editor = CKEDITOR.replace( 'editor1', {
tabSpaces : 4
});
Please also see:https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-tabSpaces
Thanks but it's only works to the first line. When I press Tab, the focus get out of the document.

CKEditor Source Dialog shows HTML entities that are not stored in the database

When I click the 'Source' button on the menu bar, I see the HTML source of the page but it's showing the code as follows:
<p>This is how the code is showing now</p>
When I want to show it like this:
<p>This is how the code should be showing</p>
I thought it was storing it in the database that way but it's not. What needs to change in the config.js file for me to view the source correctly?
EDIT
Here's my complete config.js file:
CKEDITOR.editorConfig = function( config ) {
config.language = 'en';
config.uiColor = '#ededed';
config.height = 500;
config.toolbarCanCollapse = false;
config.extraPlugins = 'font,justify,liststyle,filebrowser,colorbutton,panelbutton';
config.allowedContent = true;
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'forms', groups: [ 'forms' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'liststyle' },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'about', groups: [ 'about' ] },
{ name: 'tabletools' }
];
config.removeButtons = 'About';
config.format_tags = 'p;h1;h2;h3;pre';
};
What you are seeing is HTML Entity for space. Most likely you have used below configuration in your editor:
var editor = CKEDITOR.replace( 'editor1', {
entities_additional : '#32'
});
In config.js this will look like: config.entities_additional = '#32';

Sencha Touch JsonP Request TypeError Ext.data is undefined

at the moment I'm working on my first Sencha Touch Application and I run into a problem I spent lots of hours until now.
I tried to get the value from a cross domain Json to fill a nested list in my application.
When I run my code in browser everything works fine. The List is filled and I can call a detail view by tap on a leafitem.
But after building the sencha touch app with "sencha app build", I only get the following error in the browser console when starting the app.
TypeError: Ext.data is undefined
Ext.data.JsonP.callback1({ Here is the long valid JSON content });
I don't unterstand, why Ext.data is undefined. I would appreciate if someone could help me. I tried several solutions but I couldn't get this running.
These are the contents of my files:
Store:
Ext.define("Test.store.ExpStore", {
extend: "Ext.data.TreeStore",
requires: [
'Ext.data.JsonP'
],
config: {
model: "Test.model.ExpModel",
proxy: {
type: 'jsonp',
url: 'http://myurl/project/mylist.php',
callbackKey: 'callback',
reader: {
type: 'json',
rootProperty: 'experts'
}
}
}});
Model:
Ext.define('Test.model.ExpModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'name', type: 'string'},
{name: 'number', type: 'string'},
{name: 'active', type: 'boolean'}
]
}});
ListView:
Ext.define('Test.view.ExpListView', {
extend: 'Ext.NestedList',
alias: 'widget.expListView',
config: {
fullscreen: true,
title: "Experts",
displayField: 'name',
store: 'ExpStore',
}});
app.json
"js": [
{
"path": "touch/sencha-touch.js",
"x-bootstrap": true
},
{
"path": "bootstrap.js",
"x-bootstrap": true
},
{
"path": "app.js",
"bundle": true, /* Indicates that all class dependencies are concatenated into this file when build */
"update": "delta"
}],
app.js
Ext.application({
name: 'Test',
requires: [
'Ext.MessageBox',
//'Ext.data.JsonP',
'Ext.data.*'
],
models: [
'ExpModel'
],
views: [
//'Main'
'ExpDetailsView',
'ExpListView'
],
controllers: [
'ExpController'
],
stores: [
'ExpStore'
],
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon#2x.png',
'144': 'resources/icons/Icon~ipad#2x.png'
},
isIconPrecomposed: true,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
var expListView = {
xtype: 'expListView'
};
var expDetailsView = {
xtype: 'expDetailsView'
};
// Initialize the main view
Ext.Viewport.add(expListView, expDetailsView);
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}});

Why isn't my custom tool bar appearing on my CKEditor

I have followed through a tutorial on the CKEditor website but I can't figure out why my custom tool bar is not appearing on the CKEditor. Originally I had all of the default toolbar on, but now it has reverted to just being a text area. Can someone help please? The code is as follows:
$(function () {
CKEDITOR.replace('txtBodyText',
config.toolbar=[
{ name: 'basicstyles', items: ['Bold', 'Italic', 'Underline'] },
{ name: 'list', items: ['NumberedList', 'BulletedList'] },
{ name: 'Indent', items: ['Outdent', 'Indent'] },
{ name: 'align', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
{ name: 'links', items: ['link', 'unlink;'] },
{ name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule'] },
{ name: 'styles', items: [ 'Font', 'FontSize'] },
{ name: 'Clipboard', items: ['Cut', 'Copy', 'PasteText', 'PasteFromWord'},
{ name: 'undo', items: [ 'Undo', 'Redo'] },
{ name: 'tools', items: [ 'Maximise'] },
{ name: 'mode', items: [ 'Source'] }
]);
})
<td class="prompt">Body</td>
<td>
<%: Html.TextArea("txtBodyText", Model.EmailTemplate.BodyText)%>
</td>
That doesn't look like a valid second argument to the replace function. This might be of assistance:
var configObject = {};
configObject.toolbar = [
[ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ],
[ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ],
'/',
[ 'Bold', 'Italic' ]
];
CKEDITOR.replace('txtBodyText', configObject);
See the difference between the two? The 2nd argument to replace needs to be a valid JavaScript object. There was a typo in your example: see unlink;? That's not really correct :).
I had an extra pair of brackets at the bottom. If there is a problem in the Javascript it will not run the whole segment of code. So it's best to check!
CKEDITOR.replace() accepts the ID of the element to replace with the editor and the config. However, you do not need to write:
CKEDITOR.replace( 'txtBodyText',
config.toolbar=...
it's enough to just use toolbar, without the preceding config. And also, as pointed above, your JavaScript code is incorrect (notice your = instead of :):
CKEDITOR.replace( 'txtBodyText', {
toolbar: ...
} );
See how it is done in the samples from the CKEditor SDK, e.g. the Custom Toolbar sample. Scroll down to get the complete source code of the sample.
Don't forget to clear your browser cache after any editor configuration change!

How to customize CK-Editor's tools menu?

I would like to change tool menu optons on ck-editor.
for example I remove some of them that I dont need to use.
How can I do that ?
There's a configuration setting that allows you to set which buttons will appear.
You just create your own toolbar layout. I've included the default full toolbar code, you can remove the buttons that you don't want to appear.
It's best to copy the default config.js file and rename it, then call your custom config file and the custom toolbar when you load the editor:
CKEDITOR.replace( 'xxx_textarea_id_xxx',
{
customConfig : 'xxx_name_of_custom_config_file_xxx.js',
toolbar : 'XXX_custom_name_XXX'
});
This is the config setting for the default full toolbar layout.
The '/' within the toolbar layout means break to a new line.
The name: 'document', items : entries are each shown as a group and there are spaces between the entries.
The '-' creates a vertical spacer within a group.
The demo page shows an example of this default toolbar layout:
CKEditor Demo
config.toolbar_Full =
[
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];
This is a custom toolbar config setting.
When you set the toolbar config setting you only use the part of the name that is after "toolbar_". toolbar : 'XXX_custom_name_XXX'
config.toolbar_XXX_custom_name_XXX =
[
{ name: 'xxx_custom_group_namexxx', items : ['Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image','Table','HorizontalRule','Smiley','SpecialChar','PageBreak' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];
Here's the link to the toolbar page in the developers guide:
CKEditor 3.x | Developers Guide - CKEditor Toolbar
You might want to turn off any features that you aren't using with the removePlugins config setting:
config.removePlugins = 'flash,iframe';
Here's the page from the CKEditor 3 JavaScript API Documentation that lists all of the config settings:
Namespace CKEDITOR.config