I have the style plugin installed on ckeditor5 and for elements with one level, like a paragraph, it works great but with something like a list, it doesn't (or doesn't for me!) The reason seems to be that for something like
<ul>
<li>Hello</li>
<li>World</li>
</ul>
When in the editor, it sees you as in the li, because if I do my definitions as such
var definitions =
[
{
name: 'Info box',
element: 'p',
classes: [ 'info-box' ]
},
{
name: 'Item List',
element: 'li',
classes: [ 'item-list' ]
},
];
The style is enabled when I'm in the list but when I pick it, it puts the style on the li, when I need it on the ul.
If I make the definition like this
var definitions =
[
{
name: 'Info box',
element: 'p',
classes: [ 'info-box' ]
},
{
name: 'Item List',
element: 'ul',
classes: [ 'item-list' ]
},
];
It's never enabled, because it's never seen as in the UL, just the LI.
Any pointers would be much appreciated.
Related
I'm building out a simple site building tool using CKEditor. The tool has the ability to choose from and set palettes, which should be reflected in the styles drop down of CKEditor. However, it seems to me that styles cannot be overwritten in CKEditor. The code I have at the moment is:
CKEDITOR.stylesSet.add( 'styles', [
// Block-level styles
{ name: 'blah 1', element: 'h2', styles: { 'color': '#xxxxxx' } },
{ name: 'blah 2', element: 'h3', styles: { 'color': '#xxxxxx' } },
{ name: 'blah 3' , element: 'h4', styles: { 'color': '#xxxxxx' } },
{ name: 'blah 4' , element: 'h5', styles: { 'color': '#xxxxxx' } },
] );
CKEDITOR.config.stylesSet = 'styles';
Now, if I repeat this with new styles, I get:
ckeditor.js:232 Uncaught Error: [CKEDITOR.resourceManager.add] The resource name "styles" is already registered.
I've tried using CKEDITOR.replace, but this doesn't fix the issue. I guess, the obvious solution is to iterate the style name with each use; style1, style2, style3... but that's not very resource friendly. Does anyone have an actual solution for this?
Thanks,
Lee
have you tried renaming styles to default?
I use this and it works, mine loads an external style file. But same array structure.
CKEDITOR.config.stylesSet = 'default:http://' + window.location.host + '/folder/fckeditor.styles.js';
So, I figured out a solution by always destroying the panel, if it exists, before re-creating it. For instance:
if (CKEDITOR.instances['footer-' + i]) {
CKEDITOR.instances['footer-' + i].destroy(true);
}
var editor = CKEDITOR.inline('footer-' + i, {
stylesSet: [
// Block-level styles
{ name: 'Blue Title', element: 'h2', styles: { 'color': 'Blue' } },
{ name: 'Red Title' , element: 'h3', styles: { 'color': 'Red' } },
{ name: 'Brown Title' , element: 'h4', styles: { 'color': 'Red' } },
{ name: 'Purple Title' , element: 'h5', styles: { 'color': 'Red' } }
]
});
Now, this does throw up a warning each time, saying:
[CKEDITOR] For more information about this error go to http://docs.ckeditor.com/#!/guide/dev_errors-section-editor-incorrect-destroy
However, theres no clean way to do this otherwise with the CKEditor API, so since it works, I'm marking it as the answer.
I have a problem with the dropdown menu manager:
I would like to move the forms-buttons into the dropdown:
'DropdownMenuA': {
items: [{
label: 'form',
command: 'form',
order: 1
}
If I remove the original forms-group from the toolbar, the form-button in DropdownMenuA is also missing:
config.toolbar = [ { name: 'forms',
items: [ 'Form' ] },
{ name: 'DropdownMenuA',
items: [ 'DropdownMenuA' ] } ...
-> button form is shown in dropdown
config.toolbar = [ { name: 'forms',
items: [ 'noForm' ] } ,
{ name: 'DropdownMenuA',
items: [ 'DropdownMenuA' ] } ...
-> button form is NOT shown in dropdown
So, how can I have the form button in my dropdown without having it in the forms group in the toolbar?
best regards
Bernd
sorry to tell you but it seems that some plugin commands, such as ' Bold,Italic,...,Forms' are not enabled without defining them into the toolbar first. I have neither found why this is happening,nor a workaround yet.
Feel like I should have been able to track this one down already. I need to create a custom plugin for CKEditor (I'm using 4.3.1). To get started I used the guide found here (http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1). I downloaded the code and put it in my ckeditor\plugins folder. So, now I have ckeditor\plugins\abbr. I'm not sure what I'm doing, but the button is not showing in the toolbar. The code is below. My questions are, where should I define the "abbr" extra plugin? Do I do it in my _Edit.cshtml page where I'm defining stylesheetparser? Or put it in config.js? Given the setup below shouldn't the button show up next to the source button? Do I need to include it in config.js or does the plugin code take care of that?
Been doing a little playing around and it does show up if I use the full toolbar, but not when I customize it.
config.js
CKEDITOR.editorConfig = function (config) {
config.toolbar = 'MyToolbar';
config.forcePasteAsPlainText = true;
//config.extraPlugins = 'abbr';
config.ignoreEmptyParagraph = 'true'
config.toolbar_MyToolbar =
[
{ name: 'document', items: ['Preview', 'Print'] },
{ name: 'clipboard', items: ['Cut', 'Copy', 'PasteText', '-', 'Undo', 'Redo'] },
{ name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-', 'SpellChecker', 'Scayt'] },
{ name: 'basicstyles', items : [ 'Bold','Italic','Subscript','Superscript','-','RemoveFormat' ] },
'/',
{ name: 'insert', items: ['Table', 'SpecialChar'] },
{ name: 'styles', items : [ 'Styles'] }
, { name: 'source', items: ['Source', '-', 'abbr'] }
];
};
_Edit.cshtml
#Html.TextAreaFor(e => e.Narrative, 10, 10, null)
<script type="text/javascript">
CKEDITOR.replace('Narrative', {
extraPlugins: 'stylesheetparser,abbr',
// Stylesheet for the contents.
contentsCss: '#Href("~/content/"+#Model.CssFile)',
stylesheetParser_skipSelectors: '',
disableNativeSpellChecker: false,
// Do not load the default Styles configuration.
stylesSet: [],
height: '600px',
width: '100%'
});
</script>
plugin.js
CKEDITOR.plugins.add( 'abbr', {
// Register the icons.
icons: 'abbr',
// The plugin initialization logic goes inside this method.
init: function( editor ) {
// Define an editor command that opens our dialog.
editor.addCommand( 'abbr', new CKEDITOR.dialogCommand( 'abbrDialog' ) );
// Create a toolbar button that executes the above command.
editor.ui.addButton( 'Abbr', {
// The text part of the button (if available) and tooptip.
label: 'Insert Abbreviation',
// The command to execute on click.
command: 'abbr',
// The button placement in the toolbar (toolbar group name).
toolbar: 'source'
});
// Register our dialog file. this.path is the plugin folder path.
CKEDITOR.dialog.add( 'abbrDialog', this.path + 'dialogs/abbr.js' );
}
});
My ckeditor WYSIWYG has the option to create divs. Im trying to create a style that can be put in the 'Style' dropdown:
Ive tried adding the following to my config.js but it seems to have no effect.
CKEDITOR.stylesSet.add( 'default',
[
// Inline styles
{ name : 'Titulo Explicacion Servicio', element : 'div', attributes : { 'class' : 'titulo_explicacion_servicio' } },
{ name : 'Texto Explicacion Servicio', element : 'div', attributes : { 'class' : 'texto_explicacion_servicio' } },
{ name : 'Texto Fondo Foto', element : 'div', attributes : { 'class' : 'intro_fondo_foto' } }
]);
I doubt it makes any difference but this is for a Drupal site.
I found what I needed to change in styles.js
CKEDITOR.stylesSet.add( 'default', [
{ name: 'Italic Title', element: 'h2', styles: { 'font-style': 'italic' } },
{ name: 'Subtitle', element: 'h3', styles: { 'color': '#aaa', 'font-style': 'italic' } },
{
name: 'Image caption', //THESE NEXT 4 LINES I CHANGED
element: 'div',
attributes: {
class: 'caption-mine'
}
},
I have a quite simple mobile app I want to build with Sencha Touch 2. I have quite a lot of experience with ExtJs, but not really with their MVC architecture. What I want to achieve is :
first a main screen with toolbar and some icons rendered in the middle which are to be used to navigate across the app functionality.
clicking one of the icons should switch to a screen with a scrollable list.
What I'm struggling with is the proper place to define the views, and controllers. As well as should for example the main screen use a controller ? Should I create a viewport manually or not ?
What I have right now, which is not rendering anything apart of the toolbar :
app.js
Ext.application({
name: 'SG',
views: [
'Main',
'MainScreen'
],
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('SG.view.Main'));
}
})
Main.js
Ext.define('SG.view.Main', {
extend: 'Ext.Container',
requires: [
'Ext.TitleBar',
'ShopGun.view.MainScreen'
],
config: {
layout : 'fit',
items: [
{
title: 'Welcome',
iconCls: 'home',
position: 'top',
scrollable: true,
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'SG Alpha 1'
}
Ext.create('SG.view.MainScreen', {
docked: 'bottom'
})
]
}
]
}
});
MainScreen.js
Ext.define('SG.view.MainScreen', {
extend: 'Ext.Container',
xtype: 'mainScreen',
initialize : function(){
Ext.define("MenuIcon", {
extend: "Ext.data.Model",
config: {
fields: [
{name: "Name", type: "string"},
{name: "Icon", type: "string"}
]
}
});
this.store = Ext.create('Ext.data.Store', {
model: 'MenuIcon',
data: [
{
Name: "A",
Icon: "a.png"
},
{
Name: "B",
Icon: "b.png"
}
]
});
this.html = 'foo';
this.callParent(arguments);
}
});
And finally an image of what I'd like to get :
EDIT:
A senchafiddle demo here : http://www.senchafiddle.com/#jSqtV (which is not rendering at all but doesn't throw any errors).