I want to integrate some bootstrap classes to my ckeditor profile:
{ name : 'Button Large' , element : 'a', attributes : { 'class' : 'btn-lg' } },
{ name : 'Button Primary' , element : 'a', attributes : { 'class' : 'btn-primary' } },
but the problem is those styles cant be combined. If I want a button which is btn-primary AND btn-lg I would have to create a third style:
{ name : 'Button Large Primary' , element : 'a', attributes : { 'class' : 'btn-lg btn-primary' } },
which obviously is quite redundant for many buttons and not necessary. So how can you do this?
Using CKeditor 4.4.3
CKEditor does not currently support setting two styles on the same element from their dropdown. Have a look at this or this ticket in their tracker.
If adding the classes in the source view is not an option you may have to write your own plugin (like this SO user is doing for colors.
Related
So I have some JavaScript as follows:
$scope.gridTasks = {
data: 'tasks'
, multiSelect: false
, sortInfo: { fields: ['DueSoon', 'SeenByOwner'], directions: ['asc'] }
, columnDefs: [
{ field: 'ID', displayName: 'ID', visible: false }
, { field: 'SeenByOwner', displayName: '', width: '17', cellTemplate: '<p><i tooltip-placement="top" tooltip-append-to-body="true" tooltip="You haven\'t looked at this yet." class="{{row.entity.DueSoon ? \'glyphicon glyphicon-fire\' : (!row.entity.SeenByOwner ? \'glyphicon glyphicon-info-sign\' : \'\')}}" style="color: {{row.entity.DueSoon ? \'red\' : \'orange\'}};font-size:15px; padding-top:5px"></i></p>' }
, { field: 'Priority.Name', displayName: 'Priority' }
, { field: 'Description', displayName: 'Description' }
, { field: 'CreatedOn', displayName: 'Created', cellFilter: 'date:\'MM/dd/yyyy\'', visible: $scope.completed }
, { field: 'Completed', displayName: 'Closed', cellFilter: 'date:\'MM/dd/yyyy\'', visible: !$scope.completed && $scope.completed != undefined }
, {
cellTemplate: '<div>' +
'<button type="button" class="btn btn-primary btn-xs" style="margin-top: 4px" ng-click="editTask(row.entity)">Open</button></div>'
, width: '9%'
}
]
};
First, in the column for "SeenByOwner", I'm attempting to check if DueSoon is set to true. If so, I want to display a glyphicon in red with the fire icon. If not, I want to check if SeenByOwner is true. If it is, I want to display a different glyphicon in orange.
As of right now, I can get the different glyphicons displaying properly, and neither will display if both Booleans are set to false. Great so far!
The issue is they're displaying in black and I can't figure out how to get them to display in their appropriate colors without completely shoving duplicate style="" attributes into each part of the in-line if.
Another issue is that the ng-grid isn't sorting properly based on SortInfo. It works fine to sort by SeenByOwner if the only field I have in fields is SeenByOwner but when I add DueSoon it gets wonky.
I'm trying to get this going in a Fiddle thing (sorry I'm new to web development) but I'm not sure how to get it to import all of the libraries we use in development.
You need to ng-style if you want to stick with inline style rather than using css class
ng-style="{color: row.entity.DueSoon ? 'red' : 'orange'}
you could use ng-class.
<div ng-class="{ 'myCssClass': SeenByOwner }"></div>
Basically, the above would attach .myCssClass to your div, if your property SeenByOwner is true.
I have a panel and that panel has a load of tools.
these are defined in an array,
eg:
myPanel.tools = [
{
type : 'down',
tooltip : 'Down',
},
{
type : 'up',
tooltip : 'Up',
},
{
type : 'help',
tooltip : 'Blah Blah',
}
]
But the above is fine if the tooltip is static, but I would like it to be updated whenever the user mouses over it.
Can you pass a function to the config to call when moused over or right before its shown? Is there another way.
tooltip excepts an config object where you can add a listener:
tooltip: {
listeners: {
'render': function(comp){
comp.tooltip = "enter your tooltip";
}
}
}
now you can modify the component like you want.
I created a custom CKEditor Plugin that takes a text value and inserts it into some HTML. Everything works fine, but I don't know how to populate the field with a default value. I would like the default value to be blank if it is a new element. But i would like the default value to be the value of the selected item while editing it. Otherwise I am unable to edit the value inside of the HTML without going into Source mode, or completely deleting everything and starting over again.
CKEDITOR.dialog.add( 'videoLinkDialog', function( editor )
{
return {
title : 'Video Properties',
minWidth : 400,
minHeight : 200,
contents :
[
{
id : 'general',
label : 'Settings',
elements :
[
{
type : 'html',
html : 'This dialog window lets you embed Vimeo videos on your website.'
},
{
type : 'text',
id : 'url',
label : 'Video ID',
validate : CKEDITOR.dialog.validate.notEmpty( 'This field cannot be empty.' ),
required : true,
commit : function( data )
{
data.text = this.getValue();
}
},
]
}
],
onOk : function()
{
val = this.getContentElement('general', 'url').getInputElement().getValue();
var text = '<a class="colorbox-inline" href="http://player.vimeo.com/video/' + val + '?width=915&height=515&iframe=true&autoplay=1"><img class="vid-thumbnail" src="http://placehold.it/350x150" data-vimeo-id="' + val + '" /></a>';
this.getParentEditor().insertHtml(text)
},
};
} );
There are several ways,
The simplest way being to add setup to each of your dialog elements as demonstrated in the CK Editor Plugin Tutorial like so:
{
type : 'text',
id : 'url',
label: 'Video ID',
validate : CKEDITOR.dialog.validate.notEmpty( 'This field cannot be empty.' ),
required : true,
setup : function ( data ) {
this.setValue(data.getAttribute('url'));
}
commit : function( data ) {
data.text = this.getValue();
}
}
Alternatively, you could also use this event handler that will fire before the dialog is rendered:
onShow: function () {
// your code here
// eg. this.setValue(*ELEMENT_ID*, *ELEMENT_VALUE*);
}
here you can view the element that called the event and get or set any values you may need to populate your dialog.
You should also add a click listener like the following to your plugin.js file to show the dialog from a selected element like so:
editor.on('doubleclick', function (e) {
var el = e.data.element;
if (el == *YOUR_CUSTOM_ELEMENT*)
e.data.dialog = *DIALOG_NAME*;
});
BackGround:
I am using the same toolbar in all my views which is defined in a separate view. This toolbar has four buttons. Since this button has 'id' attribute,
tap event on one button from a view will trigger similar tap events from other views as well since the same toolbar is used across the views.
My Toolbar is as below.
Ext.define("WU.view.WUToolBar", {
extend: "Ext.Toolbar",
alias: "widget.wuToolBar",
xtype:"wuToolBar",
config: {
docked : 'bottom',
cls : 'tabBar',
ui:'widgetBottombarUI',
items : [
{
xtype : 'button',
text : 'My Account',
cls : 'profileTabBar',
id : 'myProfileButton',
listeners : {
tap : function(button, e, eOpts) {
console.log('myProfileButton is clicked');
}
},
{
xtype : 'button',
text : 'Help',
cls : 'helpTabBar',
id : 'helpTabButton',
listeners : {
tap : function(button, e, eOpts) {
console.log('helpButton is clicked');
}
},
]
},
});
I am adding this to my different views in the items config as below.
xtype : 'wuToolBar'
So, tap event on a button in a single view will fires the tap event from all the views since this toolbar is shared across the pages. If I am removing the
id attribute then application works fine but I need to assign the id to the button since I have to access them using getCmp method.
If it is on all views, then I would suggest adding it in your app.js, and then simply add to the Viewport when you move from screen to screen:
In app.js:
...
launch: function() {
...
// Add static components
Ext.Viewport.add([
{
xtype: 'wuToolBar'
docked: 'bottom' // I would recommend moving this out of your customized config
}
]);
...
},
...
You can add a view later using the same method (Ext.Viewport.add(...)), or you can use the Ext.navigation.View component.
tinyMCE keeps stripping the class-attribute of my element, when clicking "remove formatting", although i've added it to the extended_valid_elements. look here:
...
extended_valid_elements : "p[class],figure[class],figcaption",
valid_children : "+p[figure]",
...
all gets stripped. do you have any idea?
thank you very much!
Take a look at this: http://tinymce.moxiecode.com/wiki.php/Configuration:formats (see the "remove format"-section).
You'll have to edit tiny_mce.js .
Search for the code shown there and add the following to the removeformat-array:
{selector : 'p', attributes : ['style'], split : false, expand : false, deep : true}
It should prevent tinymce from removing the class-attribute from p-elements when using the remove-format-button.
code must be:
...
formats : {
removeformat : [
{selector : 'figure', attributes : ['style'], split : false, expand : false, deep : true}
]
},
...