Getting Started

Hi There

I am looking to get started with ProseMirror but am getting nothing happening no matter which instructions I follow. There seems to be some difference between the Manual, the demo and the readme on github which I guess is due to the fast moving nature of the project. Non of the methods do anything for me.

I notice that the Javascript appears to add some CSS to the head but the <div> that is supposed to have the editor appended to it remains empty. Am I missing something or is there a more up-to-date manual?

Thanks in advance

Matt

If you’re making a call to ProseMirror, you’re either getting an error message in your dev console that might help, or you forgot to specify a place option, and that’s why the editor isn’t being inserted into the document.

No comprehensive docs yet, sorry. I’m working on the code first.

Hi Thanks for the reply

That’s what is so odd, I get nothing in the console. I’m sure i’m missing something obvious. I’m compiling with browserify.

<div id="content">
		<h1>Test</h1>
			<p>test</p>
		</div>
<div id=editor></div>

Then the script is:

import {ProseMirror} from “…/node_modules/prosemirror/dist/edit” import “…/node_modules/prosemirror/dist/inputrules/autoinput” import “…/node_modules/prosemirror/dist/menu/inlinemenu” import “…/node_modules/prosemirror/dist/menu/buttonmenu” import “…/node_modules/prosemirror/dist/menu/menubar”

let place = document.querySelector(“#editor”);

let pm = window.pm = new ProseMirror({ place: place, autoInput: true, doc: document.querySelector(“#content”), docFormat: “dom” })

setMenuStyle(place.getAttribute(“menustyle”) || “bar”)

function setMenuStyle(type) { if (type == “bar”) { pm.setOption(“menuBar”, {float: true}) pm.setOption(“inlineMenu”, false) pm.setOption(“buttonMenu”, false) } else { pm.setOption(“menuBar”, false) pm.setOption(“inlineMenu”, true) pm.setOption(“buttonMenu”, {followCursor: true}) } }

let menuStyle = document.querySelector(“#menustyle”) if (menuStyle) menuStyle.addEventListener(“change”, () => setMenuStyle(menuStyle.value))

So debug it. Do you get a window.pm in your page? What happens if you console.log stuff at various points in the program?

Did you load JQuery in your index.html? If not change all:

- let place = document.querySelector("#editor");
+ let place = document.getElementById("editor");