# WYSIWYG Editor Option

**URL:** <https://discourse.getcockpit.com/t/wysiwyg-editor-option/1335>\
**Category:** Support\
**Created:** [April 7, 2020, 5:44pm UTC](https://discourse.getcockpit.com/t/wysiwyg-editor-option/1335 "2020-04-07T17:44:42Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![fschuermeyer](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/fschuermeyer/32/216_2.png) [@fschuermeyer](https://discourse.getcockpit.com/u/fschuermeyer)\
**Post date:** [April 7, 2020, 5:44pm UTC](https://discourse.getcockpit.com/t/wysiwyg-editor-option/1335/1 "2020-04-07T17:44:42Z")

</div>

Hello,

it’s Possible to Add Costum Buttons Over the Editors Options? Or is Better to Create a Costum Field?

Thanks

---

<div class="post-metadata">

**Author:** ![raffaelj](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/raffaelj/32/331_2.png) [@raffaelj](https://discourse.getcockpit.com/u/raffaelj)\
**Post date:** [April 10, 2020, 12:59pm UTC](https://discourse.getcockpit.com/t/wysiwyg-editor-option/1335/2 "2020-04-10T12:59:05Z")

</div>

You could write your own tinymce plugin and add it to the wysiwyg editor. What’s your goal?

---

<div class="post-metadata">

**Author:** ![fschuermeyer](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/fschuermeyer/32/216_2.png) [@fschuermeyer](https://discourse.getcockpit.com/u/fschuermeyer)\
**Post date:** [April 10, 2020, 1:31pm UTC](https://discourse.getcockpit.com/t/wysiwyg-editor-option/1335/3 "2020-04-10T13:31:22Z")

</div>

My Goal is to Have new Buttons in Tinymce and Later in the Markdown Editor. I have write in my Frontend a little Application that can parse Shortcodes (like Wordpress) to HTML. But i Need this Button in the Backend or Some Menu Item to list the Possible Shortcodes in the Editors from Cockpit CMS. I can’t remember the Commplet Shortcodes and it’s fast to use this.

---

<div class="post-metadata">

**Author:** ![raffaelj](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/raffaelj/32/331_2.png) [@raffaelj](https://discourse.getcockpit.com/u/raffaelj)\
**Post date:** [April 10, 2020, 9:10pm UTC](https://discourse.getcockpit.com/t/wysiwyg-editor-option/1335/4 "2020-04-10T21:10:55Z")

</div>

I wrote a TinyMCE plugin for my CpMultiplane frontend to use a custom image button and a custom image route and another one for my VideoLinkField addon. Maybe it is helpful to get the basic structure.

> <https://github.com/raffaelj/cockpit_CpMultiplaneGUI/blob/master/assets/getImage.js>

> <https://github.com/raffaelj/cockpit_VideoLinkField/blob/master/assets/field-videolink.tag#L204>

And some resources:

> **[TinyMCE | Create a Custom Toolbar Button](https://www.tiny.cloud/docs-4x/advanced/creating-a-custom-button/)**
>
> This example shows you how to add a custom button to the toolbar.

> **[TinyMCE | Create Custom Dialogs](https://www.tiny.cloud/docs-4x/advanced/creating-custom-dialogs/)**
>
> Learn how to make custom dialogs with WindowManager.

---

<div class="post-metadata">

**Author:** ![fschuermeyer](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/fschuermeyer/32/216_2.png) [@fschuermeyer](https://discourse.getcockpit.com/u/fschuermeyer)\
**Post date:** [April 11, 2020, 5:30am UTC](https://discourse.getcockpit.com/t/wysiwyg-editor-option/1335/5 "2020-04-11T05:30:25Z")

</div>

Thanks for your Help - your Answers Help me often. 🙂

---

<div class="post-metadata">

**Author:** ![fschuermeyer](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/fschuermeyer/32/216_2.png) [@fschuermeyer](https://discourse.getcockpit.com/u/fschuermeyer)\
**Post date:** [April 11, 2020, 9:04am UTC](https://discourse.getcockpit.com/t/wysiwyg-editor-option/1335/6 "2020-04-11T09:04:58Z")

</div>

![image](https://canada1.discourse-cdn.com/flex030/uploads/getcockpit/original/1X/72f1945f1a010f247554bfeec030cb29332e1d8c.png) Thats the Result for the TinyMce. Thanks!

Have you a Idea for the Markdown Editor? - This is not TinyMce @raffaelj

---

<div class="post-metadata">

**Author:** ![raffaelj](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/raffaelj/32/331_2.png) [@raffaelj](https://discourse.getcockpit.com/u/raffaelj)\
**Post date:** [April 11, 2020, 4:25pm UTC](https://discourse.getcockpit.com/t/wysiwyg-editor-option/1335/7 "2020-04-11T16:25:18Z")

</div>

Nice. Do you plan to publish your code when you finished it?

Writing my existent wysiwyg plugins for the markdown editor is on my to do list, but after spending multiple days on trying to understand tinymce, I didn’t want to touch that anymore.

But I did some research in the past: The markdown field inherits the html field, which uses codemirror. Have a look at how the collection link and the assets are implemented:

> <https://github.com/agentejo/cockpit/blob/next/modules/Collections/assets/link-collectionitem.js#L78>

> <https://github.com/agentejo/cockpit/blob/next/modules/Cockpit/assets/components/field-html.tag#L35>

> <https://github.com/agentejo/cockpit/blob/next/modules/Cockpit/assets/cockpit.js#L36>