I write text description in tinymce with spaces and html(line break and others etc etc).then i save it to mysql database.when i get it again and alert it,it shows me as same as it was.so till now it is fine.
When again i add it to tinymce to edit it,all html and spaces disappears..what can be the issue?
Here is my code
$('#description').tinymce({
// Location of TinyMCE script
script_url : 'tinymce/jscripts/tiny_mce/tiny_mce.js',
// General options
width : "825",
height: "300",
theme : "advanced",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_toolbar_location : "top",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,bullist,numlist,spellchecker",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
force_br_newlines : true,
force_p_newlines : false,
gecko_spellcheck : true,
forced_root_block : '', // Needed for 3.x
plugins : "paste,spellchecker",
spellchecker_languages : "+English=en,Russian=ru",
// encoding : "xml",
// Example content CSS (should be your site CSS)
content_css : "tinymce/examples/css/content.css",
//
apply_source_formatting : true,
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
here is how i am getting value
alert(json.description_demo);//this is ok
$("#description").val(json.description_demo);
alert($("#description").val());//now this is not ok..here is issue
tried this also
alert(json.description_demo);//ok
tinyMCE.get('description').setContent(json.description_demo);
alert(tinyMCE.get('description').getContent());//issue not ok
images
You will have to use tinyMce features to get ans set the value.
Try using
tinyMCE.get('description').getContent() to get the value
tinyMCE.get('description').setContent(value from db) to set the value.
Chekout tinymce docs http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent
Related
What would be the most angularJS way to go about using the same view contained in different states but not positioned in the same spot on the page.
So for example, if I have :
app.config( function( $stateProvider, $urlRouterProvider) {
$stateProvider
.state({
name : 'view1' ,
url: '/' ,
views:{
'view1_child1' : {templateUrl : "../src/template1.html },
'view1_child2' : {templateUrl : "../src/template2.html },
}
})
.state({
name : 'view2' ,
url: '/index.html' ,
views:{
'view2_child3' : {templateUrl : "../src/template3.html },
'view2_child4' : {templateUrl : "../src/template4.html },
'view2_child1' : {**templateUrl : "../src/template1.html**}
}
})
})
Notice template1.html is used in 2 different states. let say in the first state that div is placed centered of the screen, but in the different state it is placed on the right hand side.. What would be a more economical way (reuse of same code), simple but not too convoluted to do it the angularJS way?
thnks
I have a div with a DOJO table. I want to display the div in full screen. I have tried using HTML5 API but the height and width are not enlarged in full screen mode. What are the other ways I can achieve a full screen with only the div containing DOJO table with it?? This is the table I have.
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.Pagination");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojox.grid.enhanced.plugins.Filter");
dojo.require("dojox.data.QueryReadStore");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
var gridLayout = [
{
name : "Date & Time",
classes : "title",
field : "date",
width : "140px"
}, {
name : 'Status',
classes : "title",
field : "statusMessage",
fields : [ 'statusMessage', 'statusMessageColor' ],
formatter : formatLink1,
width : "140px"
}];
I want to target specific iframes using a class attribute in order to set the width with CSS.
The iframes are google maps embeds like this one:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/?ie=UTF8&t=m&ll=52.8382,-2.327815&spn=4.646012,9.338379&z=6&output=embed"></iframe>
They are copied and pasted into the HTML source editor of tinyMCE. I need to apply a class attribute to the iframe but it is striped out when clicking update on the source editor.
I've tried using valid_elements and extended_valid_elements in the config but neither work for iframe[class].
I'm running version 3.4.3. I downloaded 3.5.7 and the it seems to have the same problem. The behaviour is also exhibited on the demo on the tinyMCE website (http://www.tinymce.com/tryit/full.php) despite the docs for valid_elements stating that the class attribute is supported (http://www.tinymce.com/wiki.php/Configuration:valid_elements).
Here is the full config:
tinyMCE.init({
// General options
mode : "specific_textareas",
editor_selector : "formInputWysiwyg",
theme : "advanced",
plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,wordcount,advlist",
// Theme options
theme_advanced_buttons1 : "bold,italic,strikethrough,formatselect,styleselect,undo,redo,|,code,|,fullscreen,",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,|,search,replace,|,bullist,numlist,|,blockquote,nonbreaking,|,charmap,media,|,link,unlink,anchor,image",
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,
width : "500",
height : "600",
apply_source_formatting : true,
remove_linebreaks: true,
theme_advanced_blockformats : "p,blockquote,h1,h2,h3,h4,h5,h6",
forced_root_block : false,
plugin_preview_width : "1050",
plugin_preview_height : "800",
convert_urls : false,
extended_valid_elements : "figure,figcaption",
// Skin options
skin : "o2k7",
skin_variant : "silver",
// Example content CSS (should be your site CSS)
content_css : "/admin/includes/css/tinymce.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js",
// Style formats
style_formats : [
{title : 'Google Maps', selector : 'iframe', classes : 'google-maps-embed'},
{title : 'Intro', selector : 'p', classes : 'intro'},
{title : 'News Image', selector : 'img', classes : 'news-image'}
],
});
In \tinymce\jscripts\tiny_mce\plugins\media\editor_plugin_src.js, I've fixed this issue by removing the "class" from the rootAttributes in line 12 and then minifying using jscompress.com and replaced the contents of the editor_plugin.js file (in the same folder).
Changed:
var rootAttributes = tinymce.explode('id,name,width,height,style,align,class,hspace,vspace,bgcolor,type')
To:
var rootAttributes = tinymce.explode('id,name,width,height,style,align,hspace,vspace,bgcolor,type')
It's still an issue in 3.5.8, and have submitted it as a bug.
Have you got the 'media' plugin enabled? I'm seeing a similar problem, and I wonder whether the media plugin is interfering with the normal operation of the editor on HTML elements. I tried creating a style_formats option to manipulate the iframe, but without any luck.
For those who experience the media plugin conflict, but still need the media plugin, you can set the following option during tinymce initialization to remove the conflict:
media_live_embeds: false
Tested in tinymce v4.6.1
Is it possible to freeze first 3 columns of Primefaces' data table?
I'm using Primefaces 3.1
Primefaces does not support fixed columns right now.
Jquery fixed column was used to achieve the same. Reference : http://datatables.net/extras/fixedcolumns/
Example:
var oTable2 = $(primfacesDataTableId).find('table').dataTable({
"sScrollX" : "100%", //Scroll
"sScrollY" : "180",
"bAutoWidth" : false,
"bScrollCollapse" : true,
"bPaginate" : false,
"bSort" : false,
"sInfo" : "",
"sInfoEmpty" : ""
});
var oFC = new FixedColumns(oTable2, {
"iLeftColumns" : 4, //Freezed first for columns
"sHeightMatch" : "auto",
"iLeftWidth" : 405
});
Thanks,
Shikha
For those who are using Primefaces 4.1 or above, this feature is now implemented (it took four years from the first request, by the way):
https://code.google.com/p/primefaces/issues/detail?id=366
You can play with the horizontal scrolling in the showcase.
I'm trying to insert a placeholder in html code that will be replaced later on dynamically. So far I managed to get the code inserted, and TinyMCE recognizes the tag, but when I try to append an id attribute to it, the attribute gets removed for an unknown reason. I tried most of the additional options, but none seem to work.
Current config:
extended_valid_elements : "module[id]",
valid_children : "module[img]",
custom_elements : "module",
The code to create the button (and subsequently insert the code):
setup : function(ed) {
// Add a custom button
ed.addButton("module", {
title : "Module",
image : "images/app-x-php-icon.png",
onclick : function() {
ed.focus();
var options = document.getElementById('rendermcemods').innerHTML+"";
var optionList = options.split('|');
var name=prompt("Please enter module name out of: "+options,optionList[0]);
for(var i=0;i<optionList.length;i++){
if(optionList[i] == name){
var patt=new RegExp('<module id="'+name+'">.*</module>','ig');
var content = '<module id="'+name+'"><img src="images/app-x-php-icon.png" /></module>';
//alert(content);
if(! patt.test(ed.getContent())){
ed.execCommand('mceInsertContent', false,content);
}
}
}
}
});
}
As you might notice, there's an alert before the insert, which I used to verify that the content is right...
When use the button to insert the code and then view the html, this is what I get:
<module><img src=images/app-x-php-icon.png" alt="" /></module>
Would anyone know how to fix this?
Update:
full config settings for tinyMCE:
// General options
mode : "none",
theme : "advanced",
plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,\n\
save,advhr,advimage,advlink,emotions,iespell,inlinepopups,\n\
insertdatetime,media,searchreplace,print,contextmenu,paste,\n\
directionality,fullscreen,noneditable,visualchars,\n\
nonbreaking,xhtmlxtras",
// Theme options
theme_advanced_buttons1 : "fullscreen,help,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect,|,module",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,code,|,insertdate,inserttime,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,ltr,rtl,|,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,blockquote,|,insertfile,insertimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Skin options
skin : "o2k7",
skin_variant : "silver",
document_base_url : "http://www.example.com",
content_css : "content.css",
extended_valid_elements : "module[id]",
valid_children : "module[img]",
/*custom_elements : "module", */
// Drop lists for link/image/media/template dialogs
external_link_list_url : "js/generateList.php?A=link",
external_image_list_url : "js/generateList.php?A=image",
media_external_list_url : "js/generateList.php?A=media",
setup : function(ed) {
// Add a custom button
ed.addButton("module", {
title : "Module",
image : "images/app-x-php-icon.png",
onclick : function() {
ed.focus();
var options = document.getElementById('rendermcemods').innerHTML+"";
var optionList = options.split('|');
var name=prompt("Please enter module name out of: "+options,optionList[0]);
for(var i=0;i<optionList.length;i++){
if(optionList[i] == name){
var patt=new RegExp('<module id="'+name+'">.*</module>','ig');
var content = '<module id="'+name+'"><img src="images/app-x-php-icon.png" /></module>';
//alert(content);
if(! patt.test(ed.getContent())){
ed.execCommand('mceInsertContent', false,content);
}
}
}
}
});
}
Another update: It might be interesting (and hopefully help to solve) to know that the id attribute isn't removed when tinyMCE is loaded and it already is in there, and a clean-up on existing code with the attribute doesn't remove it either.
I would put module to the valid_elements instead of the extended_valid_elements/custom_elements. The extended_valid_elements do sometimes behave strange.
My own config then looks like this (you will need to enlarge your own valid_elements and valid_children settings (if not used in your custom tinymce config you will have to use the defaults (can be found at the moxiecode website))):
// The valid_elements option defines which elements will remain in the edited text when the editor saves.
valid_elements: "#[id|class|title|style|onmouseover]," +
"module," +
"a[name|href|target|title|alt]," +
"#p,blockquote,-ol,-ul,-li,br,img[src|height|width],-sub,-sup,-b,-i,-u," +
"-span[data-mce-type],hr",
valid_children: "body[p|ol|ul|hr]" +
"module[img]" +
",p[a|span|b|i|u|sup|sub|img|hr|#text|blockquote]" +
",span[a|b|i|u|sup|sub|img|#text|blockquote]" +
",a[span|b|i|u|sup|sub|img|#text|blockquote]" +
",b[span|a|i|u|sup|sub|img|#text|blockquote]" +
",i[span|a|b|u|sup|sub|img|#text|blockquote]" +
",sup[span|a|i|b|u|sub|img|#text]" +
",sub[span|a|i|b|u|sup|img|#text]" +
",li[span|a|b|i|u|sup|sub|img|ol|ul|#text]" +
",ol[li]" +
",ul[li]",
The solution I ended up using was modifying the blockElementsMap and the transitional map taht are in the source code. That seemed to be the only way to get the custom tag recognized as 'blocklevel' element, as well as being able to add it exactly like I want in the code for later processing.