Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to achieve markdown editor effect" related knowledge, editor through the actual case to show you the operation process, the operation method is simple and fast, practical, I hope that this "how to achieve markdown editor effect" article can help you solve the problem.

One: download Editor.md

1: go to the official website and download directly

2: download using npm

Npm install editor.md

Second: the simple use of Editor.md

1: premise:

Introduction of css

Introduce js:

2:html+js to achieve markdown effect

(function () {var editor = editormd ("test-editor", {width: "100%", / / width, left empty: 100% height: "500px", / / height Theme: "dark", / / theme, default theme path: "editormd/lib/", / / lib directory address of the editor.md plug-in saveHTMLToTextarea: true, / / Save HTML to Textarea toolbarAutoFixed:true, / / enable and disable automatic fixed positioning of the toolbar}) })

According to the above code, you can achieve the markdown editor effect.

However, there is no local upload image function in the above code. If you need the local upload image function, the js code is modified as follows:

(function () {var editor = editormd ("test-editor", {width: "100%", / / width, left empty: 100% height: "500px", / / height Do not enter 100% theme: "dark", / / theme, or default theme path: "editormd/lib/", / / lib directory address of the editor.md plug-in saveHTMLToTextarea: true, / / Save HTML to Textarea toolbarAutoFixed:true, / / enable and disable imageUpload: true for automatic fixed positioning of the toolbar / / run local upload imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"], / / allowed file format imageUploadURL: "/ index.php?r=markdown/upload" / / backend server path}) });

The simple implementation of the backend upload is as follows (here I use the intervention/image plug-in of the Yii framework)

Yii::$app- > response- > format = Response::FORMAT_JSON;$upload = InterventionImageImageManagerStatic::make ($_ FILES ['editormd-image-file'] [' tmp_name'])-> save ('upload/upload.jpg'); / / file is the name name if ($upload) of the upload form {return [' success' = > 1, 'message' = >' upload successful', 'url' = >' upload/upload.jpg'] } else {return ['success' = > 0,' message' = > 'upload failed',];} this is the end of the content about "how to achieve the effect of markdown Editor". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.