Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

Adding custom buttons to the editor


Recommended Posts

  • Owner

I wanted to add some comments in my book and I looked into how to add just a few blocks into the editor. It required some edits and I figured I should give it a go. Then I realized that there is a very simple way to do this by just adding a few buttons!

If you go to Customization -> Editor -> Toolbars then you can click on the add button in the top right corner. This will allow you to add a custom button that you can then add to the editor. Once you click you will see an upload field, but there is another tab that say Custom. When you click on that you will get a form to fill out.

Screenshot 2020-12-14 at 10.11.43.png

ย 

As you can see I just created a div with a class and then I put the content inside that div. I then created some css that I have on the pages where I want this to show up.

As you can see there is a tab called permission as well here and if you click there, then you can configure when the button should show up, as in what content it is connected to. For me, I selected just my book database. Then you can configure what user groups it should show up for and you are done!

Just drag the button to the editor and enjoy your new editor function ๐Ÿ™‚

Screenshot 2020-12-14 at 10.00.30.png

Link to post
Share on other sites
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

Of course ๐Ÿ™‚ /* ----------------- Editor styles: Note Blocks ----------------- */ .jwse_note, .jwse_info, .jwse_warning{ border-radius: 3px; padding: 5px; padding-left: 45px; backg

Thanks for your help. I was able to add this to my forum. I changed the icon and background color, and adjusted the css, it all works great. Thanks again!

Glad it worked for you ๐Ÿ™‚ Sharing is what this community is all about ๐Ÿ™‚

Posted Images

  • Owner
3 minutes ago, SC36DC said:

This is a very helpful tip. Any chance you could share the css you used. I would love to implement this on my forum.

Many thanks!

Of course ๐Ÿ™‚

/* ----------------- Editor styles: Note Blocks ----------------- */

.jwse_note,
.jwse_info,
.jwse_warning{
    border-radius: 3px;
    padding: 5px;
    padding-left: 45px;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 15px 17px;
    line-height: 120%;
}

.jwse_note{
    background-color: #DAE1FF;
    background-image: url({media="525"});
}

.jwse_info{
    background-color: #DEEBFF;
    background-image: url({media="527"});
  	background-position: 15px 19px;
}

.jwse_warning{
    background-color: #FFFAE6;
    background-image: url({media="526"});
}

ย 

  • Like 1
Link to post
Share on other sites
  • Owner
1 hour ago, SC36DC said:

Thanks for your help. I was able to add this to my forum. I changed the icon and background color, and adjusted the css, it all works great. Thanks again!

Glad it worked for you ๐Ÿ™‚

Sharing is what this community is all about ๐Ÿ™‚

  • Love 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...