A more complete example?

ThomasDaheim commented 7 years ago

I'm trying to switch to woofmark from tinymce (to also support markdown...)

Unfortunately, I find it hard to to do my customizing based on the examples I found so far (here and under public lab). Maybe I'm looking in the wrong place but I'm looking for things like:

place commands & modes above the text editor
place images inline as base64

So far I managed to beautify the commands and modes using the render feature and fontawesome - but that really was a lot (too much) trial and error...

Any help is appreciated!

bevacqua commented 6 years ago

Just use CSS. Here are the stylus styles I use, you should be able to turn this into something that works for you:

@import 'node_modules/woofmark/src/woofmark'

.wk-textarea
  margin-top 45px

.wk-switchboard
  display none

.wk-commands
  position absolute
  top -40px
  left 0
  right 0

.wk-command
  width 20%
  &:active
    col-outline(c-dark-gray)
  &:hover
    color c-pink

.wk-mode
  cursor pointer
  &:active
    col-outline(c-dark-gray)
  &:hover
    color c-pink

.wk-command-list-ul,
.wk-command-list-ol,
.wk-command-link,
.wk-command-picture-o
  display none

@media only screen and (min-width: 600px)
  .wk-command
    width inherit
  .wk-command-list-ul,
  .wk-command-list-ol,
  .wk-command-link,
  .wk-command-picture-o
    display inline-block

.wk-container-dragging
  background-color c-yellow-highlight
  color c-purple
  padding-top 40px
  f-use-subheading()

.wk-prompt
  background c-light-gray
  color c-black-text
  z-index z-prompt

.wk-prompt-title
  margin 0

.wk-prompt-description
  margin 10px 0

.wk-prompt-input
  background-color darken(c-purple, 10%)
  color c-white
  placeholders(c-light)

  &:focus
    background-color c-purple

.wk-prompt-buttons
  f-use-subheading()

.wk-prompt-ok
  background-color c-purple
  color c-white

  &:hover
    background-color lighten(c-purple, 10%)

.wk-prompt-cancel:hover
  padding-bottom 3px
  border-bottom 1px solid c-purple

.wk-prompt-upload
  cursor pointer
  display inline-block
  vertical-align top
  text-align center
  background-color lighten(c-purple, 10%)
  color c-white
  padding 10px
  width 95px

  &:hover
    background-color lighten(c-purple, 15%)

.wk-prompt-upload-area .wk-prompt-drop-icon
  display none

.wk-prompt-upload-dragging
  padding-top 60px
  background-color lighten(c-purple, 10%)
  color c-white
  f-use-subheading()

  .wk-prompt-drop-icon
    display block

.wk-prompt-uploading
  position absolute
  top 0
  left 0
  right 0
  bottom 0
  background-color lighten(c-purple, 10%)
  color c-white
  text-align center
  padding 140px 0
  font-size 24px
  f-use-subheading()

.wk-prompt-browse
  font-weight normal

.wk-prompt-input-container-uploads
  display inline-block
  margin-left -95px
  padding-left 95px
  width 100%

.wk-drop-text
  display block

.wk-prompt .wk-drop-icon,
.wk-container-drop .wk-drop-icon
  font-size 160px
  margin 20px 0

ThomasDaheim commented 6 years ago

Thanks for the answer!

Unfortunately, I fail to see how the css would help me with things like "place images inline as base64"?

bevacqua commented 6 years ago

Not sure what you mean by that specifically but you can use inlined base64 background images for icons, unless I'm misunderstanding your question

bevacqua / woofmark

A more complete example? #55