Why does this code change in text editor each time on save? [closed]

Question

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>

Answer 1

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   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   we can set settings.forced_root_block = false; in the tiny_mce config and then to stop the need for   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/