1

i want to create a footer block for Follow Us

But each time i save the block i lose the code that is between span... tried different ways but no luck...

anyone know how to do this?

<a class="icon social-icon facebook" href="" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
<a class="icon social-icon instagram" href="" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-instagram fa-stack-1x fa-inverse"></i>
</span>
</a>
  • 4
    html code and css design code.... – Amit Bera Nov 15 '14 at 14:56
  • I created block in cms > static blocks – carlo Nov 15 '14 at 15:06
  • Can you also add what it is changed to, the wysiwyg editor probably removes what are really empty html tags. – James Anelay - TheExtensionLab Nov 15 '14 at 15:09
  • all that you see above gets lost – carlo Nov 15 '14 at 15:32
  • I got it working bij inserting &nbsp; – carlo Nov 15 '14 at 15:47
3

So my understanding is that if a html element is essentially empty like these are (even though they have classes) then the tinymce witll strip out these tags. Sticking &nbsp; in each html node will stop this, however it will be wrapped in a <p> tag which may mess your code/design up a little.

To stop the <p> tag wrapping around the code when using &nbsp; we can set settings.forced_root_block = false; in the tiny_mce config and then to stop the need for &nbsp; we can add a couple of elements to the tiny_mce valid_elements setting like settings.extended_valid_elements = '+div[*],+a[*],+span[*],+i[*]';. With these 2 settings the tiny_mce will keep your code. (Allthough it does put it on one line which is annoying anybody else know how to stop that?)

But since we shouldn't just edit the core magento js file directly I would setup a small extension to add a new js file to the admin side of your site.

The important bit the js override. js/namespace/adminhtml/wysiwyg/tiny_mce/setup-override.js note there are a couple of extra setting here that I have commented out as they are not relavant to this particular question but it may also be a good idea to leave those in probably better explained here : http://www.pixafy.com/blog/2013/06/overcoming-magentos-wysiwyg-part-2-customizing-tinymce-settings/

if(window.tinyMceWysiwygSetup)
{
    tinyMceWysiwygSetup.prototype.originalGetSettings = tinyMceWysiwygSetup.prototype.getSettings;
    tinyMceWysiwygSetup.prototype.getSettings = function(mode)
    {

    var settings = this.originalGetSettings(mode);
    //add any extra settings you'd like below

    //makes "placeholder" a valid element for inputs
    settings.extended_valid_elements = '+div[*],+a[*],+span[*],+i[*]';
    //settings.valid_children = 'a[h1|h2|h3|h4|h5|h6|p|span|div|img]';
    //settings.force_br_newlines = true;
    //settings.force_p_newlines = false;
    settings.forced_root_block = false;
    return settings;

    }
}

Config.xml to add a layout.xml file

app/code/local/Namespace/Tinymce/etc/config.xml

<?xml version="1.0" ?>
<config>
    <modules>
        <Namespace_Tinymce>
            <version>0.1.0</version>
        </Namespace_Tinymce>
    </modules>

    <adminhtml>
        <layout>
            <updates>
                <namespace_tinymce>
                    <file>namespace/tinymce.xml</file>
                </namespace_tinymce>
            </updates>
        </layout>
    </adminhtml>
</config>

layout file to add the js app/design/adminhtml/default/default/layout/namespace/tinymce.xml

<?xml version="1.0"?>
<layout>
    <default>
        <reference name="head">
            <action method="addJs"><script>namespace/adminhtml/wysiwyg/tiny_mce/se

    tup-override.js</script></action>
        </reference>
    </default>
</layout>

and ofcourse the module initalization file

<?xml version="1.0" ?>
<config>
    <modules>
        <Namespace_Tinymce>
            <active>true</active>
            <codePool>local</codePool>
        </Namespace_Tinymce>
    </modules>
</config>

src : http://alanstorm.com/magento_html5_tinymce

and : http://www.pixafy.com/blog/2013/06/overcoming-magentos-wysiwyg-part-2-customizing-tinymce-settings/

  • nice going... i will try it out – carlo Nov 15 '14 at 17:34

Not the answer you're looking for? Browse other questions tagged or ask your own question.