switchon@lavalamp.biz
+27(0) 83 419 4851 / +27(0) 21 036 1165
Application & software development
Get A Quote

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact
    the research of code
    The Research Of Code
    May 25, 2020
    using vue alongside laravels blade templating engine
    Using Vue Alongside Laravels Blade Templating Engine
    Aug 3, 2020

    Implementing A JS markdown Editor Into Your Application

    Categories
    • Web Development
    Tags
    • github
    • javascript
    • js
    • markdown editor
    • web development
    implementing a js markdown editor into your application
    implementing a js markdown editor into your application

    Recently I was looking at online markdown editors that I could use in a small code sharing app. A lot of them were great, but Toast UI Editor was exactly what I was looking for. In this post, I'll describe some of the features, how to install and use it, and hopefully give you some inspiration.


    Features


    Toast UI has tonnes of features such as:

    • Live Preview
    • Scroll Sync
    • Auto Indent
    • Syntax Highlight
    • WYSIWYG
    • Tables
    • Code Block Editor
    • Copy and Paste
    • Chart
    • Code Syntax Highlighting
    • Viewer

    Installation


    It's pretty straight forward to install, and I recommend using npm. npm install --save @toast-ui/jquery-editor

    import 'codemirror/lib/codemirror.css';
    import '@toast-ui/editor/dist/toastui-editor.css';
    
    import $ from 'jquery';
    import '@toast-ui/jquery-editor';
    
    $('#editor').toastuiEditor({
      usageStatistics: false,
      initialEditType: 'markdown',
      previewStyle: 'vertical'
    });
    
    const content = $('#editor').toastuiEditor('getHtml');
    
    console.log(content);
    

    Or, you can use it to render markdown as with the viewer functionality

    $('#viewer').toastuiEditor({
      height: '500px',
      initialValue: '# hello'
    });
    

    Sending it via a form


    If you want to send this markdown via a form, you can just use an onchange function to update a hidden field. It'll set the hidden field value to the markdown.

    let hiddenBodyMarkdown = document.querySelector("#bodyMarkdown");
    let onEditorUpdate = () => {
        hiddenBodyMarkdown.value = editor.getMarkdown();
    }
    
    const editor = new Editor({
        usageStatistics: false,
        el: document.querySelector('#editor'),
        events: {"change": onEditorUpdate},
        initialValue: '"`js\n' +
            'console.log("Hello World");\n' +
            '"`'
    });
    

    There are tonnes of options and I've found it flexible enough for my needs. I hope you find it useful too. For more information I recommend:

    • https://github.com/nhn/tui.editor
    • https://github.com/nhn/tui.editor/tree/master/apps/jquery-editor

    Contact us


      Related posts:

      easily view your laravel logs using laravel log viewerEasily View Your Laravel Logs Using Laravel Log Viewer implementing laravel echoImplementing Laravel Echo And Socket.io With A Laravel API And Ionic Vue App laravel livewireLaravel Livewire angularUpdating A Primitive Type Variable From A Service In Angular
      Share
      47
      Hristo Mitev
      Hristo Mitev
      Hristo is a frontend developer with knowledge and experience in Laravel.

      1 Comment

      1. Tharindu says:
        Jan 12, 2022 at 11:00 am

        Hey, just wanna tell you thank you. you saved my day.

        Reply

      Leave a Reply Cancel reply

      Your email address will not be published. Required fields are marked *

      Lava Lamp Lab


      Like technology, a lava lamp constantly changes form, producing new conditions with every passing moment



      lava lamp lab facebook   lava lamp lab twitter   lava lamp lab linkedin   lava lamp lab instgram

      Services


      Application & software development

      Outsourced software development

      Project based resourcing

      Digital marketing & consulting

      Graphic design & consulting

      UI / UX design & consulting

      Contact Us


      +27(0) 83 419 4851

      +27(0) 21 036 1165


      switchon@lavalamp.biz


      Unit 4 Monaco Square,
      14 Church Street,
      Durbanville,
      Cape Town, 7550

      NBConsult Group


      nbconsult
      nbconnect msp
      nbclearning
      river broadband
      designer needed
      © 2023 Lava Lamp Lab (Pty) Ltd | All Rights Reserved | Privacy Policy
      Contact us now

        Application & software development

          Outsourced software development

            Project based resourcing

              Digital marketing & consulting

                Graphic design & consulting

                  UI/UX design & consulting

                    Lease an expert

                      Recruitment services

                        We are using cookies to give you the best experience on our website.

                        You can find out more about which cookies we are using or switch them off in settings.

                        Lava Lamp Lab
                        Powered by  GDPR Cookie Compliance
                        Privacy Overview

                        This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

                        Strictly Necessary Cookies

                        Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

                        If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

                        3rd Party Cookies

                        This website uses Google Analytics to collect anonymous information such as the number of visitors to the site, and the most popular pages.

                        Keeping this cookie enabled helps us to improve our website.

                        Please enable Strictly Necessary Cookies first so that we can save your preferences!

                        Cookie Policy

                        More information about our Cookie Policy