Related
I have created one form in template file using HTML Tags like input, select, buttons etc. I have added textarea in form for address and i want to change it to wysiwyg editor.
Shall i use js/css provided by magento itself?
How to achieve this (change textarea to wysiwyg editor) quickly?
P.S. : I want to do this in template html file only. There is no form.php, grid.php etc.
I went through couple of other question/answers here on stackoverflow/magentostack regarding bringing backend tinyMCE to frontend,
Through these
https://magento.stackexchange.com/questions/49504/how-to-add-wysiwyg-editor-to-custom-frontend-form-of-custom-module-in-magento1-9
Magento add wysiwyg to custom frontend form
But they got issue listed/commented with Uncaught ReferenceError: tinyMCE is not defined error. They might have worked on certain pages(if any), but when i tried on product detail page, it didn't work and showed me same error on console tinyMCE is not defined.
So, i went to see which file/js is responsible for this. and i figured it out that js/tiny_mce/tiny_mce_jquery.js is the one responsible for tinyMCE.
So you need to include this file, where you want wysiwyg editor. like i was testing on product detail page so i added only on it
<layout>
....
<catalog_product_view>
<reference name="head">
<action method="addjs"> <script>tiny_mce/tiny_mce_prototype.js</script></action>
</referrence>
</catalog_product_view>
....
</layout>
Then on product view page(for.eg. was just to test) where i added text field
<textarea id="myfield"></textarea>
And script part, reference from those listed question above
window.onload=function()
{
tinyMCE.init({
mode : "exact",
elements: "myfield",
theme : "advanced",
plugins : "inlinepopups,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras",
theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,|,visualchars,nonbreaking",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
theme_advanced_resize_horizontal : 'true',
theme_advanced_resizing : 'true',
apply_source_formatting : 'true',
convert_urls : 'false',
force_br_newlines : 'true',
doctype : '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'
});
};
</script>
And it worked,
Ideal solution would be using Magento's FORM concept to be able to achieve this.
However, since custom template is being used, I guess here is what you need.
1) Put this code in the .phtml file you want the editor to appear directly.
2) In the 6th line of the code you can see elements: "short_description". You can change "short_description" with the element id you want. You can add more than one element id separated with comma and without spaces.
You might be looking for this.
<script type="text/javascript">
window.onload=function()
{
tinyMCE.init({
mode : "exact",
elements: "short_description",
theme : "advanced",
plugins : "inlinepopups,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras",
theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,|,visualchars,nonbreaking",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
theme_advanced_resize_horizontal : 'true',
theme_advanced_resizing : 'true',
apply_source_formatting : 'true',
convert_urls : 'false',
force_br_newlines : 'true',
doctype : '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'
});
};
</script>
Let me know if this works for you and I was able to understand this correctly.
Happy to Help!
Happy Coding...
I'm writing a module, and i'm searching how to add build-in wysiwyg editor to textarea in frontend. It is possible? Does anyone knows, how to implement that?
So, I am keeping this as the final solution just in case anyone need it :
1) Put this code in the .phtml file you want the editor to appear directly.
2) In the 6th line of the code you can see elements: "short_description". You can change "short_description" with the element id you want. You can add more than one element id separated with comma and without spaces.
Example: I put this code in app/design/adminhtml/default/default/template/catalog/product/edit.phtml because i want the editor to appear directly when i edit product's description, short description etc.
The code:
<script type="text/javascript">
window.onload=function()
{
tinyMCE.init({
mode : "exact",
elements: "short_description",
theme : "advanced",
plugins : "inlinepopups,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras",
theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,|,visualchars,nonbreaking",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
theme_advanced_resize_horizontal : 'true',
theme_advanced_resizing : 'true',
apply_source_formatting : 'true',
convert_urls : 'false',
force_br_newlines : 'true',
doctype : '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'
});
};
</script>
If anyone is getting ReferenceError: tinyMCE is not defined error in console, here is solution for you : Magento wysiwyg editor in phtml file
i.e. You need to include js/tiny_mce/tiny_mce_jquery.js
I am struggling with declarative setting grid column to a external template
Here's my template
<script type="text/x-kendo-template" id="someTemplate">
<div>
<label> ${firstName}</label>
<label>${lastName}</label>
</div>
</script>
and here's the grid declaration
<div data-role="grid" data-bind="source: people" data-columns='[
{"field": "firstName",
"title": "Full Name",
"template": "kendo.template($("#someTemplate"))"
}
]'></div>
And here's JS Fiddle reproducing my problem:
JSFiddle repro
You have 2 mistakes in your code :
you have to make your template from the html of the script element
you have to call directly kendo.template(...) as it is a function and not between quotes.
This gives such code :
"template": kendo.template($("#someTemplate").html())
See this jsfiddle : http://jsfiddle.net/bSGdW/9/
After hours of expirements I've found out that ....
template: kendo.template($("\\#check-results-template").html())
so just watch out the '#' wherever use kendo things !!
Is it possible to put the title "inside" when using Fancybox 2 for YouTube/iFrame content?
Anytime I try to insert
title: {
type: 'inside'
}
the video then plays in a new window at full screen.
Here is what I'm currently using:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<link rel="stylesheet" href="lib/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lib/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".vids").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '60%',
height : '60%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
As a bonus, I would like the Title text to contain a link that opens _blank if it's possible.
Also, perhaps related, to make videos play in all browsers, I have to alter the YouTube links, rather than doing something like:
<a class="vids fancybox.iframe" href="http://www.youtube.com/watch?v=whatever">
I have to change it, and insert the word "embed", such as:
<a class="vids fancybox.iframe" href="http://www.youtube.com/embed/whatever">
Is this a proper method?
Thanks in advance.
Many question eh?
First, to get the title inside the fancybox use the option helpers like
helpers: { title : { type : 'inside' } }
Second, to set a title with a link ... I would advice to you to set a data-* attribute in your anchor so the link won't show up in the normal browser's tooltip ... something like
<a class="vids" href="http://www.youtube.com/watch?v=whatever" title="normal title" data-caption="open video
Notice that I didn't add target="_blank" since clicking on the link will navigate automatically to the next page (and closing fancybox)
Then use the callback beforeShow to construct the title
beforeShow: function(){
this.title = this.title + " " + $(this.element).data("caption");
}
Third, the proper way to display youtube videos is having a normal link (like in me second example above) and no more. Then include the fancybox-media js file in your document like
<script type="text/javascript" src="lib/helpers/jquery.fancybox-media.js"></script>
(check your own path)
... and use the helpers option to set the media like
helpers : {media : {} }
so, summarizing, your html should be something like
<a class="vids" href="http://www.youtube.com/watch?v=whatever" title="normal title" data-caption="open video
and your fancybox custom script like
<script type="text/javascript">
$(document).ready(function() {
$(".vids").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '60%',
height : '60%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
helpers : {
title : { type : 'inside' },
media : {}
},
beforeShow: function(){
this.title = this.title + " " + $(this.element).data("caption");
}
});
});
</script>
I am currently working on a codeigniter project, now i want a option "Blog" where user can post and comment. A post can contain images , tables, different fonts, similar case is for comments . I am novice in webdevelopment, only know php and it's one framework. Would you please anyone suggest me,what should i do ?
NEW:
After this post i got some good advice and i took decision to use rich text editor tiny_mce but my bad luck that again i am having problem . I can't include the tiny_mce or after including it's not working . I worked how they instructed but no change normal textarea is coming . What should i do?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="<?php echo base_url("js/jquery-1.7.2.min.js"); ?>" type="text/javascript" ></script>
<script src="<?php echo base_url("js/scripts/tiny_mce/tiny_mce.js"); ?>" type="text/javascript" ></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
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,wordcount,advlist,autosave",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft",
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 : "css/content.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 : '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'}
},
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
</script>
</head>
<body>
<form method="post" action="somepage">
<div>
<div>
<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%"></textarea>
</div>
<br />
<input type="submit" name="save" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</div>
</form>
</body>
</html>
Here is a basic blog tutorial and also check this one but you can use WordPress for blog with codeigniter and here is an answer on so about integrating WordPress with codeigniter.
About WordPress.
Hope it helps.