I have create inline edit with tinymce and found one issue that it losing formatting on select all text and start typing.
I am using v4.5.7.
Please refer this image.
Here is my configuration settings.
$scope.paragraphelementInEditorOptions = {
inline: true,
menubar: false,
statusbar: false,
plugins: 'textcolor colorpicker link lists paste',
toolbar: 'bold italic underline strikethrough alignleft aligncenter alignright alignjustify link fontselect fontsizeselect forecolor backcolor bullist numlist undo redo',
font_formats: font_names,
fontsize_formats: "8px 10px 12px 14px 16px 18px 20px 22px 24px 26px 28px 30px 32px 34px 36px",
paste_as_text: true,
forced_root_block: 'p',
forced_root_block_attrs: {
'class': 'myclass',
'style': 'font-family: Open Sans; font-size: 32px;'
}
};
Thanks.
Related
I am building an ExtJS4 web application and I have a grid where some of the columns have an editor in the form of text fields. However, the field is not visible until the user clicks on the grid cell.
Is there a way to place a border around the editor? So far I've tried editing the fieldStyle property of the textfield inside the column as such:
vertical-align: middle; font-size: 17px; font-weight: bold; font-style: italic; font-family: 'Times New Roman'; border: 'black'
but that did not work.
{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
return '<u>' + value + '</u>';
},
height: 30,
maxHeight: 30,
maxWidth: 100,
minHeight: 30,
minWidth: 100,
width: 100,
dataIndex: 'bank',
text: 'BANK',
editor: {
xtype: 'textfield',
height: '100%',
width: '100%',
fieldStyle: 'vertical-align: middle; font-size: 17px; font-weight: bold; font-style: italic; font-family: \'Times New Roman\'; border: \'black\'',
emptyText: 'Bank'
}
},
However, the renderer only returns 1 modification and I'm not sure how I can make it return 2 modifications (1 for the value and 1 for the borders).
Update
The solution below works:
border: 1px solid black;
However, I want a border around the field even if the field is out of focus.
Well first off the syntax for border is not correct. Try "border: 1px solid black;"
secondly, if that doesn't work, assign a cls for this and do it through that class.
Hi i have created a table with the help of tinymce editor and applied borders to it . But wen i see the table on preview the borders are breaking as dashed lines. Can u help me to figure this out
css
.BorderTop{
border-top: 1pt solid #000000 !important;
}
.BorderBottom {
border-bottom: 1pt solid #000000 !important;
}
.BorderRight {
border-right: 2px solid #000000 !important;
}
.BorderLeft{
border-left: 2px solid #000000 !important;
}
//controller for the table section
$scope.tinymceOptions = {
/*jshint camelcase: false */
content_css: "/assets/css/apaStyle.css?r=" + Math.random(),
skin_url: '/assets/css/skin/asc',
mode: "exact",
plugins: ["spellchecker visualchars paste charmap contextmenu preview textcolor eqneditor searchreplace fullscreen"],
elements: "tabletextarea",
entity_encoding: "numeric",
toolbar: "undo redo | table | fontFamily fontSize | styleselect | bold italic underline strikethrough | subscript superscript | forecolor backcolor | removeformat | alignleft aligncenter alignright alignjustify | charmap preview | lineSpaceBtn | eqneditor | searchreplace | spellchecker | fullscreen | apaBorderBtn | headingStyleBtn",
toolbar_items_size: 'small',
remove_linebreaks : true,
force_p_newlines : false,
force_br_newlines : true,
forced_root_block : '',
menubar: false,
height : '380',
external_plugins: {
"apatable": "/assets/libs/tinymce/plugins/apatable/plugin.js",
"apaTableTool" : "/assets/libs/tinymce/plugins/apaTableTools/plugin.js",
"eqneditor":"/assets/libs/tinymce/plugins/eqneditor/plugin.min.js",
"apaFont": "/assets/libs/tinymce/plugins/apaFont/plugin.js"
}
};
use this css should work for you
.mce-item-table, .mce-item-table td, .mce-item-table th, .mce-item-table caption{
border-top: 1pt solid #000000 !important;
border-right: 2px solid #000000 !important;
border-bottom: 1pt solid #000000 !important;
border-left: 2px solid #000000 !important;
}
How can I customize a Sencha Touch picker completely?
Here is what the default picker looks like.
I've managed to customize the frame, center, and buttons but I can't find anything to allow me to customize that blue gradient toolbar. I can't even find a place to make it transparent.
My Picker with the code below
Code:
Ext.define('FOLUI.view.pageValuePicker', {
extend: 'Ext.picker.Picker',
alias: 'widget.pageValuePicker',
config: {
cls: 'PickerFrame',
height: 200,
itemId: 'pageValuePicker',
doneButton: {
cls: 'PaginationButton',
width: '80px',
pressedCls: 'PaginationButtonPressed'
},
cancelButton: {
cls: 'PaginationButton',
width: '80px',
pressedCls: 'PaginationButtonPressed'
},
slots: [
{
xtype: 'pickerslot',
cls: [
'PickerMiddle'
],
itemId: 'pageValuePickerSlot',
align: 'center',
data: [
{
text: '1',
value: 1
},
{
text: '2',
value: 2
},
{
text: '3',
value: 3
},
{
text: '4',
value: 4
},
{
text: '5',
value: 5
},
{
text: '6',
value: 6
},
{
text: '7',
value: 7
},
{
text: '8',
value: 8
},
{
text: '9',
value: 9
}
],
name: 'pageValuePickerSlot'
}
]
}
});
CSS:
.PaginationButton {
background: #002c42 !important;
color:#ffffff;
font-size: 16px;
font-weight: bold;
border-radius: 4px;
border: 1px solid #000d13;
-webkit-box-shadow: inset 0px 1px 0px #678796;
}
.PaginationButtonPressed {
background: #00344e !important;
color:#ffffff;
font-size: 16px;
font-weight: bold;
border-radius: 4px;
border: 1px solid #000d13;
-webkit-box-shadow: inset 0px 1px 0px #678796;
}
.PickerFrame {
background: #dae4ec !important;
border: 1px solid #6890b0;
-webkit-box-shadow: inset 0px 1px 0px #ffffff;
}
.PickerMiddle {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
color: #022c42 !important;
font-weight: bold;
line-height: 45px;
background-color: #ffffff !important;
border-radius: 6px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border: 1px solid #6890b0;
-webkit-box-shadow: inset 0px 0px 13px 3px #cbcbcb;
}
You can style ST against the default element classes it uses. Easiest is to "Inspect Element" in your browser and check what class the relevant item has (ST class names start with x-, like x-toolbar). If you want to prevent styling any items which aren't part of your modified widget, you can give your widget a unique id/class and prefix your CSS rules with that.
If you feel awkward overriding its existing styling from your own CSS file, or if you want to dig deeper into styling/theming ST: ST uses SASS/Compass to build CSS files. It's a bit of a pain to set up, but the upside is that you can use SASS/Compass functions to create your own gradients, color-schemes, and such. Plus the result is that you end up with only one CSS file containing everything.
The picker has pseudo class with gradient. But chrome's dom inspector has some strange behaviour and may not displays pseudo classes. So you can't find it. Go to the CSS file and edit styles there.
You can really extend the options you wish to configure by using this trick:
items: [
{
xtype: 'selectfield',
label: 'Choose one',
usePicker: 1, // convert selectfield into a picker
defaultPhonePickerConfig: { // customise text values displayed
doneButton: 'Select',
cancelButton: 'Cancel'
},
options: [
{text: 'First Option', value: 'first'},
{text: 'Second Option', value: 'second'},
{text: 'Third Option', value: 'third'}
]
}
]
Now as to the styling which you wish to avoid, simply do not include it. You are seeing the ST default styling being called in. You've managed to override part of the styling, and by showing you this example above where a select can be a picker, you can see just how varied a location where styling may be called in.
Primary culprit (ST2.2):
#import 'sencha-touch/default';
#import 'sencha-touch/default/all';
Comment out the "all" line, then call in only the individual components you wish to be default styled.
// #import 'sencha-touch/default/all';
// replacing direct reference to exact path of component mixin
// all in relation to the "sencha-touch" folder which is pathed in config.rb
#import 'sencha-touch/default/src/_MessageBox.scss';
#import 'sencha-touch/default/src/_Toolbar.scss';
Once you get used to the structure of the mixin files and how it is all referenced and called, you can simplify your life by only calling in the absolute minimum structure from ST, namely the "base". Take a copy of the mixin components for what you wish to use into /resources/sass/mixins, modify the styling to suit your needs. The result is a far smaller stylesheet generated, cutting out all the hair-tearing overriding of defaults.
SALAM
I want to customize the html text, buttons and text fields with CSS sencha. how can I do?
if I have to put all the CSS code in a file apart, how can I connect each CSS code to a specific part. example:
I want to changed the font of the following text "it fits your needs ":
enter code here
App.views.HomeIndex = Ext.extend(Ext.Panel, {
items: [
{
xtype: 'carousel',
id: 'car',
fullscreen: true,
scroll: 'vertical',
styleHtmlContent: true,
style: 'background: #d8e2ef',
items: [ {
html: '<div align="center" id="z">it fits your needs </br></br> <img src="images/logo.jpg" width="160" height="151""/></div>'
}]
}]
});
Ext.reg('HomeIndex', App.views.HomeIndex);
how I can do?
thank you
you can define a class for each one like below in your html file
.Heading{
text-align: center;
-webkit-border-top-right-radius:0.5em;
-webkit-border-top-left-radius:0.5em;
font-weight: bold;
font-style: calibri;
padding:6px;
font-size:15px;
color: black;
background: -webkit-gradient(linear, left top, left bottom, from(lightgrey), to(lightgrey));
width: 100%;
height: 30px;
}
and you can use the class in your div tag by refering as
html: '<div class="Heading"></div>'
What is the proper syntax for putting all css font properties into one value.
body {font: 12px, arial, red}
Something like that but with all the selectors and properties.
body{
font: bold italic 15px/20px arial,sans-serif;
color: red;
}
http://www.w3schools.com/css/tryit.asp?filename=trycss_font
you can't include the color as part of the declaration.
15px/20px = font-size/line-height
nice link, maegar!
font: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
Source: http://www.w3.org/TR/CSS2/fonts.html#font-shorthand
http://www.w3.org/TR/CSS2/fonts.html
For a tutorial:
http://www.w3schools.com/css/pr_font_font.asp