Choosing Between a WYSIWYG Editor and a Markdown Editor for Non-Technical Users in Laravel

To address your requirement of integrating an editor into your Laravel application that functions like a WYSIWYG editor but saves content as Markdown, you can use a combination of a WYSIWYG editor and a Markdown converter. One popular solution is to use the Tiptap editor along with markdown-it for conversion.

Step-by-Step Solution

1. Install Tiptap Editor: Tiptap is a highly customizable WYSIWYG editor built on top of ProseMirror. It provides a rich text editing experience without exposing Markdown syntax to the user.

2. Install markdown-it: markdown-it is a Markdown parser that can convert HTML content generated by Tiptap into Markdown format.

Implementation

1. Install Dependencies: First, you need to install the required packages. If you are using npm, you can install them as follows:

   npm install @tiptap/core @tiptap/starter-kit @tiptap/vue-3 markdown-it
   

2. Set Up Tiptap in Your Vue Component: Assuming you are using Vue.js with Laravel, you can set up Tiptap in your Vue component.

   <template>
     <div>
       <editor-content :editor="editor" />
       <button @click="saveContent">Save</button>
     </div>
   </template>
   
   <script>
   import { Editor } from '@tiptap/core'
   import StarterKit from '@tiptap/starter-kit'
   import { EditorContent } from '@tiptap/vue-3'
   import MarkdownIt from 'markdown-it'
   
   export default {
     components: {
       EditorContent,
     },
     data() {
       return {
         editor: null,
       }
     },
     mounted() {
       this.editor = new Editor({
         extensions: [
           StarterKit,
         ],
         content: '<p>Hello World!</p>',
       })
     },
     methods: {
       saveContent() {
         const htmlContent = this.editor.getHTML()
         const md = new MarkdownIt()
         const markdownContent = md.render(htmlContent)
         // Send markdownContent to your backend
         console.log(markdownContent)
       }
     },
     beforeDestroy() {
       this.editor.destroy()
     }
   }
   </script>
   

3. Save Content to Backend: In the saveContent method, you can send the markdownContent to your Laravel backend using an HTTP request (e.g., Axios or Fetch API).

   saveContent() {
     const htmlContent = this.editor.getHTML()
     const md = new MarkdownIt()
     const markdownContent = md.render(htmlContent)
   
     // Example using Axios
     axios.post('/your-endpoint', {
       content: markdownContent
     })
     .then(response => {
       console.log('Content saved successfully')
     })
     .catch(error => {
       console.error('Error saving content:', error)
     })
   }
   

Conclusion

By using Tiptap for the WYSIWYG editor and markdown-it for converting HTML to Markdown, you can provide a user-friendly editing experience while storing the content in Markdown format. This approach ensures that non-technical users are not exposed to Markdown syntax, meeting your requirements effectively.