An open source toolkit for creating rich text editors for the webprose mirror“is. It is licensed for commercial use in originalAbout 7.9 million yen in crowdfunding in 2015The development started by raising more than one amount of money. The New York Times, Atlassian, Asana, Box, and Evernote support continuous development.Collaborative editing is possibleThanks to its simple structure, it is a very functional toolkit that allows you to integrate your own extensions in the form of plugins.Switch between Markdown and WYSIWYM format、Hintbeginning of somethingDownload the image、original listbuildinglinterIn content that can be scanned for errors and allow users to fix themmarginAdd,Track changesIt is now possible to flexibly add functionality required for developing web applications, such as allowing each user to check and undo changes here.
So, I already built it and checked how to use it.
prose mirror
https://prosemirror.net/
Node.js must be installed to use ProseMirror. From the URL below, select the installation method that matches your environment.
Install Node.js using package manager | Node. js
https://nodejs.org/ja/download/package-manager
In order to use Ubuntu this time, I installed Node.js with the following code.
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash - &&\
sudo apt-get install -y nodejs
Prepare a working directory with the code below.
mkdir prosemirror
cd prosemirror
npm init -y
Now that the repository is ready, go to the official page and click on “Examples”.
Various implementation examples are provided. This time I’ll try the “basics” so click on it.
Using ProseMirror with only the core library seems to require quite a bit of code, so we prepared code using a sample library called “prosemirror-example-setup” so that you can easily try it out.
Create a folder named “src” in the repository you made earlier, and save the code on ProseMirror as “index.js” in src.
Then install the required packages with the code below.
npm install prosemirror-state prosemirror-view prosemirror-model prosemirror-schema-basic prosemirror-schema-list prosemirror-example-setup
Install the webpack to convert it into code that can be used in browsers.
npm install -D webpack webpack-cli
Save the code below with the name “webpack.config.js”.
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
},
};
Open “package.json” and insert “build: “webpack –mode development”” in the “script” element.
Build using the following command. A folder named “dist” will be created, and the pre-made code must be placed with the name “main.js”.
npm run build
Create a file named “index.html”, copy the following content and save it. CSS from prosemirror’s official website. The editor is placed in a div with “id=”editor””, and the contents of the div are reflected with “id=”content”” as initial state.
<html>
<head>
<link rel="stylesheet" href="https://prosemirror.net/css/editor.css" />
</head>
<body>
<div id="editor"></div>
<div id="content" style="display:none;">
<h3>ProseMirrorのデモ</h3>
<p>idが「content」のdivブロック内の文章がエディターの初期状態になります。</p>
<p><em>斜体</em>, <strong>太字</strong>, <a href="https://gigazine.net/">リンク</a>, <code>コードブロック</code>などが利用可能です。</div>
<script src="./dist/main.js"></script>
</body>
</html>
When the HTML file is opened in the browser, it is displayed as shown below.
In addition, you can check the actual view at the bottom of the page where you copied the ProseMirror code without creating it yourself, so you can quickly check what kind of editor you can create.
ProseMirror is a library that provides the tools needed to create an editor and use the various functions properlyGuideYou need to read the code carefully and write it yourself, but you have a high degree of freedom and can create the editor you want.Japanese guideor,An example of collaborative editing implementationThere are others, so if you’re interested, check them out.
Copy the title and URL of this article
“Travel maven. Beer expert. Subtly charming alcohol fan. Internet junkie. Avid bacon scholar.”
More Stories
32GB + Ryzen7 ThinkPad E14 for 128,700 yen! An expensive but extraordinarily profitable blog |
In a fight between mantis shrimps, we discover a surprising defense method that puts boxers to shame! – Nazology
Press release of Shenzhen iMyFone Technology Co., Ltd