# Markdown 标题与编辑器

**URL:** https://meta.discourse.org/t/markdown-headings-and-the-composer/88526
**Category:** Feature
**Created:** [2018年五月27日 01:22 UTC](https://meta.discourse.org/t/markdown-headings-and-the-composer/88526 "2018-05-27T01:22:36Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![nsuchy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nsuchy/32/166530_2.png) [@nsuchy](https://meta.discourse.org/u/nsuchy)
#### Post date: [2018年五月27日 01:22 UTC](https://meta.discourse.org/t/markdown-headings-and-the-composer/88526/1 "2018-05-27T01:22:36Z")

</div>

At the moment the composer has a button for bold and italics, I think it’d be nice if we added an “H” button which had a dropdown to select the type (1,2,3,etc) for people who have never used markdown before and might still want to add a heading. Thoughts?

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2018年五月27日 02:24 UTC](https://meta.discourse.org/t/markdown-headings-and-the-composer/88526/2 "2018-05-27T02:24:59Z")

</div>

Unless you see it in GMail, that’s unlikely – it is quite uncommon to need headers in the wild.

For example here’s what GMail offers today:

 ![image](https://global.discourse-cdn.com/meta/original/3X/0/6/064c43f857203ffc8b955c0603f3955ad8177dc7.png)

---

<div class="post-metadata">

### Author: ![nsuchy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nsuchy/32/166530_2.png) [@nsuchy](https://meta.discourse.org/u/nsuchy)
#### Post date: [2018年五月27日 03:35 UTC](https://meta.discourse.org/t/markdown-headings-and-the-composer/88526/3 "2018-05-27T03:35:46Z")

</div>

My current community project is largely based on writing tutorials so headers are more common. Gmail has the whole " Tt" icon that achieves the same affect. Maybe try that?

 ![12%20PM](https://global.discourse-cdn.com/meta/original/3X/d/5/d5ee5f0393b00cde189f306d7d09c7bae8db2426.jpg)

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2018年五月27日 03:38 UTC](https://meta.discourse.org/t/markdown-headings-and-the-composer/88526/4 "2018-05-27T03:38:58Z")

</div>

No, we won’t be doing that. You could write a plugin to add it as a button if you like.

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [2018年五月27日 03:51 UTC](https://meta.discourse.org/t/markdown-headings-and-the-composer/88526/5 "2018-05-27T03:51:10Z")

</div>

I don’t know if it still works, but there already is a plugin by @Steven that does headings.

> [@Formatting toolbar](https://meta.discourse.org/t/formatting-toolbar/40649/28):
>
> I also added the underline button. The T button is the H (heading) button translated in french. The img button is usefull with the float one, because the copy/paste of a image link won’t work with it. If you want to hide some buttons, two solutions : Add some css on admin/customize with a display: none for the buttons you want to hide. Notice the .addimg\_ui\_button here, it indicates that the img button will be hidden : #reply-control .d-editor-button-bar .addimg\_ui\_button { displa…

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2018年五月28日 02:01 UTC](https://meta.discourse.org/t/markdown-headings-and-the-composer/88526/6 "2018-05-28T02:01:05Z")

</div>

> [@codinghorror](#):
>
> 如果你喜欢的话，可以写一个插件来把它添加为按钮。

在这种情况下，#Customization > Theme component 就足够了，不需要为此添加完整的插件。

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [2018年五月28日 02:37 UTC](https://meta.discourse.org/t/markdown-headings-and-the-composer/88526/7 "2018-05-28T02:37:22Z")

</div>

In the context of a theme, creating a separate popup menu for headings probably involves more work, but you can add heading buttons to the current options menu.

 ![headingButtons](https://global.discourse-cdn.com/meta/original/3X/8/9/89350564a59ff0e27bf4250173122fc4631f3e94.gif)

Try something like this (quickly put together)

```plaintext
<script type="text/discourse-plugin" version="0.8.18">
$(document).ready(function() {
  // edit the text of the buttons here
  I18n.translations.en.js.composer.headingOne = I18n.translations.en.js.headingOne =
    "Header 1";
  I18n.translations.en.js.composer.headingTwo = I18n.translations.en.js.headingTwo =
    "Header 2";
  I18n.translations.en.js.composer.headingThree = I18n.translations.en.js.headingThree =
    "Header 3";
  I18n.translations.en.js.composer.headingFour = I18n.translations.en.js.headingFour =
    "Header 4";
});

// no need to edit anything here
api.addToolbarPopupMenuOptionsCallback(() => {
  return {
    action: "headingOne",
    icon: "header",
    label: "headingOne"
  };
});
api.addToolbarPopupMenuOptionsCallback(() => {
  return {
    action: "headingTwo",
    icon: "header",
    label: "headingTwo"
  };
});
api.addToolbarPopupMenuOptionsCallback(() => {
  return {
    action: "headingThree",
    icon: "header",
    label: "headingThree"
  };
});
api.addToolbarPopupMenuOptionsCallback(() => {
  return {
    action: "headingFour",
    icon: "header",
    label: "headingFour"
  };
});

// no need to edit anything here
api.modifyClass("controller:composer", {
  actions: {
    headingOne() {
      this.get("toolbarEvent").applySurround("# ", " ", "headingOne");
    },
    headingTwo() {
      this.get("toolbarEvent").applySurround("## ", " ", "headingTwo");
    },
    headingThree() {
      this.get("toolbarEvent").applySurround("### ", " ", "headingThree");
    },
    headingFour() {
      this.get("toolbarEvent").applySurround("#### ", " ", "headingFour");
    }
  }
});
</script>

```

And use a little bit of CSS to change a few things:

```plaintext
.options .select-kit-collection {
    display: flex;
    flex-direction: column;
}

[data-value*="heading"] {
    order: -1;
}

#reply-control .fa-gear:before {
    content:"\f142";
}

```

And you’d be pretty close to what you wanted