Related
i cant change the backgroundColor of Textareafield In EXT js4.2
css
.disable-field{
background: #b5b8c8 !important;
}
Js
var remaskTextField = Ext.create('Ext.panel.Panel', {
id : 'remasksTextField',
title: 'Remark',
items: [ {
id : 'remask',
xtype : 'textareafield',
name : 'message',
width: 310,
height:230
}]
});
i tried the following code to change colour .
only the first one can change the backgroundColor but the top line of the Textareafield still remaining unchanged .
document.getElementById('remaskTextField').style.backgroundColor = "#c3c5ce";
Ext.getCmp('remask').addClass('disable-field');
Ext.getCmp('remasksTextField').addClass('disable-field');
One approach, that worked for me with ExtJS 4.2, is fieldStyle config:
fieldStyle : String
Optional CSS style(s) to be applied to the field input element. Should
be a valid argument to Ext.Element.applyStyles. Defaults to undefined.
See also the setFieldStyle method for changing the style after
initialization.
Example:
Ext.onReady(function() {
Ext.create('Ext.form.TextArea', {
renderTo: Ext.getBody(),
width: 400,
height: 400,
fieldStyle: "background: #b5b8c8 none repeat scroll 0 0 !important;"
});
});
I used tinymce(3.5.8 version) editor as html5 editor. Now i want features to add video and audio tags.
function doTinyMCECleanUp(frm, id)
{
var c = frm[id].value;
c = c.replace(/ </source>/gim, '');
c = c.replace(/</source>/gim, '');
// comment this out if 'html' not 'xhtml'
c = c.replace(/]*)>/gim, '');
frm[id].value = c;
}
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "visualblocks,inlinepopups,mediahtml5,media",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,styleselect,justifyleft,justifycenter,justifyright,justifyfull,|,visualblocks,code,mediahtml5,media",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
content_css : "/js/tinymce/examples/css/content.css",
visualblocks_default_state: true,
extended_valid_elements : "video[*]",
// Schema is HTML5 instead of default HTML4
schema: "html5",
template_external_list_url : "tinymce/examples/lists/template_list.js",
external_link_list_url : "tinymce/examples/lists/link_list.js",
external_image_list_url : "tinymce/examples/lists/image_list.js",
media_external_list_url : "tinymce/examples/lists/media_list.js",
// End container block element when pressing enter inside an empty block
end_container_on_empty_block: true,
// HTML5 formats
style_formats : [
{title : 'h1', block : 'h1'},
{title : 'h2', block : 'h2'},
{title : 'h3', block : 'h3'},
{title : 'h4', block : 'h4'},
{title : 'h5', block : 'h5'},
{title : 'h6', block : 'h6'},
{title : 'p', block : 'p'},
{title : 'div', block : 'div'},
{title : 'pre', block : 'pre'},
{title : 'section', block : 'section', wrapper: true, merge_siblings: false},
{title : 'article', block : 'article', wrapper: true, merge_siblings: false},
{title : 'blockquote', block : 'blockquote', wrapper: true},
{title : 'hgroup', block : 'hgroup', wrapper: true},
{title : 'aside', block : 'aside', wrapper: true},
{title : 'figure', block : 'figure', wrapper: true}
],
setup : function(ed) {
ed.onSubmit.add(function(ed, e) {
doTinyMCECleanUp(e.target, ed.id);
});
},
});
I tried a lots with 2 plugin mediahtml5 and media.
When i use media plugin. If i add video tags it insert flashobject with video tags.
And also when i update the content video tags goes out. I can't see it anywhere any html source editor. i can see only flash object source.
when i use mediahtml5 plugin i can add videos into editor but can not see into html view source editor.
Can anybody please help me .
Have a look at the tinymce settings valid_elements and valid_children.
Tinymce stips out html tags that do not match the configuration/ are invalid.
Add the 'extend_valid_elements' to your tiny mce initalization. For example:
$('#my_textarea').tinymce({
...
extended_valid_elements: "audio[id|class|src|type|controls]",
...
})
The example above allows you to insert 'audio' tags with the desired element properties in the tiny mce editor.
Note: I use tiny mce jquery plugin but it's the same thing for the regular tiny mce.
I have a textarea that I want to add a simple wysiwyg editor. I chose TinyMCE but don't need all of the options available so I was using a sample from their page (http://www.tinymce.com/tryit/custom_formats.php) that just had the basic simple formatting options I was looking for.
The problem I'm having is that with the code below the editor shows up but clicking styles (i.e., Bold, Underline, etc.) doesn't update the window. It appears to update the underlying HTML style (although popping the embedded HTML editor window also doesn't seem to work here), but I don't see a style change. But, if I comment out the "formats: " block, it does work. This was testing on Chrome, Firefox, and IE.
I downloaded the tinymce package and have things in a folder like so:
sample\
sample\tiny_mce
sample\tiny_mce\langs
sample\tiny_mce\plugins
sample\tiny_mce\themes
sample\tiny_mce\utils
sample\tiny_mce\license.txt
sample\tiny_mce\tiny_mce.js
sample\tiny_mce\tiny_mce_popup.js
sample\tiny_mce\tiny_mce_src.js
sample\index.html (see code below)
I took the content of the downloaded archive \jscripts* folder and moved it up to the root of my path. My HTML is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<title>TinyMCE Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<!-- OF COURSE YOU NEED TO ADAPT NEXT LINE TO YOUR tiny_mce.js PATH -->
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "table,inlinepopups",
// Theme options
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,|,table,removeformat,code",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Example content CSS (should be your site CSS)
//content_css : "/js/tinymce/examples/css/content.css",
// Style formats
style_formats : [
{title : 'Bold text', inline : 'b'},
{title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
{title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
{title : 'Example 1', inline : 'span', classes : 'example1'},
{title : 'Example 2', inline : 'span', classes : 'example2'},
{title : 'Table styles'},
{title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
],
formats : {
alignleft : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'left'},
aligncenter : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'center'},
alignright : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'right'},
alignfull : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'full'},
bold : {inline : 'span', 'classes' : 'bold'},
italic : {inline : 'span', 'classes' : 'italic'},
underline : {inline : 'span', 'classes' : 'underline', exact : true},
strikethrough : {inline : 'del'},
customformat : {inline : 'span', styles : {color : '#00ff00', fontSize : '20px'}, attributes : {title : 'My custom format'}}
}
});
</script>
</head>
<body>
<!-- OF COURSE YOU NEED TO ADAPT ACTION TO WHAT PAGE YOU WANT TO LOAD WHEN HITTING "SAVE" -->
<form method="post" action="show.php">
<p>
<textarea name="content" cols="50" rows="15">This is some content that will be editable with TinyMCE.</textarea>
<input type="submit" value="Save" />
</p>
</form>
</body>
</html>
Any ideas what I'm doing wrong? The example on their site seems to work fine so I'm assuming there's some sort of config problem on my end. Really I'm just looking for a textarea editor that will give me some basic HTML formatting options, I don't even need anything really fancy. Thanks for any help!
The default behavior of TinyMCE for bold, italic, underline is to use the html entities associated with the formatting. Example: <strong></strong>, <em></em>, and a span with inline style for underline.
It seems the Formats block of code is overriding this action by instead wrapping your selection in a span with a class name defined by the "classes" property.
In order to have your styles render with the formats block as seen above you need to add a style sheet with definitions for .bold, .italic, .underline and so on.
TinyMCE renders its UI on top of a textarea using iframes if I recall correctly so while simply linking a stylesheet will work for your front end, in order for this to show in the edit box you need to link to the stylesheet through the tinyMCE.init() object.
Using your folder structure, add a stylesheet \sample\tiny_mce\style.css, define your styles within, then below the formats block of code add: content_css: "\sample\tiny_mce\style.css". This will load the style sheet into the tinyMCE edit interface and you should then see your style definitions applied.
it should look like:
...
// Style formats
style_formats : [
{title : 'Bold text', inline : 'b'},
{title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
{title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
{title : 'Example 1', inline : 'span', classes : 'example1'},
{title : 'Example 2', inline : 'span', classes : 'example2'},
{title : 'Table styles'},
{title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
],
content_css : "tiny_mce/style.css"
...
I'm using TinyMCE in a Rails application. In my form, I have a "description" field with TinyMCE and this field is mandatory for the form validation.
But when I try to submit my form, I can't, because of the HTML5 form validation. My browser (Chrome and Firefox) tells me that the field is empty. And I have another problem. When Chrome displays the dialog for the empty field, it appears on the top of my page, not near my form field.
FF show up a bubble for required fileld but at wrong place, Chrome throws an error because it can't find field to show bubble.. So my solution is disable display:none style set by TinyMCE and reduce the field size and make its visibility hidden. this way browser will show bubble next to this field as this field is next to TinyMCE editor user will know what required field is missing.
textarea.tinymce {
background: transparent;
border: none;
box-shadow: none;
display: block !important;
height: 0;
resize: none;
width: 0;
visibility: hidden;
}
I used the "oninit" option in the textareas and worked:
oninit: function(editor) {
$currentTextArea.closest('form').bind('submit invalid', function() {
editor.save();
});
}
You could try to use onChange event, but it doesn't work properly in Firefox.
My complete code:
$('textarea.tinymce').each(function(){
var options = {
theme : "advanced",
skin : "cirkuit",
plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template", theme_advanced_buttons1 :"formatselect,fontsizeselect,forecolor,|,bold,italic,strikethrough,|,bullist,numlist,|,justifyleft,justifycenter,justifyright,|,link,unlink,|,spellchecker",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true
},
$this = $(this);
// fix TinyMCE bug
if ($this.is('[required]')) {
options.oninit = function(editor) {
$this.closest('form').bind('submit invalid', function() {
editor.save();
});
}
}
$this.tinymce(options);
});
I took #lucaswxp code and changed it a bit, because Firefox was throwing an error ($this.is not a function, if I recall it correctly).
Also I changed the way it fires the code from:
$this.tinymce(options);
to:
tinymce.init(options);
Full code:
$(window).load(function() {
var options = {
selector: 'textarea',
skin: "lightgray"
},
$this = $(this);
// fix tinymce bug
if ($this.is('[required]')) {
options.oninit = function(editor) {
$this.closest('form').bind('submit, invalid', function() {
editor.save();
});
}
}
tinymce.init(options);
});
Many thanks to the creator, it worked like wonder :)
I want a dojox.grid.DataGrid with a dojo.data.ItemFileReadStore as the data store. I want it to fill the entire screen. I don't want to specify dimensions in pixels. All the examples that I've seen specify them in pixels or use a CSV data store. I've tried using HTML elements and javascript to setup the datagrid and store.
Has anyone done this? Is there a bug? It seems like what anyone would want, but maybe it's not possible for some reason. Any ideas? Thanks!
Edit to insert code:
<div id="gridContainer" style="width: 100%; height: 100%;"></div>
<div id="gridContainer1" style="width: 400px; height: 200px;"></div>
<script type="text/javascript">
dojo.addOnLoad(function(){
// our test data store for this example:
var jsonStore = new dojo.data.ItemFileReadStore({
url: '/mydata.json'
});
var layout = [{
field: 'id',
name: 'id',
width: '20px'
},
{
field: 'name',
name: 'name',
width: '50px'
},
{
field: 'owner',
name: 'owner',
width: '50px'
}];
// create a new grid:
var grid = new dojox.grid.DataGrid({
query: {
rowid: '*'
},
store: jsonStore,
clientSort: true,
rowSelector: '20px',
structure: layout
},
document.createElement('div'));
dojo.byId("gridContainer1").appendChild(grid.domNode);
grid.startup();
});
</script>
Depending on whether I use gridContainer or gridContainer1, it does not show or shows the grid respectively.
What gives?
Yep - perfectly possible.
1) Page layout is the responsibility of the layout widgets (ContentPane, StackContainer, BorderContainer, TabContainer...) The grid is able to take part in a layout but you should really place it in a contianer that is designed to do layout.
2) Programatic creation can be achieved with:
var layout = [{
name: "MyFirstColumnHeader",
field: 'someColumnNameInMyData',
width: "180px;"
},
{
name: "MySecondColumnHeader",
field: 'someOtherColumnName',
width: "180px;"
}
];
var emptyData = {
identifier: 'uniqueIdOfEachItem',
label: 'displayName',
items: []
};
var store = new dojo.data.ItemFileWriteStore({
data: emptyData
});
var grid = new dojox.grid.DataGrid({
id: 'myGrid',
query: {
uniqueIdOfEachItem: '*'
},
store: store,
structure: layout
}, gridPlaceholder);
grid.startup();
where
MyFirstColumnHeader is the text you would like in the first column header
someColumnInMyData is the object attribute or 'column' in the data to be displayed
gridPlaceholder is a div on the page to put the grid into (just add an empty div to ContentPane and make the style of the ContentPane to be width : 100%, height : 100%
uniqueIdOfEachItem is the property of each displayed item that marks them as unique, e.g. their primary key or ID property
This example creates a read/write store and has a simple layout, but the dojo docs should be able to help with more complex examples.