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...
Related
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 trying to add a product directly to cart which is in virtuemart from external page. I have one external page there I have a button.
When we click on that button, the product details should go to cart in virtuemart and it should not affect the virtuemart add to cart functionality.
What should I do to make it possible. If you know the answer help me. thanks in advance.
Good Question, i have implemented this concept in one of my custom component page. you can use it anywhere only you have to provide product id and quantity.
following is the code you have to implement to your page:
Dont forget to change the variable in following div:
quantity= "1" replace 1 with your quantity
"$res->virtuemart_product_id" replace it with your product id
Place the following div inside your page:
<div class="addtocart-bar">
<span class="addtocart-button" style="float:right !important;">
<input type="submit" url='<?php echo JRoute::_("index.php?option=com_virtuemart&nosef=1&view=cart&task=addJS&format=json&lang=en&quantity=1&quantity%5B%5D=1&view=cart&virtuemart_product_id%5B%5D=$res->virtuemart_product_id&option=com_virtuemart"); ?>' title="Add to Cart" value="Add to Cart" id="btn_addtocart" class="bttn right" name="addtocart">
</span>
<div class="clear"></div>
</div>
and at the top of page you have to add following code:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
jQuery(document).ready(function(){
jQuery("[name=addtocart]").click(function(e){
e.preventDefault();
var url = $(this).attr('url');
jQuery.ajax({
type:"POST",
url: url,
async:false,
data:{'p_id' : 1 },
success: function(html){
var msg ="<div id='fancybox-content'><div style='width:auto;height:auto;overflow: auto;position:relative;'><div class='popUp_Box'><p>This item has been added to your shopping cart.</p><a class='continue bttn rmv_brdr btn_fix' href='index.php?option=com_virtuemart&view=categories&virtuemart_category_id=0'>Keep Shopping</a><?php if($user->id){ ?><a href='index.php?option=com_virtuemart&view=cart' class='showcart floatright bttn btn_fix'>Check Out</a><?php }else{ ?><a href='index.php?option=com_users&view=login&checkout=1' class='showcart floatright bttn btn_fix'>Check Out</a><?php } ?></div></div></div><a id='fancybox-close' style='display: block;'></a>";
jQuery.fancybox({
"titlePosition" : "inside",
"transitionIn" : "elastic",
"transitionOut" : "elastic",
"type" : "html",
"autoCenter" : true,
"closeBtn" : true,
"closeClick" : false,
"content" : msg
}
);
}
});
});
});
</script>
The Above Script will work if you have fancybox plugin saved at your root folder, for that please download fancybox plugin from "http://fancyapps.com/fancybox/#license". I have used fancybox because when the order is added to cart your order confirmation will appear in fancybox, that looks great. i am also attaching one of the image to show where you have to add fancybox plugin folder. I hope this will help you a lot.
Regards
Mohit :)
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.
I am looking for a WYSIWYG editor for my forum website. Which has inbuilt syntax highlighting like we have in www.stackoverflow.com or www.asp.net .
So that I can save the whole text [entered by user] into the database and can render on the page with syntax highlighting.
Please help.
Don't take me wrong but I have already searched on google and Stackoverflow for this and I am not able to get the required answer.
I would appreciate if it is an open source. :-)
I like and used tinymce editor, it's sample code something like following.
<script src="/javascripts/tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "safari",
convert_urls : false,
width : "560",
height : "15",
// 'code' in 'theme_advanced_buttons1' is used for the HTML content
theme_advanced_buttons1 : "fontselect,fontsizeselect, separator, bold,italic,underline,separator,forecolor,backcolor,code, justifyleft,justifycenter,justifyright,justifyfull",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left", 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]" });
</script>
<textarea cols="40" id="template_content" name="template[content]" rows="20"></textarea>