logo
down
shadow

Wordpress tinymce dialog box Body Element & Attribute Formal Documentation


Wordpress tinymce dialog box Body Element & Attribute Formal Documentation

By : Alex ButEra
Date : November 20 2020, 11:01 PM
should help you out Although I didn't find any formal documentation to create a nice looking mce dialog box specifically, I did figure out how to format the dialog title and then embed an external html file that you can add a link tag to a css style sheet and the sky is the limit.
Here is the JavaScript code for the mce, it's up to you to create the external html and css files.
code :
(function($) {
    /**
    This tinymce plugin provides the editor button and the modal dialog used to embed. 
    */
    //  Extract data stored in the global namespace in tinymce-dev-starter.php.
    var passed_data = lgrriw_data;
    var php_version = passed_data.php_version;
    var valid_domains = passed_data.valid_domains;
    var dialogTitle = 'My Dialog Title';




    //  Define the TinyMCE plugin and setup the button.
    //  The last property in the first tinymce.create paramenter below must be the same
    //  as the plugin you defined in tinymce-dev-starter.php. In this case, it is
    //  lgrriw_plugin.  If we called it my_cool_plugin, the first parameter would change
    //  to 'tinymce.plugins.my_cool_plugin'.
    tinymce.create('tinymce.plugins.lgrriw_plugin', {
        init: function(editor, url) {
           /**
             * The editor parameter contains the TinyMCE editor instance.  The url
             * parameter contains the absolute url to the directory containing the
             * TinyMCE plugin file (this file's directory).
             *
             * We will be using editor to talk to the TinyMCE instance.  And we
             * will be using url to tell TinyMCE where files are (e.g. button
             * images).
             */
            //  Specify button properties and commands.
            //  The first parameter of editor.addButton must be the button ID
            //  given in tinymce-dev-starter.php. In this case, it is lgrriw_button.
            editor.addButton('lgrriw_button', {
                title: dialogTitle,   // Tooltip when hovering over button.
                image: url + '/../../assets/tinymce-button_32.png',    // The image for the button.
                cmd: 'lgrriw_command'                           // The editor command to execute on button click.
            });

            //  Define the "command" executed on button click.
            editor.addCommand('lgrriw_command', function() {
                editor.windowManager.open(
                    {
                        title: dialogTitle,   //    The title of the dialog window.
                        file:  url + '/../html/tinymce_dialog.html', //    The HTML file with the dialog contents links to css style sheet(s).
                        width: 810,                               //    The width of the dialog
                        height: 505,                              //    The height of the dialog
                        inline: 1                                 //    Whether to use modal dialog instead of separate browser window.
                    },

                    //  Parameters and arguments we want available to the window.
                    {
                        editor: editor,
                        jquery: $,
                        valid_domains: valid_domains
                    }
                );

                $('.mce-title').each(function(index,item){
                    // Iterate through the mce titles until you find
                    // the dialog for this dialog before formatting, otherwise
                    // the formatting will change the Wordpress
                    // Theme globally.  Be Careful!
                    if($(item).text() == dialogTitle){
                        // Format the dialog title using css
                        $(item).css('text-align', 'center');
                        $(item).css('color', '#336999');
                        $(item).css('background-color', '#add9ff');
                    }
                });
            });
        }
    });


    // Add the plugin to TinyMCE
    // Documentation: http://www.tinymce.com/wiki.php/api4:method.tinymce.AddOnManager.add
    tinymce.PluginManager.add('lgrriw_plugin', tinymce.plugins.lgrriw_plugin);
})(jQuery);


Share : facebook icon twitter icon
TinyMCE and JQuery dialog: TinyMCE read only when modal:true in the Dialog

TinyMCE and JQuery dialog: TinyMCE read only when modal:true in the Dialog


By : tpmainline
Date : March 29 2020, 07:55 AM
help you fix your problem I am using the TinyMCD plugin in the Dialog plugin. , Problem resolved, here is the full working code:
code :
function removeTinyMCE () {
    tinyMCE.execCommand('mceFocus', false, 'dialog-modal');
    tinyMCE.execCommand('mceRemoveControl', false, 'dialog-modal');
}

function addTinyMCE() {
    jQuery('#dialog-modal').tinymce({
        script_url: '/js/tiny_mce_3.2.7_jquery/jscripts/tiny_mce/tiny_mce.js',
        width: "800px",
        mode: "textarea",
        theme : "simple",
    });
}

function addAuto()
{
    $('#dialog-modal').dialog({
        autoOpen: true,
        modal: true,
        title: "Email Dialog",
        open: addTinyMCE,
        close: function() {
            removeTinyMCE();
            $(this).dialog('destroy');
        },
        buttons:  {
            'Cancel': function() {
                processAuthorsParagraph();
                removeTinyMCE();
                $(this).dialog('destroy');   
            }
        }
    });
}
<div style="display: none"; id="dialog-modal" title="Basic modal dialog" style="display: none" ></div> 
TinyMCE strips class attribute from iframe element

TinyMCE strips class attribute from iframe element


By : Hassan Fagieh
Date : March 29 2020, 07:55 AM
Any of those help Have you got the 'media' plugin enabled? I'm seeing a similar problem, and I wonder whether the media plugin is interfering with the normal operation of the editor on HTML elements. I tried creating a style_formats option to manipulate the iframe, but without any luck.
Can't add custom element in Text mode in TinyMCE editor in WordPress

Can't add custom element in Text mode in TinyMCE editor in WordPress


By : Kamran Khan
Date : March 29 2020, 07:55 AM
I wish did fix the issue. I guess in the textmode there is no real tinymce editor present, but just a normal textarea.
Wordpress: How to add Attribute to body

Wordpress: How to add Attribute to body


By : zhangzhang
Date : March 29 2020, 07:55 AM
I wish this helpful for you One way would be to:- Edit header.php And add those attributes to the body.
Alternative (without editing theme files) way would be to create a plugin which adds a js that adds those attributes to body. Something like this:-
code :
$("body").attr( { data-spy:"scroll", data-target:".navbar" } );
function wp_body_classes( $classes )
{
    $classes[] = '" spy="scroll" data-target=".navbar';

    return $classes;
}
add_filter( 'body_class','wp_body_classes', 999 );
How do I programatically close the tinymce dialog in wordpress?

How do I programatically close the tinymce dialog in wordpress?


By : Armin77
Date : March 29 2020, 07:55 AM
Hope this helps If I type into the Javascript console: tinyMCEPopup.close(); , From within the popup, I call the following:
Related Posts Related Posts :
  • System Overview Diagram for Wordpress website?
  • Wordpress Website update take time to reflect
  • How Can I remove a particular product from an completed order in woocommerce?
  • How can i override function wp_insert_user() on Wordpress
  • Wordpress html5 input date time
  • Pagination for Custom Post Types using Shortcode not showing
  • Change stylesheet depend on time in Wordpress
  • How to add custom html in a genesis theme between entry-meta and entry-content
  • WordPress: how to display only certain post types on page?
  • Wordpress Permalinks in Nginx 404 error
  • I need to get all tags from woo commerce products in a page
  • Docker containers starts at different subtnets
  • VirtualHost sets the url as abc.com/subdirectory/
  • Fluid layout with fixed left and fluid right
  • How to possible number type input field in wordpress cmb2?
  • Allow Site Access Only Through Specific url
  • Recovering VVV after a host crash
  • Add specific words to WordPress custom type slug
  • Is it possible that Woocommerce category should not delete if it has product?
  • how to keep div closed to another div
  • Replace Add To Wishlist text with Heart icon WooCommerce
  • Make "default" page the parent page of a custom taxonomy archive page
  • WordPress Multisite: Activate / Deactivate a Plugin of a Specific Blog
  • fetch the field data without post
  • WooCommerce - Buy 10, get 3 free - only the cheapest 3 are free
  • shadow
    Privacy Policy - Terms - Contact Us © soohba.com