Extending Pimcore Admin fields (WYSIWYG Field)

If you struggle to figure out how to add a custom HTML attribute to Pimcore's default WYSIWYG component, this tutorial will teach you everything you need to know.

Where to use

You might find yourself in a situation where you need to differentiate WYSIWYG components by a custom HTML attribute to get that exact component via Ext-js query selector. You can find the step-by-step solution below if you need help figuring out the right way to do it. 

Solution

In this case, we want to extend the WYSIWYG component's logic, so we need to find where its definition is. It is located in: 

vendor/pimcore/pimcore/bundles/AdminBundle/Resources/public/js/pimcore/object/tags/wysiwyg.js

Now, we need to create our own js file and make sure Pimcore reads and executes it when loading. We will do that by following the official documentation guide here. 

As it is shown there, we need to do two things. 

The first step is to add this to your configuration YAML (the first code block in the link above):

This one also assumes you will need to include your custom CSS styling. You can remove that line if you don't need it.

The second step is to create your event listener like it is shown in the documentation (the second code block in the link above):

Again, you can remove that part if you don't need CSS files. Also, instead of the file path shown in the documentation, let's put our js file inside /static/js/Extensions/ and call it wysiwyg-extend.js.

That means we will have the following:

Now we are ready to finally write some code. As you can see in the original wysiwyg.js file inside the Pimcore vendor — that component is registered as pimcore.object.tags.wysiwyg. 

In order to extend it with our own code, we will use the .addMethods() method. We don't really need to add a new method, it is enough just to overwrite an old one, and as you can see in the original wysiwyg.js from the vendor, the method in which the component is actually created is called getLayout().

That means we will start by copying that whole method to our js file and then add the attributes we need:

What we added specifically are two things. One is the name attribute of the var pConf object, and the other one is the afterrender() listener that will set that name to the component's html after it has been rendered. 

In case you are wondering what the name is, it is this.fieldConfig.name, which gets the value from the name field inside the Pimcore class for that object.

Does it work?

To test it, we can simply create a document with WYSIWYG in it and inspect the html. You should be able to see your attribute on that component; in this case, name=" testName".

Do you have more questions or issues while implementing this? Reach out to us; we'll be glad to help!