0

I've developed a plugin that inserts shortcode, now I want to reverse the process. I've got it to find and replace the shortcode with an image. I've got it so when you hover over the image it puts an overlay with links to open an editor window to edit,etc... which only works onload (it breaks toggling between Visual and Text and back) it doesn't add the overlay.

I'm using

   editor.on( 'BeforeSetContent', function(event) {
         event.content = replaceShortcodes(event.content);
         generateOverlay(editor)
   });

    editor.on( 'PostProcess', function(event) {
         if (event.get) {
            event.content = restoreShortcodes(event.content);
         }
    });

I'm using JQuery to generate the hover over overlay(unless anyone has another way) using

function generateOverlay(editor){
        //event.preventDefault();
        if(!$("#content_ifr").contents().find('.wp-ip-image').parent().hasClass("wp-ip-container")){
            $("#content_ifr").contents().find('.wp-ip-image').parent().wrap('<div class="wp-ip-container" data-mce-bogus="1" contenteditabl="false"></div>')
        }
var wp_ip_img = $("#content_ifr").contents().find('.wp-ip-image')

            wp_ip_img.hover(
                        function(){
                            post_id = $(this).data('post-id');
                            blog_id = $(this).data('blog-id');

                            $(this).css('cursor', 'pointer');
                            $(this).before('<div id="wp-ip-div-'+blog_id+'-'+post_id+'" class="wp-ip-overlay"></div>')
                            $(this).parent().find("#wp-ip-div-"+blog_id+"-"+post_id).hover(
                                function(){

                                $(this).css('cursor', 'pointer');
                                $(this).html(getPostData(post_id,blog_id))
                                $(this).find('.wp-preview-ip').unbind().click(function(e){

                                    postContent(editor,$(this).data('url'));
                                });
                                $(this).find('.wp-remove-ip').unbind().click(function(e){
                                    $("#content_ifr").contents().find("#wp-ip-div-"+blog_id+"-"+post_id).parent().remove()
                                });
                                $(this).find('.wp-edit-ip').unbind().click(function(e){
                                    insertPosts(editor,blog_id,post_id,wp_ip_img.data('wp-insert-post'))
                                });

                                },
                                function(){
                                    $(this).remove()
                                    $(this).css('cursor', 'default');
                                }
                            );              
                        },
                        function(){
                            $(this).css('cursor', 'default');
                        }
            );

    }`

when I toggle to Visual it replaces the shortcode then runs generateOverlay(editor) it gets to wp_ip_img.hover(... and doesnt run beyond even though it can find wp_ip_img

if anyone has any ideas

  • This looks like you're recreating the functionality of blocks, have you considered using the block editor and creating your own block? – Tom J Nowell Feb 11 at 23:55
  • At the moment we are not using Gutenberg, that's phase 2! I've got a lot of users editing the sites, so I cant just change it over – ajl80 Feb 12 at 8:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.