No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    [Solved] UI Component for code editor

    Framework
    2
    9
    1144
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S
      Stanley last edited by Stanley

      Dear Quasar team,

      I would like to give the user a place to input source code (E.g. Java) on the UI, could you please suggest a UI component? So far as I know, I could use text-area but it lacks of some function, for example, code line number, indentation.
      Thanks!

      1 Reply Last reply Reply Quote 0
      • Hawkeye64
        Hawkeye64 last edited by

        @Stanley Maybe you want to use markdown code highlighting? https://quasarframework.github.io/quasar-ui-qmarkdown/demo

        S 2 Replies Last reply Reply Quote 0
        • S
          Stanley @Hawkeye64 last edited by

          @Hawkeye64 Thanks! That’s what I want.

          1 Reply Last reply Reply Quote 1
          • S
            Stanley @Hawkeye64 last edited by

            @Hawkeye64 It seems that q-markdown can only display but can not edit, is that right? If yes, it can not meet my original requirement.

            1 Reply Last reply Reply Quote 0
            • Hawkeye64
              Hawkeye64 last edited by

              @Stanley What do you mean? Edit the output of the markdown? Or, edit the markdown?
              With this component, you can create something like https://hackmd.io

              S 1 Reply Last reply Reply Quote 0
              • S
                Stanley @Hawkeye64 last edited by

                @Hawkeye64 said in UI Component for code editor:

                edit the markdown?

                I would like to edit the output of markdown. Actually the requirment is: in the UI, it will output some code by default, then the user can change the code as well, after that it will save to database. As you know, using textarea will fit the basic requirment, but it lacks of some function, for example, code line number and indentation which will make the code readable, as I mentioned something like code editor.
                Thanks for your help!

                1 Reply Last reply Reply Quote 0
                • Hawkeye64
                  Hawkeye64 last edited by Hawkeye64

                  @Stanley The output of markdown is a lot of HTML. As for line numbers, you can look at the QMarkdown code and CSS to see how I implemented line numbers.

                  S 1 Reply Last reply Reply Quote 0
                  • S
                    Stanley @Hawkeye64 last edited by

                    @Hawkeye64 Thanks! But I am still not sure, is it possible to edit the output of the markdown? I mean, take textarea for example, it can edit the content.

                    1 Reply Last reply Reply Quote 0
                    • S
                      Stanley last edited by

                      Finally, I got the purpose. Thank you!

                      1 Reply Last reply Reply Quote 1
                      • First post
                        Last post