Related
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.
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';
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();
}
}
);
}});
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!
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