Using TinyMCE fiddle for node filter to add id attribute to anchors

Question

Using TinyMCE fiddle for node filter to add id attribute to anchors

C-Dog

2022年4月10日 23:05

I'd like to edit the code of the anchor-maker in TineMCE so it will paste into the code the following line: a name="#ANCHOR" id="#ANCHOR" instead of: a name="#ANCHOR" Where do I find a proper file with settings for this stuff?

This is my code:

script type="text/javascript"
tinyMCE.init({
        // General options
        mode : "textareas",
        theme : "advanced",
        plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager",

        // Theme options
        theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
        theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,
    width: "100%",
    height: "400",
    init_instance_callback: function(ed) {
      ed.serializer.addNodeFilter('a', function(nodes) {
        tinymce.each(nodes, function(node) {
            node.attr('id', node.attr('name'));
        });
      });
    }
});
/script

form method="post" action="dump.php"
        textarea name="content"/textarea
/form

I think I'm using TincyMCE Advanced version 3.5.8.

All I see in the entire source code of the "Edit Post" page on the latest version of WordPress, is tinyMCEPreInit stuff... and I tried appending what's in the fiddle to the array:

    init_instance_callback: function(ed) {
     ed.serializer.addNodeFilter('a', function(nodes) {
       tinymce.each(nodes, function(node) {
           node.attr('id', node.attr('name'));
        });
      });
    }

Topic tinymce Wordpress

Category Web

josh · Accepted Answer · 2013年10月16日 21:08

Unfortunately, there is not an addon (plugin) of the WP tinymce which provides the anchor functionality. Instead, it is part of the tiny_mce.js file WP uses in it's 'includes' directory.

That file is a monster... but if you unminify it.. you will notice two instances where the anchor element is defined.

One looks like this (around line 544 unminified):

if (b.anchor) {
    f += "#" + b.anchor
}
return f

And the other, like this (around line 659 unminified):

if (b.anchor) {
        c += "#" + b.anchor
    }
    b.source = c

I'm not sure the effect of changing these two to include the id attribute.. but I'm sure you will figure it out ;)

Tinymce Advanced doesn't have anything to do with it except telling the main WP js file to include that button (and it's functionality).

As far as a filter to modify the anchor element from WP... I haven't seen one in my experience.

Using TinyMCE fiddle for node filter to add id attribute to anchors

About