June 13, 2024


Technology/Tech News – Get all the latest news on Technology, Gadgets with reviews, prices, features, highlights and specificatio

I Tried Using Open Source Commercial “ProseMirror” To Create A Collaboratively Editable WYSIWYG Rich Text Editor That Runs On All Browsers – GIGAZINE

I Tried Using Open Source Commercial “ProseMirror” To Create A Collaboratively Editable WYSIWYG Rich Text Editor That Runs On All Browsers – GIGAZINE

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 formatHintbeginning of somethingDownload the imageoriginal 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

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

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.

See also  Explosion of the action of the comet Leonard

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.

    <link rel="stylesheet" href="https://prosemirror.net/css/editor.css" />
    <div id="editor"></div>
    <div id="content" style="display:none;">
      <p><em>斜体</em>, <strong>太字</strong>, <a href="https://gigazine.net/">リンク</a>, <code>コードブロック</code>などが利用可能です。</div>
    <script src="./dist/main.js"></script>

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.

See also  Spectacular and tragic at the same time - Google Earth offers 40 years of rapid evolution of the world

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