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'
}
},
Related
I a project I work on we need to restrict users with predefined styles that can be changed by the user.
In my jsFiddle the function setStyle() works. You can try out by uncommentting the setStyle([]). It seems to me that I can use the config.stylesSet = assignment only once.
The function to change the style does not work after a button click nor after setTimeout.
Is there any way to set styles via a script in CKE4 more than once?
CKEDITOR.stylesSet.add( 'my_styles', [
// Block-level styles
{ name: 'Blue Title', element: 'h2', styles: { 'color': 'Blue' } },
{ name: 'Red Title' , element: 'h3', styles: { 'color': 'Red' } },
// Inline styles
{ name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } },
{ name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow' } }
] );
CKEDITOR.stylesSet.add( 'my_styles2', [
// Block-level styles
{ name: 'Default Title', element: 'h2', styles: { 'color': 'Red' } },
// Inline styles
{ name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } },
] );
var ckeditor = CKEDITOR.inline('editor1', {
removePlugins: 'exportpdf,sourcearea',
fillEmptyBlocks : false,
});
// setStyle([])
setTimeout(() => {
console. log("resetting styles")
setStyle([])
}, 5000);
function setStyle(style){
// ckeditor.config.stylesSet = style
CKEDITOR.config.stylesSet = style
// console.log(ckeditor)
console.log(style)
}
I have created a custom dropdown for trumbowyg following this guide, but am stuck on how to really insert a text when a dropdown button is clicked.
$('.editor').trumbowyg({
btnsDef: {
tagSelect: {
fn: () => {
// how to insert test to cursor's position?
},
text: 'Name Tag',
hasIcon: false
},
detailsType: {
dropdown: [
'tagSelect',
],
title: 'Client Tag',
hasIcon: false
}
},
btns: [
['detailsType']
]
})
I did this by using the plugin "mention".
Using that plugin it's as simple as this:
$('#editorid').trumbowyg({
plugins: {
mention: {
source: [
{ mergetag: '[RECIPIENT_NAME]', name: 'Full name of the recipient' },
{ mergetag: '[RECIPIENT_NAME_FIRST]', name: 'First name of the recipient' },
{ mergetag: '[SENDER_NAME]', name: 'Name of sender' },
{ mergetag: '[SENDER_MAIL]', name: 'Sender email' },
{ mergetag: '[SIGNATURE]', name: 'Senders mailsignature' }
],
formatDropdownItem: function (item) {
return item.name + ' ' + item.mergetag;
},
formatResult: function (item) {
return item.mergetag;
}
}
}
});
More info here: https://alex-d.github.io/Trumbowyg/demos/plugins/mention.html
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 added the files provided in the zip download for the Simple Plugin (Part 1) example to a web site with a working CKEDITOR setup. I made no changes to any of the files. A plugin called abbr is supposed to be defined by this code. After reloading the page containing CKEDITOR, I did not see the icon for the plugin appear after I added the plugin to extraPlugins. I then added a reference to the plugin in the insert toolbar but that also did not work.
I can get the plugin dialog to appear by binding to a keystroke, so at least that much works:
config.keystrokes = [
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 32 /*space*/, 'abbr' ]
];
Here is my ckeditor.js, after removing the Play Framework view markup (hopefully I did not miss any):
<script>
function createEditor() {
var editor = CKEDITOR.instances.BLAH;
if (editor) {
try { editor.destroy(true) ; } catch ( e ) { }
}
editor = CKEDITOR.replace("BLAH", {
height: $(window).height() / 2 - 30,
"extraPlugins": "imagebrowser,abbr,codemirror",
on: {
instanceReady: function(evt) {
var maximized = $.cookie("maximized");
var me = maximized=="true";
if (me)
editor.execCommand('maximize');
},
save: function(evt) {
var scaytEnabled = CKEDITOR.plugins.scayt.state[evt.editor.name];
$.cookie("scayt_enabled", scaytEnabled.toString(), { path: '/' });
var maximized = evt.editor.commands.maximize.state==1;
$.cookie("maximized", maximized.toString(), { path: '/' });
}
}
});
}
</script>
Here is the JavaScript that launches CKEDITOR. abbr is the last plugin mentioned in insert toolbar:
CKEDITOR.editorConfig = function(config) {
config.allowedContent = true;
config.tabSpaces = 2;
config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div';
config.toolbarCanCollapse = true;
config.toolbar = [
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] },
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps',/*'Preview',*/'Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
//{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
{ name: 'insert', items : [ 'Image',/*'Flash',*/'Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe', 'abbr' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
'/',
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'/*,'-','BidiLtr','BidiRtl'*/ ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker','Scayt' ] }
];
};
I noticed that the instructions had a difference from the code; this code was shown in the instructions:
editor.ui.addButton( 'Abbr', {
label: 'Insert Abbreviation',
command: 'abbrDialog',
toolbar: 'insert'
});
But the code in the download has a different value for command: abbr. Neither value worked. I tried adding abbrDialog to the insert section of config.toolbar but that did not work either. Perhaps there is still another problem.
There's a small bug in this tutorial - in the code you can download the command is named abbr when in the code samples it is abbrDialog.
But name of the button is all the time the same - Abbr (it's case sensitive!). So basically, your config.toolbar setting is incorrect, because you used lower cased name.
Currently I am teaching myself Sencha Touch 2.0 and I am encountering a problem with adding a xtype called test to my viewport.
The test class is extending "Ext.form.Panel'" the problem is that no form shows up in my view and sencha also doesn't give any errors. When I extend "Ext.Panel" and set a html attribute this does show up. Can someone tell me what i am doing wrong ?
Viewport file
Ext.define('App.view.Viewport', {
extend: 'Ext.viewport.Default',
config: {
scrollable: true,
fullscreen:true,
items:[
{
xtype: "panel",
items: [
{
xtype:"toolbar",
title:"Test App"
},
{
xtype:"panel",
items: [
{
xtype:"test"
}
]
}
]
}
]
}
});
Controller file
//Define controller name
Ext.define('App.controller.User', {
//Extend the controller class
extend: 'Ext.app.Controller',
//define associated views with this controller
views: ['user.Test'],
init: function()
{
//do something and setup listeners
//setup listeners
}
});
View File
Ext.define('App.view.user.Test', {
extend: 'Ext.form.Panel',
alias: 'widget.test',
config: {
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}
]
},
initialize: function() {
console.log('initialize home view');
this.callParent();
}
});
Simply specify
xtype: 'test'
in your App.view.user.Test definition
I have got it sorted. Have a look at:
http://www.sencha.com/forum/showthread.php?191765-My-Ext.form.Panel-object-does-not-want-to-show&p=767689#post767689