Call-back icon  Sales: Call 877.832.5289 (N America)|310.295.4144 (International)

Magento

eCommerce Software for Online Growth

Magento Forum

   
Page 9 of 10
WYSIWYG for CMS
 
dotprkirk
Jr. Member
 
Total Posts:  14
Joined:  2008-04-22
 

Hi. It appears to be working fine (many thanks to Jim’s step-by-step!) in Firefox, but not IE7 for the product descriptions page. However, the CMS page shows tinyMCE as working (IE7). Has anyone else experienced this?

Also, can anyone take a stab as to why the code for unordered lists wouldn’t be working?

 
Magento Community Magento Community
Magento Community
Magento Community
 
josh_trivera
Member
 
Avatar
Total Posts:  62
Joined:  2008-02-12
Wisconsin, USA
 

My Success: v1.1.3 (valid for: 1.1.2, 1.1.3, 1.1.4)
Warning: I / nor any part of Magento is responsible for anything you choose to download/custom modifications… now that thats covered!
I’ve been requested to add more info…
Note* I use SSH + *nix + FF3.0

Installing Tiny MCE
1. downloaded tiny_mce,

http://prdownloads.sourceforge.net/tinymce/tinymce_3_1_1.zip?download
-unzip it, and change directory to : tinymce/jscripts/
-tarball and transfer the file to your server
tar -czvf tiny_mce.tar.gz tiny_mce/ && scp tiny_mce.tar.gz username@serverhost:~/
-move or cp that file to your Magento install *this varies*
mv tiny_mce.tar.gz /home/account/public_html(webroo)/magentoinstall/js/
-untar it,
tar -xzvf tiny_mce.tar.gz
should look like the following:
magentofolder/js/tiny_mce/tiny_mce.js

Checking Core for Wysiwyg Switch (will need to re-check per version until Magento defaults to ‘True’, should be an admin system config)
2. Check Core for CMS switch:

/app/code/core/Mage/Adminhtml/Block/Cms/Page/Edit/Tab/Main.php
around line: 100, ensure the following
'wysiwyg' => true,

Adding Universal-Dynamic Administrative Javascript Reference
3. Add the javascript call to the Template Page file, enabling universal Administrative Use.
Where:

public_html/app/design/adminhtml/default/default/template/page.phtml
end of Line: 37
<script type="text/javascript" src="<?php echo $this->getJsUrl('tiny_mce/tiny_mce.js') ?>" language="javascript"></script>

Adding Pre-loaded information to Content Areas
4. Need to Pre-load content into boxes to pass Required Field Check
Where:  magento/app/design/adminhtml/default/default/template/page/head.phtml
Line: ~ start insert @ line: 14 (v1.1.4)
before:

<?php echo $this->getCssJsHtml() ?>
put:
<script language="javascript" type="text/javascript">
window.onload = function() {
    
if(document.getElementById('page_content')){
        
if(document.getElementById('page_content').value == ''){
            document
.getElementById('page_content').value "<p>Page Content</p>";
        
}
    }
Note* You can/should add additional If statements for: block_ontent’, ‘description’, ‘short_description’
Reference sh1ny post below. 

Other Notes:
Adding the Editor to Desired Locations in the Admin:
When updating these locations… remember to:
Remove any Javascript references to a Tiny MCE Javascript path.
Reasoning?
A) we have universal access, so this is redundant.
B) won’t work if using user_mod
C) hard coding links = bad

5. CMS/Pages -
Where:

lib/Varien/Data/Form/Element/Editor.php
Activate editor: Uncomment Line 54 and uncomment line 68
<script language="javascript" type="text/javascript">
                    
tinyMCE.init({
                        mode 
"exact",
                        
theme "'.$this->getTheme().'",
                        
elements 'nourlconvert',
                        
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 "false",
                        
theme_advanced_resizing "false",
                        
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>;

5. Catalog/Products -
Where:

app/design/adminhtml/default/default/template/catalog/product/edit.phtml
Add editor: after line 48 (closed form tag)
<script language="javascript" type="text/javascript">

                   
tinyMCE.init({
                        mode 
"exact",
                        
theme "advanced",
                        
strict_loading_mode true
                        
elements "description,short_description",
                        
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>

Result:
Works like a Gem.
Last Updated: Sept 15th
~Josh

 
Magento Community Magento Community
Magento Community
Magento Community
 
wokka
Jr. Member
 
Total Posts:  4
Joined:  2008-06-06
 

Anyone got this working in 1.1.4?

Thanks in advance
John

 
Magento Community Magento Community
Magento Community
Magento Community
 
josh_trivera
Member
 
Avatar
Total Posts:  62
Joined:  2008-02-12
Wisconsin, USA
 

Working on the upgrade right now… be back soon.

Upgrade Results
Notes: upgrade to 1.1.4
-tiny_mce.js = fine
-short / long descriptions = fine
-CMS content = broke

fix for CMS content:

This was a result of the Main.phtml being replaced in the core… you have to turn the value back to ‘true’ again.
Where?:

/app/code/core/Mage/Adminhtml/Block/Cms/Page/Edit/Tab/Main.php
Line: 100

What it will look like: (look at the wysiwyg)

$fieldset->addField('content''editor', array(
            
'name'      => 'content',
            
'label'     => Mage::helper('cms')->__('Content'),
            
'title'     => Mage::helper('cms')->__('Content'),
            
'style'     => 'width:98%; height:600px;',
            
'wysiwyg'   => false,
            
'required'  => true,
        ));

What it should look like: (look at the wysiwyg)

$fieldset->addField('content''editor', array(
            
'name'      => 'content',
            
'label'     => Mage::helper('cms')->__('Content'),
            
'title'     => Mage::helper('cms')->__('Content'),
            
'style'     => 'width:98%; height:600px;',
            
'wysiwyg'   => true,
            
'required'  => true,
        ));

Thats it smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
curiousEngine
Jr. Member
 
Avatar
Total Posts:  12
Joined:  2008-08-16
Mauritius
 

This should be available in upcoming releases.

- Roy Rubin

We are already in the release 1.1.4

WHERE IS THE WYSIWYG Editor Integration??
confused

 Signature 

Software is like Sex, its better when its Free!

 
Magento Community Magento Community
Magento Community
Magento Community
 
Kerry Hatcher
Sr. Member
 
Avatar
Total Posts:  91
Joined:  2008-07-15
Macon, GA
 

@RoyRubin

As we draw closer to the launch I"m trying not to use any hacks, any word on maybe getting a http://www.magentocommerce.com/boards/viewreply/55987/ like fix in the official version?

Thanks,

 Signature 

Kerry Hatcher
Webmaster
ShuBee.com

“You can live forever without ever really living”
KerryHatcher.com

 
Magento Community Magento Community
Magento Community
Magento Community
 
phillyj8
Jr. Member
 
Total Posts:  20
Joined:  2008-06-12
 

I’m in 1.1.4.  I tried josh_trivera’s instructions for 1.1.3 and fix for 1.1.4.  It got me past the grey window problem and now the editor actually shows up, but I can’t click inside of it at all.  I’ve tried 3 browsers, same result.  This is in the CMS section - I’m not interested in using it in the Catalog.

One note is that I didn’t use SSH as he suggested - I used FTP.  I assume this is okay?

Edit: Actually, when I uncomment the initial code in /lib/Varien/Data/Form/Element/Editor.php, I have the problem I described above.  When I paste in josh_trivera’s code for this page, I get the issue where the page is blank and half of it is grey.

 
Magento Community Magento Community
Magento Community
Magento Community
 
sh1ny
Jr. Member
 
Total Posts:  1
Joined:  2008-04-11
 

I had to modify the page/head.phtml like this :

<script language="javascript" type="text/javascript">
window.onload = function() {
    
if(document.getElementById('page_content')){
        
if(document.getElementById('page_content').value == ''){
            document
.getElementById('page_content').value "<p>Enter CMS content</p>";
        
}
    }

    
if(document.getElementById('block_content')){
        
if(document.getElementById('block_content').value == ''){
            document
.getElementById('block_content').value "<p>Enter Block content</p>";
        
}
    }

    
if(document.getElementById('description')){
        
if(document.getElementById('description').value == ''){
            document
.getElementById('description').value "<p>Enter Description Here</p>";
        
}
    }
    
if(document.getElementById('short_description')){
        
if(document.getElementById('short_description').value == ''){
            document
.getElementById('short_description').value "<p>Enter Short Description Here</p>";
        
}
    }
}
</script>

To get the product descriptions working in 1.1.4, or they would always end up as required.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Pointlessjon
Jr. Member
 
Total Posts:  16
Joined:  2008-07-28
Santa Cruz, California
 
RoyRubin - 10 September 2007 09:57 AM

This should be available in upcoming releases.

I really don’t want to touch the core :/ Any chance of this happening sooner than later, Roy?

 
Magento Community Magento Community
Magento Community
Magento Community
 
josh_trivera
Member
 
Avatar
Total Posts:  62
Joined:  2008-02-12
Wisconsin, USA
 

While you may not want to ‘touch’ the core.
The core ‘touch’ is just a switch from a ‘false’ to ‘true’
-’wysiwyg’ => true,
Until this is change to true or put as a config option in the database, you will have to “flip the switch” so to speak.

Shiny, i’m referencing your additions.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Morningtime
Member
 
Avatar
Total Posts:  54
Joined:  2008-05-13
Munich
 
sh1ny - 08 September 2008 11:48 PM

I had to modify the page/head.phtml like this :

[..]

To get the product descriptions working in 1.1.4, or they would always end up as required.

Dear Josh Trivera and Sh1ny,

my original 1.1.4 page/head.phtml looks like this:

<title><?php echo htmlspecialchars(html_entity_decode($this->getTitle())) ?></title>
<
meta http-equiv="Content-Type" content="<?php echo $this->getContentType() ?>"/>

<
link rel="icon" href="<?php echo $this->getSkinUrl('favicon.ico') ?>" type="image/x-icon"/>
<
link rel="shortcut icon" href="<?php echo $this->getSkinUrl('favicon.ico') ?>" type="image/x-icon"/>

<
script type="text/javascript">
    var 
BLANK_URL '<?php echo $this->getJsUrl() ?>blank.html';
    var 
BLANK_IMG '<?php echo $this->getJsUrl() ?>spacer.gif';
    var 
BASE_URL '<?php echo $this->getUrl('*') ?>';
    var 
SKIN_URL '<?php echo $this->getSkinUrl() ?>';
</script>

<?php 
echo $this->getCssJsHtml() ?>

<?php 
if($this->getCanLoadExtJs()): ?>
<script type="text/javascript">
    
Ext.BLANK_IMAGE_URL BLANK_IMG;
    
Ext.UpdateManager.defaults.loadScripts false;
    
Ext.UpdateManager.defaults.disableCaching true;
</script>
<?php 
endif; ?>

<script type="text/javascript">
    
Fieldset.addToPrefix(<?php echo Mage::helper('adminhtml')->getCurrentUserId() ?>);
</script>

<?php 
echo $this->helper('core/js')->getTranslatorScript() ?>

How would I process your suggested changes? Am I looking at the wrong file? It’s app/design/adminhtml/default/default/template/page/head.phtml

I’ve done a search t hrough the entire Magento installation to find anything similar to what youare showing, but can’t find it…

 Signature 

Morningtime Network :: Working with Magento since 2008. (Dreaming about it since 1980.)

 
Magento Community Magento Community
Magento Community
Magento Community
 
Morningtime
Member
 
Avatar
Total Posts:  54
Joined:  2008-05-13
Munich
 

Josh’s #5 instruction causes a Syntax Error. Caused after adding that javscript bit after the </form> tag in app/design/adminhtml/default/default/template/catalog/product/edit.phtml.

The solution is to remove that second }); bit

});

There’s one too many.

 Signature 

Morningtime Network :: Working with Magento since 2008. (Dreaming about it since 1980.)

 
Magento Community Magento Community
Magento Community
Magento Community
 
noSpam
Jr. Member
 
Total Posts:  3
Joined:  2008-04-14
 

my magento/app/design/adminhtml/default/default/template/page/head.phtml only has 28 lines. (mgnt 1.1.4)

Here I put my original file

<title><?php echo htmlspecialchars(html_entity_decode($this->getTitle())) ?></title>
<
meta http-equiv="Content-Type" content="<?php echo $this->getContentType() ?>"/>

<
link rel="icon" href="<?php echo $this->getSkinUrl('favicon.ico') ?>" type="image/x-icon"/>
<
link rel="shortcut icon" href="<?php echo $this->getSkinUrl('favicon.ico') ?>" type="image/x-icon"/>

<
script type="text/javascript">
    var 
BLANK_URL '<?php echo $this->getJsUrl() ?>blank.html';
    var 
BLANK_IMG '<?php echo $this->getJsUrl() ?>spacer.gif';
    var 
BASE_URL '<?php echo $this->getUrl('*') ?>';
    var 
SKIN_URL '<?php echo $this->getSkinUrl() ?>';
</script>

<?php 
echo $this->getCssJsHtml() ?>

<?php 
if($this->getCanLoadExtJs()): ?>
<script type="text/javascript">
    
Ext.BLANK_IMAGE_URL BLANK_IMG;
    
Ext.UpdateManager.defaults.loadScripts false;
    
Ext.UpdateManager.defaults.disableCaching true;
</script>
<?php 
endif; ?>

<script type="text/javascript">
    
Fieldset.addToPrefix(<?php echo Mage::helper('adminhtml')->getCurrentUserId() ?>);
</script>

<?php 
echo $this->helper('core/js')->getTranslatorScript() ?>

I can explain better than I have to change code in this file. I’m quite confused. moreover, it seems that what I am fine.

josh_trivera - 29 August 2008 08:15 AM

My Success: v1.1.3 (valid for: 1.1.2, 1.1.3, 1.1.4)
Adding Pre-loaded information to Content Areas
4. Need to Pre-load content into boxes to pass Required Field Check
Where:  magento/app/design/adminhtml/default/default/template/page/head.phtml
Line: 41

<script language="javascript" type="text/javascript">
window.onload = function() {
    
if(document.getElementById('page_content')){
        
if(document.getElementById('page_content').value == ''){
            document
.getElementById('page_content').value "<p>Page Content</p>";
        
}
    }
Repeat for: (Add by: sh1ny)
if(document.getElementById(’block_content’)){
if(document.getElementById(’description’)){
if(document.getElementById(’short_description’)){

Adding the Editor to Desired Locations in the Admin:
When updating these locations… remember to:
Remove any Javascript references to a Tiny MCE Javascript path.
Reasoning?
A) we have universal access, so this is redundant.
B) won’t work if using user_mod
C) hard coding links = bad


thanks colleagues
Sorry for my English so bad

 
Magento Community Magento Community
Magento Community
Magento Community
 
talofo
Member
 
Total Posts:  35
Joined:  2008-08-27
 

I can try this and applied but, this is a thread so populated that I’m wondering:
Magento Team, when will you truly allow a Advanced Html editor on your CMS and Product Pages?

Regards,
Talofo

 
Magento Community Magento Community