Editor add h1 - h3 and link

Questions
1

Hello,

how to add h1 - h3 and link button in the toolbar of the editor ?

greetings perry

2

Okay, I did it for you however I won’t PR it because I could not find fontawesome icons for H1, H2 and H3 and the solution I quickly gave it’s not very pretty:

image

But you can still use it!

You can check the changes I had to do on the javascript source codes on my branch:

These changes are on javascript source codes, that are compiled using the command make on kanboard source code folder. More info here: https://docs.kanboard.org/en/latest/developer_guide/assets.html

If you just want to apply to your minified javascript code, add the following code:

{href:"#",html:'<i class="fa fa-fw">H1</i>',click:function(){s("# ")}},{href:"#",html:'<i class="fa fa-fw">H2</i>',click:function(){s("## ")}},{href:"#",html:'<i class="fa fa-fw">H3</i>',click:function(){s("### ")}},

Just before the first { on this (search for ** on the file to find this place):

{href:"#",html:'<i class="fa fa-bold fa-fw"></i>',click:function(){d("**")}}

On your kanboard/assets/js/app.min.js file.

This place on the file should be like this:

{href:"#",html:'<i class="fa fa-fw">H1</i>',click:function(){s("# ")}},{href:"#",html:'<i class="fa fa-fw">H2</i>',click:function(){s("## ")}},{href:"#",html:'<i class="fa fa-fw">H3</i>',click:function(){s("### ")}},{href:"#",html:'<i class="fa fa-bold fa-fw"></i>',click:function(){d("**")}}
3

The solution to the link button was a little more complex to manually add to app.min.js.

I’ve created the pull request: https://github.com/kanboard/kanboard/pull/4250

There is a comment there explaining the proposed behavior: https://github.com/kanboard/kanboard/pull/4250#issuecomment-514472800

2 Likes
4

Thank you @rafaelcamargo !!

I do not know very well with git, I have to wait until the pull was accepted or?

5

For the link button you will have to wait until next release or, after the pull is accepted, you can build the latest kanboard version and update your installation. You will need npm for the make static command

git clone https://github.com/kanboard/kanboard.git
cd kanboard
# # this commands in comments are optional, it`s easier to add the H1,H2,H3 buttons this way
# # make the changes you see I did on my commit on the file assets/js/components/text-editor.js 
# #   (you dont need to edit the app.min.js, the step below will build it
# make static
# git commit -a -m "Add H1,H2,H3 buttons"
make archive

this will build a new kanboard-xxxx.zip file, that will contain the files you can put on your webserver.

You have to commit the chages because the make archive only makes an archive with commited changes. Of cource you will not be able to push those changes because it’s a clone of the kanboard repo. If you wish to have your own repository with this changes and update it with future kanboard updates, it’s possible, but I can’t teach you all that.

This H1 H2 H3 change is very small, if you don’t mind making them everytime you update kanboard, it’s not difficult.