I tried using the commercial OK open source `` ProseMirror '' that can create a WYSIWYG rich text editor that can be collaboratively edited and runs on all browsers



An open source toolkit for building rich text editors on the web is ' ProseMirror '. It is a license that can be used commercially, and originally

in 2015, development started by collecting more than about 7.9 million yen in crowdfunding . The New York Times, Atlassian, asana, Box, and Evernote also support ongoing development. With a structure that allows collaborative editing , it is a highly functional toolkit that allows you to incorporate your own extensions in a plug -in format. Build, scan with linters to detect errors and allow users to fix them, add footnotes in content, keep track of changes so each user can look up changes here and undo them, etc. Web The functions required for application development can be flexibly added.

So, I actually 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.

Installing Node.js using a package manager | Node.js
https://nodejs.org/en/download/package-manager

In order to use Ubuntu this time, I installed Node.js with the following code.
[code]curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash - &&\
sudo apt-get install -y nodejs[/code]



Prepare a working directory with the code below.
[code]mkdir prosemirror
cd prosemirror
npm init -y[/code]



Since the repository is ready, go to the official page and click 'Examples'.



Various implementation examples are provided. This time I will try 'Basics' so click it.



It seems that using ProseMirror with only the core library requires quite a bit of code, so we have prepared a code using an example library called 'prosemirror-example-setup' so that you can easily try it.



Create a folder named 'src' in the repository you prepared earlier, and save the code on the ProseMirror site as 'index.js' in src.



Then install the required packages with the code below.
[code]npm install prosemirror-state prosemirror-view prosemirror-model prosemirror-schema-basic prosemirror-schema-list prosemirror-example-setup[/code]



Install webpack to convert it to code that can be used in browsers.
[code]npm install -D webpack webpack-cli[/code]



Save the code below with the name 'webpack.config.js'.
[code] const path = require('path');

module. exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
},
};[/code]



Open 'package.json' and enter 'build: 'webpack --mode development'' in the 'script' item.



Build with the command below. A folder named 'dist' will be generated, and the pre-built code should be placed inside with the name 'main.js'.
[code]npm run build[/code]



Create a file called 'index.html', copy the following content and save it. CSS is from the official site of prosemirror. The editor is placed in the div with 'id='editor'', and the contents of the div with 'id='content'' are reflected as the initial state.
[code]<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 Demo</h3>
<p>The text in the div block whose id is 'content' will be the initial state of the editor. </p>
<p><em>italic</em>, <strong>bold</strong>, <a href='https://gigazine.net/'>link</a>, <code>code block</code > etc. are available. </div>
<script src='./dist/main.js'></script>
</body>
</html>[/code]



When the HTML file is opened in a browser, it is displayed as shown below.



In addition, you can check the actual display at the bottom of the page where you copied the ProseMirror code without building it yourself, so you can quickly check what kind of editor you can create.



ProseMirror is a library that provides the necessary tools to build an editor, and in order to use various functions properly, you need to read the guide carefully and write the code yourself, but that much freedom It is expensive and it is possible to build an editor just as you want. There are also Japanese guides and collaborative editing implementation examples , so if you are interested, please check them out.

Related Posts:

in Review,   Software,   Web Application, Posted by log1d_ts