jonasdoebertin / kirby-visual-markdown Goto Github PK
View Code? Open in Web Editor NEWVisual Markdown Editor for Kirby CMS 2
License: GNU General Public License v3.0
Visual Markdown Editor for Kirby CMS 2
License: GNU General Public License v3.0
I can no longer paste anything in the textarea
, nor drag and drop text from another app or window, nothing is output.
I use an up-to-date kirby-visual-markdown, on the master branch.
Most versions of Safari don't allow keyboard input in fullscreen mode. Since it's pretty useless in this case, the fullscreen mode toolbar icon should be hidden in affected Safari versions.
Because of the (beautiful) padding of CodeMirror
it's more difficult to click into the textfield. Just make the whole thing clickable. Possible solution: instead of setting to the CodeMirror
the padding, set it to CodeMirror-scroll
- that works in my quick and dirty prototype in Safari. This doesn't work so well in the fullscreen mode but in the normal mode.
Adding required: true
to the markdown field is tricky right now: When there is text in the field, no problems occur. However, when the input is left blank - and this is where required
would become important - the field breaks the panel JS and prevents the page from being saved:
An invalid form control with name='' is not focusable. (index):1
An invalid form control with name='text' is not focusable. (index):1
Add a setting to the blueprints that allows to select which toolbar icons shall be displayed.
With Kirby 2.1.0, Visual Markdown does not seem to honour the Markdown mode e.g. no kirby tags?
Kirby 2.1.0 update notes:
"You can now set the panel to strict markdown mode by switching off kirbytext tag support in your config:
c::set('panel.kirbytext', false);"
I like the fullscreen so much. But on my 34" 21:9 display it looks a bit weird:
I wish to have something like iAWriter has:
I've tried to add a max-width to the CodeMirror window which looks now like this:
Maybe you have to add a class to the body on Fullscreen which gives it some extra CSS styles to the CodeMirror?
NOW! It works :) THX
See #24.
The style of the Kirbytext tag highlighting should probably be optimized.
As some of you already pointed out in the past, the name "markdown" as used in your blueprints with type: markdown
is a bit too generic.
With one of the next releases, I want to change this. However, I need your help with choosing the new name. So, here's a quick poll: What do you think should be used?
visualmarkdown
visualeditor
visualmarkdowneditor
Of course this change will require you to reinstall Visual Markdown Editor instead of simply updating your submodule. But as this will take only one or two minutes longer then usual, I think it is a reasonable change.
Hi Jonas,
i want to use your markdown but it does´t work. I have create a "field" folder in site, than
a "markdown" with the repository in it. And than as type "markdown" in my blueprint. Just see some shortcuts and the field is small with no nice text formatting. Any help??
Hi!
Maybe this is too much for you but I've found this very cool idea and solution for adding tables:
https://github.com/yabwe/medium-editor-tables
Maybe this helps you to add even more awesomeness to your field! :-)
I am currently testing the editor and stumbled over following issue:
Any unsaved changes in a markdown field show up again (and again) after reloading or closing and reopening of an entry page. Keep in mind that the entry did not get saved.
I made a little screencast.
Any ideas?
Bug: Can't write in fullscreen mode on pages with multiple markdown fields.
Version: 1.0, 1.0.1
Tested browsers: Safari (doesn't work except for making a paragraph by hitting enter...crazy (just in v. 1.0)), Chrome (works just in v. 1.0)
Possible solution: Maybe you have to set the cursor and focus right?
Based on this suggestion via Twitter, the keymaps should be changed to be actually useful.
How can i set Visual Markdown the default editor in the Panel when editing posts?
The instructions in the README didn't help me a lot.
I don't know which blueprint i have to edit.
Hope you can give me a short summary of steps! 😁
Hi,
on OS X the shortcut cmd
+A
usually selects all the text, but this doesn’t work in the markdown field, instead a link is created.
Can this be changed?
All seem to work quite well, very nice, so thank you.
In develop branch headings are a good addition, some sites may well want to use H1 and H2 headings in their content, but other may well want to specify (probably on a per template basis) to start at a lower level, for example H3 and H4 (having used H1 and H2 already in the site template).
Also maybe the option to turn individual items on/off?
Some extra spacing or margin might be nice ;-) (Firefox/Mac - ordinary release)
Example of margins
Just a thought.
In Firefox Mac, there is no ''right-click' spell checker when using this field, reverting to textarea the spell checker is back?
How do i link via panel and visual markdown editor an image thumbnail (generated by image tag) with full image (via link tag, i suppose?). Both images are loaded and visible in panel editor.
i try something like [ ![image_alt]
(image:url_thumbnail_image.jpg)
] (link:url_full_image.jpg)
it does not work.
This is an idea rather than an issue.
I thought about a toggle to display/hide the Markdown syntax. It would be a button in the toolbar, possibly to the right next to the fullscreen button, to avoid confusion with editing buttons.
The result would be a hybrid editor: if you want to type Markdown formatting you can ; if the syntax bugs you, just hide it and only use the toolbar buttons.
Fiddling in Dev Tools:
There a a number of issues with my quick test:
#
inside the title wrapper, but then the cursor is at the wrong place).cm-formatting {display: none}
. Same for HRs, and probably other elements, so we'd need to target more specific classes like .cm-header
.So far, I believe the toggle could be a matter of simply applying alternate styles. Perhaps just add a class to the CodeMirror wrapper.
I'm sorry I cannot provide more info on this, just me and my iPad and a poor network connection. When I try to save a page which contains the visual editor it just blanks and does not save. I can't see anything going on. If I try a page without the visual editor it saves as expected.
IPad is latest AIr 128mb' latest iOS.
Any ideas?
🐛 I'm running a Kirby 2.2 beta (based on the nighlty) site together with the kirby visual markdown plugin and it's not working. All I get is a two line textarea and the buttons as a bold title and shortcut.
It works fine for me when I use it with the latest stable version of Kirby.
I see there was someone else before me reporting this in issue #36.
If you have any idea where to start hunting the problem down I will have a look myself.
Update: I had a look at it real quick and it non of the assets are loaded anymore. I hardcoded them in and the field works. Looks like they are not picked up by the panel anymore. Resulting in the unstyled textarea. On top there are two missing files. The form.css and form.js are missing. I guess they would normally hold the custom field assets too.
Thank you.
Although I think this is a great way to ease some clients into using markdown, I'd love to see an option for hiding the markdown in the live preview. Unfortunately, many clients just don't want to have anything to do with even simple Markdown in their content.
The icing on the cake would be the ability to insert and align an image (with preview).
v1.1.0 looks good to me, it works with icons and without, headings look good, just a few of things :-)
toolbar: h3, h4, bold, italic, quote, link, image , bullet-list , num-list, hr
All good stuff, keep it up!
Tiny, tiny issue: I just noticed there is no tooltip on the italic
button, even though it has a translation string. Its link lacks the title="Italic"
property.
Tested on a fresh Starterkit with the latest release.
First of all: Great plugin! Thanks!
Second of all: If I can make some time I'll see if I can resolve this myself and post a pull-request.
The issue: When I use a heading and then press the other heading button, the # marks are not replaced but added, so I get something like this:
## ### Heading switched from h2 to h3
The VM custom fields don't seem to be appearing as they should in K2.2 panel, instead I'm getting a default single line text area?
They worked before the Kirby upgrade, on the off chance I tried the dev version of the plugin, but the same?
Any ideas?
When in fullscreen mode, you're unable to scroll when your content is longer then the available space.
We just upgraded to Kirby 2.2.2 and the markdown editor redirects back to the dashboard (or previous view) whenever you highlight some text and try to use any button in the editor (like bold or italicize). Clicking any button in the top button bar in the markdown editor redirects the browser back.
It would be nice for the fixed toolbar to work with the fixed position save button
This can do that, it basically just drops the toolbar below the main black Kirby one...
.markdownfield-wrapper .visualmarkdown-toolbar-fixed {
...
top: 3em;
...
Also I think I'd like my main text to stand out a little bit so I always change the font size to 1.45 or 1.5
.cm-s-visualmarkdown {
font: 1.45em/1.45 monospace;
....
I miss the e-mail link button in the toolbar. Please add it in the future.
Hi,
I've played a bit around with your awesome plugin and figured out how you could add a sticky header to it.
It's really rudimentary but this is my solution:
Add this to the init method of your markdown field:
var className = 'fixed',
$navigation = $('.visualmarkdown-toolbar'),
$content = $('.markdownfield-wrapper');
$(window).scroll(function() {
if ($(document).scrollTop() >= $content.offset().top) {
$navigation.addClass(className);
$content.css({
'padding-top': $navigation.height()
});
$navigation.css({
'max-width' : ($content.width())
})
}
else {
$navigation.removeClass(className);
$content.css({'padding-top': 0});
}
});
Add this to your visualmarkdown CSS:
.markdownfield-wrapper .visualmarkdown-toolbar.fixed {
position: fixed;
top: 0;
z-index: 999;
}
I haven't tried it with multiple markdown fields. But maybe this is helpful for you :-)
In the "Git submodule" section of your readme is a wrong URL for cloning.
git submodule add [email protected]:jonasdoebertin/kirby-visual-markdown.git site/fields/markdown
should be:
git submodule add https://github.com/JonasDoebertin/kirby-visual-markdown.git site/fields/markdown
because not everyone has access rights to your github account.
😐 No need for scroll position investigations if the editor isn't focused, right?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.