A more complete example?
ThomasDaheim opened this issue · 3 comments
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!
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
Thanks for the answer!
Unfortunately, I fail to see how the css would help me with things like "place images inline as base64"?
Not sure what you mean by that specifically but you can use inlined base64 background images for icons, unless I'm misunderstanding your question