Visual Editor Content Styling

  • sultrain

    (@sultrain)


    11 years, 3 months ago

    I am adding a snippet in the section “Visual Editor Content Styling” in the CSS section and my understanding is that this snippet should appear in the Visual editing interface in place of the “Button Content” (single block)

    I have tried a number of CSS types, even as simple as:
    <div id="shnad2" style="text-align: center; width: 100%; background-color: yellow;">ad1</div>

    I have tried using SPANs and even coping in the code displayed by the default MORE button:
    <img class="wp-more-tag mce-wp-more" title="Read more..." src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" data-wp-more="more" data-wp-more-text="" data-mce-resize="false" data-mce-placeholder="1" data-mce-src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

    The result is that nothing appears in the Visual editor view (or when viewing the F12 view elements view in the chrome (all I see is the Button Content)

    I have tried using different things in the Button Content section as well:
    <!–shnad1–>
    and
    [display-posts category=”category name here” posts_per_page=”1″/]

    Still nothing has worked.

    Please assist.

    https://ww.wp.xz.cn/plugins/visual-editor-custom-buttons/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter sultrain

    (@sultrain)

    11 years, 3 months ago

    Additional info:

    When reviewing the /plugins/visual-editor-customer/buttons/js/button-1-1.js that was created for my new button, the code does not appear to include any reference to the CSS that was set in the Edit Button interface.

    Should the CSS appear somewhere in this JS file ?

    (function() {
    tinymce.create('tinymce.plugins.vecb_button1', {
        init : function(ed, url) {
            ed.addButton('vecb_button1', {
                title : 'SHNAD1',image : 'http://www.skirtcollective.com/wp-content/uploads/vecb/ad-btn-1.png',onclick : function() {
                     ed.selection.setContent('<!--shnad1-->');
                }
            });
        },
        createControl : function(n, cm) {
            return null;
        },
    });
    tinymce.PluginManager.add('vecb_button1', tinymce.plugins.vecb_button1);
})();
    Thread Starter sultrain

    (@sultrain)

    11 years, 3 months ago

    I see the styling_content in the wp_postmeta table and it contains the expected CSS code in the meta_value field.

    Plugin Author cyberduck

    (@cyberduck)

    11 years, 2 months ago

    In the section “Visual Editor Content Styling” you should only add pure css like this:

    #shnad2 {
    text-align:center;
    width:100%;
    }

    The hatm should be placed in the “Button content area like:

    Before:

    <div id=”shnad2″>

    After:

    </div>

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Visual Editor Content Styling’ is closed to new replies.