<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/"
    xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" version="2.0">
    <channel>
        
        <title>
            <![CDATA[ rich text editor - freeCodeCamp.org ]]>
        </title>
        <description>
            <![CDATA[ Browse thousands of programming tutorials written by experts. Learn Web Development, Data Science, DevOps, Security, and get developer career advice. ]]>
        </description>
        <link>https://www.freecodecamp.org/news/</link>
        <image>
            <url>https://cdn.freecodecamp.org/universal/favicons/favicon.png</url>
            <title>
                <![CDATA[ rich text editor - freeCodeCamp.org ]]>
            </title>
            <link>https://www.freecodecamp.org/news/</link>
        </image>
        <generator>Eleventy</generator>
        <lastBuildDate>Tue, 28 Jul 2026 11:53:22 +0000</lastBuildDate>
        <atom:link href="https://www.freecodecamp.org/news/tag/rich-text-editor/rss.xml" rel="self" type="application/rss+xml" />
        <ttl>60</ttl>
        
            <item>
                <title>
                    <![CDATA[ Visual Studio vs Visual Studio Code – What's The Difference Between These IDE Code Editors? ]]>
                </title>
                <description>
                    <![CDATA[ The first time I heard about “Visual Studio”, I thought it was the same as “Visual Studio Code”. I don’t know why Microsoft decided to confuse everyone with the names of those two development tools. But that’s a story for another day. “Visual Studio”... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/visual-studio-vs-visual-studio-code/</link>
                <guid isPermaLink="false">66adf24611a28b6eb378d2cd</guid>
                
                    <category>
                        <![CDATA[ editor ]]>
                    </category>
                
                    <category>
                        <![CDATA[ rich text editor ]]>
                    </category>
                
                    <category>
                        <![CDATA[ visual studio ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Visual Studio Code ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Kolade Chris ]]>
                </dc:creator>
                <pubDate>Tue, 31 Jan 2023 19:17:31 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2023/01/VSvVSC.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>The first time I heard about “Visual Studio”, I thought it was the same as “Visual Studio Code”. I don’t know why Microsoft decided to confuse everyone with the names of those two development tools. But that’s a story for another day.</p>
<p>“Visual Studio” and “Visual Studio Code” are not the same thing. Visual Studio is an integrated development environment (IDE) and Visual Studio Code is a rich text editor like Sublime Text and Atom.</p>
<p>But the difference between the tools is more than just IDE and text editor. </p>
<p>An IDE is a robust tool for writing, editing, debugging, and running your code. A text editor only lets you write and edit your code. You might have to step out of a text editor to run your code or download plugins to help it do the running for you.</p>
<p>In this article, you'll learn the main differences between Visual Studio and Visual Studio Code. But firstly, we need to know what “Visual Studio” is and what “Visual Studio Code is” before diving into those differences. </p>
<h2 id="heading-what-well-cover">What We'll Cover</h2>
<ul>
<li><a class="post-section-overview" href="#heading-what-is-visual-studio">What is Visual Studio?</a></li>
<li><a class="post-section-overview" href="#heading-what-is-visual-studio-code">What is Visual Studio Code?</a></li>
<li><a class="post-section-overview" href="#heading-what-is-the-difference-between-visual-studio-and-visual-studio-code">What is the Difference between “Visual Studio” and “Visual Studio Code”?</a></li>
<li><a class="post-section-overview" href="#heading-which-should-you-choose-between-visual-studio-and-visual-studio-code">Which should you Choose between “Visual Studio” and “Visual Studio Code”?</a></li>
<li><a class="post-section-overview" href="#heading-conclusion">Conclusion</a></li>
</ul>
<h2 id="heading-what-is-visual-studio">What is Visual Studio?</h2>
<p>Visual Studio was first released in 1997 by Microsoft. It's an integrated development environment (IDE) for developing, editing, and debugging websites, web, and mobile applications as well as cloud services. </p>
<p>Because it's an IDE, programming utilities like a debugger, compiler, intellisence, and more are all bundled into it for you.</p>
<p>Visual Studio comes with built-in support for C# and .NET. It also supports other programming languages like C, C++, Python, F#, web languages (HTML, CSS, JavaScript), and a lot more. Support for Java was removed back in Visual Studio 2017.</p>
<p>Visual Studio runs on Windows and Mac. It has 3 editions – community, professional, and enterprise. The community version is free, while the professional and enterprise are not.</p>
<p>The installation is quite a bit more robust on Windows than Mac. So, on Windows, you might have to download more than 42 GB depending on what you want to do.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2023/01/Screenshot-2023-01-31-122422.png" alt="Screenshot-2023-01-31-122422" width="600" height="400" loading="lazy"></p>
<p>But on Mac, as of the time of writing this article, you need around 6.2 GB of disk space.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2023/01/Screenshot-2023-01-31-at-11.30.22.png" alt="Screenshot-2023-01-31-at-11.30.22" width="600" height="400" loading="lazy"> </p>
<h2 id="heading-what-is-visual-studio-code">What is Visual Studio Code?</h2>
<p>Visual Studio Code (also called VS Code) is like the mini version of Visual Studio. It is an open-source and lightweight text editor available on Windows, Mac, and Linux. There’s also the web version available at <code>https://vscode.dev/</code>.</p>
<p>VS Code comes with built-in support for JavaScript, TypeScript and Node JS, but you can use it to code in any language you want. All you need to do is download the relevant extensions. </p>
<p>Some of the extensions are made by Microsoft, but a lot of others are third-party extensions.</p>
<p>Unlike Visual Studio, you don’t need much space to download VS Code. You might not need more than 200 MB of disk space to download it. </p>
<p>Since it supports JavaScript, TypeScript, and Node JS by default, you get a debugger and intellisence, too. But to get intellisence, a compiler, and debuggers for other languages, you have to download relevant extensions.</p>
<p>Now you know that Visual Studio is an IDE and Visual Studio Code is a text editor. So let's summarize their main differences next.</p>
<h2 id="heading-what-is-the-difference-between-visual-studio-and-visual-studio-code">What is the Difference between “Visual Studio” and “Visual Studio Code”?</h2>
<div class="hn-table">
<table>
<thead>
<tr>
<td><strong>Basis</strong></td><td><strong>Visual Studio</strong></td><td><strong>Visual Studio Code</strong></td></tr>
</thead>
<tbody>
<tr>
<td><strong>Type</strong></td><td>Visual Studio is a full-fledged IDE</td><td>VS Code is a text editor (AKA Code editor)</td></tr>
<tr>
<td><strong>Platform</strong></td><td>Visual Studio runs on Windows and Mac</td><td>VS Code runs on Windows, Mac, and Linux</td></tr>
<tr>
<td><strong>Size</strong></td><td>Visual Studio is relatively large. You might have to download more than 40 GB on Windows and over 6 GB on Mac</td><td>VS Code does not require more than 200 MB on any platform</td></tr>
<tr>
<td><strong>Support</strong></td><td>Visual Studio has built in support for C# and .NET, alongside several common languages apart from Java</td><td>VS Code supports JavaScript, Typescript, and Node JS out of the box. It also supports other programming languages – as long as there’s an extension(s) for that</td></tr>
<tr>
<td><strong>Pricing</strong></td><td>Visual Studio Community Edition is free, but the professional and enterprise editions code $45 and $250 per month respectively.</td><td>VS Code is free. Most of the extensions are also free but there are freemium ones</td></tr>
<tr>
<td><strong>Extensions</strong></td><td>Visual Studio does not have as many extensions as VS Code</td><td>VS Code has numerous professionally and curated extensions for various purposes</td></tr>
</tbody>
</table>
</div><h2 id="heading-which-should-you-choose-between-visual-studio-and-visual-studio-code">Which should you Choose between “Visual Studio” and “Visual Studio Code”?</h2>
<p>There has been a long-running debate about which is better and which to choose between Visual Studio and Visual Studio Code. Well, it depends on what you are doing.</p>
<p>If you’re developing exclusively with a language supported by Visual Studio such as C#, C, C++, Python, and others, Visual Studio or other relevant IDEs are likely the best option for you. </p>
<p>But even if you’re developing in those languages but you require a React, Vue, or Angular frontend, VS code might be the best option for you.</p>
<p>If you’re working in a team, they might provide you with the enterprise version of Visual Studio, or any other IDE that correlates with the language you are working with. For example, PyCharm for Python and IntelliJ Idea for Java.</p>
<p>If you’re using Linux, you have to choose Visual Studio Code or some other IDE apart from Visual Studio. That’s because Visual Studio does not run on Linux.</p>
<p>If you’re the kind of person that likes to customize your editor to your taste, just go for VS Code because it's highly customizable. You also should probably choose VS Code if you are mixing technologies.</p>
<h2 id="heading-conclusion">Conclusion</h2>
<p>This article showed you the differences between Visual Studio and VS Code, and also what they both are separately.</p>
<p>The debate should never be which one is better than the other, but which is best for what you want to do, or what you need. That’s why we looked at some scenarios that might encourage you to choose one over the other.</p>
<p>Thank you for reading.</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ RTF File: What is the Rich Text Format? ]]>
                </title>
                <description>
                    <![CDATA[ Chances are that you've come across a file or two with the .rtf extension. If you've ever wondered what kind of file that is, and how the heck you even open it, you're not alone. In this article we'll cover what an RTF file is and how to open, edit, ]]>
                </description>
                <link>https://www.freecodecamp.org/news/rtf-file-what-is-the-rich-text-format/</link>
                <guid isPermaLink="false">66ac882dc5931c2d2889ae77</guid>
                
                    <category>
                        <![CDATA[ formats ]]>
                    </category>
                
                    <category>
                        <![CDATA[ rich text editor ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Kristofer Koishigawa ]]>
                </dc:creator>
                <pubDate>Fri, 02 Oct 2020 16:09:00 +0000</pubDate>
                <media:content url="https://cdn-media-2.freecodecamp.org/w1280/5f9c9869740569d1a4ca19e7.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>Chances are that you've come across a file or two with the <code>.rtf</code> extension. If you've ever wondered what kind of file that is, and how the heck you even open it, you're not alone.</p>
<p>In this article we'll cover what an RTF file is and how to open, edit, and convert them to different formats you might be more familiar with.</p>
<h2 id="heading-whats-the-rtf-format">What's the RTF format?</h2>
<p>RTF stands for Rich Text Format, and was first developed by Microsoft in 1987.</p>
<p>The RTF format was originally developed to make it easier to work with text documents no matter what word processor or operating system you use.</p>
<p>Though Microsoft stopped maintaining the format back in 2008, it was widely adopted. These days, most modern operating systems have some way of opening RTF files straight out of the box.</p>
<h2 id="heading-how-to-open-and-edit-an-rtf-file">How to open and edit an RTF file</h2>
<p>To open a Rich Text Format file, first try double clicking on it if you're on desktop or tapping it if on a mobile device.</p>
<h3 id="heading-desktop-and-online-word-processors">Desktop and online word processors</h3>
<p>Most desktop operating systems come with software that's capable of opening RTF files like WordPad on Windows or TextEdit on macOS.</p>
<p>Many Linux distributions include an office suite like LibreOffice that can open RTF files. If yours doesn't, you can install it through the command line or go to <a target="_blank" href="https://www.libreoffice.org/">https://www.libreoffice.org/</a> to download the package directly.</p>
<p>Also, most online word processors can open RTF files. Google Docs, Dropbox Paper, and Office Online are among the most popular online word processors, and all are capable of opening files with the <code>.rtf</code> extension.</p>
<p>Once you open up an RTF file using one of the above methods, you can edit the file like you would any other text file:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/10/image-8.png" alt="Image" width="600" height="400" loading="lazy">
<em>Sample RTF file open in LibreOffice Writer on Linux</em></p>
<h3 id="heading-how-to-open-an-rtf-file-with-a-different-program">How to open an RTF file with a different program</h3>
<p>If you'd like to open a different program, just right click on the file and hover over "Open with". Then, just select the program you'd like to open the file with:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/10/Peek-2020-10-08-16-03.gif" alt="Image" width="600" height="400" loading="lazy">
<em>Opening an RTF file with a different program in Linux Mint</em></p>
<p>Note: This process may vary slightly depending on your operating system.</p>
<h3 id="heading-mobile-word-processors">Mobile word processors</h3>
<p>Mobile devices might have a little more trouble opening RTF files out of the box. Still, there are many options like Google Docs or WPS Office for both Android and iOS. </p>
<p>Once you find a mobile word processor that you're comfortable with, there's a good chance that it can open and edit RTF files.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/10/image-10.png" alt="Image" width="600" height="400" loading="lazy">
<em>Sample RTF file open in Google Docs on Android</em></p>
<h2 id="heading-how-to-convert-an-rtf-file-into-a-different-format">How to convert an RTF file into a different format</h2>
<p>The exact method of converting an RTF file varies depending on the software you use to open it. Still, the process is generally similar no matter what word processor you use.</p>
<p>Here's how to convert an RTF file into a different format in LibreOffice Writer.</p>
<h3 id="heading-step-1-select-save-as">Step 1: Select "Save As"</h3>
<p>With the file open in LibreOffice Writer as described above, click "File", then select "Save As..." from the dropdown:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/10/image-11.png" alt="Image" width="600" height="400" loading="lazy">
<em>"Save As..." in LibreOffice Writer</em></p>
<h3 id="heading-step-2-select-a-location">Step 2: Select a location</h3>
<p>In the "Save" popup menu, select a location to save your new file.</p>
<p>You can also take this chance to rename the file to something new if you'd like:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/10/image-12.png" alt="Image" width="600" height="400" loading="lazy">
<em>The "Save" popup menu in LibreOffice Writer</em></p>
<p>I opted to save the file to my desktop, but feel free to save it wherever you'd like.</p>
<p>Note: This menu may look different depending on your operating system.</p>
<h3 id="heading-step-3-select-a-new-file-format">Step 3: Select a new file format</h3>
<p>Now the fun part – choosing the different format you'll save the file in.</p>
<p>Open the dropdown menu in the lower right corner and select another format:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/10/image-13.png" alt="Image" width="600" height="400" loading="lazy">
<em>The file format dropdown menu in LibreOffice Writer</em></p>
<p>After that, just click save "Save". Your new file in a different format will be in the location you specified. Better yet, your original RTF file will still be wherever you opened it, completely unchanged.</p>
<p>Now all you need to do is to open up your new file and continue editing it.</p>
<p>But keep in mind that not every file format is as universal as RTF. If you share your new file with someone and they have trouble opening it, you may need to convert it to something else.</p>
<p>Even so, now that you know the process, it should be easy to convert your files into a format that you and anyone else can work with.</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ A Quick Look at Action Text for Rails 6.0 ]]>
                </title>
                <description>
                    <![CDATA[ By Arun Mathew Kurian Rails 6.0 is almost here. The stable version will be released on April 30. The Rails 6.0 beta1 was released on January 15. As Rails releases always are, Rails 6.0 is also action-packed. There are two major frameworks newly intro... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/quick-look-at-action-text-in-rails-6-0-12a8f9f7597f/</link>
                <guid isPermaLink="false">66c35d2b56e6b06442afd853</guid>
                
                    <category>
                        <![CDATA[ Rails 6 ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Action Text ]]>
                    </category>
                
                    <category>
                        <![CDATA[ rich text editor ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Ruby ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Ruby on Rails ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Tue, 29 Jan 2019 09:51:36 +0000</pubDate>
                <media:content url="https://cdn-media-1.freecodecamp.org/images/1*0-LAOoPHs63XCSd3VDJ2Eg.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By Arun Mathew Kurian</p>
<p><a target="_blank" href="https://weblog.rubyonrails.org/">Rails 6.0</a> is almost here. The stable version will be released on April 30. The Rails 6.0 beta1 was released on January 15. As Rails releases always are, Rails 6.0 is also action-packed. There are two major frameworks newly introduced, <a target="_blank" href="https://weblog.rubyonrails.org/2018/12/13/introducing-action-mailbox-for-rails-6/">Action Mailbox</a> and <a target="_blank" href="https://weblog.rubyonrails.org/2018/10/3/introducing-action-text-for-rails-6/">Action Text</a>. In this post, let's take a quick look at Action Text by using it in a small app.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/1*0-LAOoPHs63XCSd3VDJ2Eg.png" alt="Image" width="800" height="301" loading="lazy">
<em>courtesy:wikipedia</em></p>
<h4 id="heading-action-text">Action Text</h4>
<p>Action Text allows us to bring rich text content and editing to Rails. This means we can perform operations like formatting text, embedding images, formatting links, adding lists and other editor-like feature to a text field.</p>
<p>This is done by including the <a target="_blank" href="https://github.com/basecamp/trix">Trix editor</a> into the framework. The RichText content generated by the Trix editor is saved in its own RichText model that’s associated with any existing Active Record model in the application. All embedded images or other attachments are automatically stored using <a target="_blank" href="https://edgeguides.rubyonrails.org/active_storage_overview.html">Active Storage.</a></p>
<p>Let us start building our Rails app which will be a blogger app. The app is created in Rails 6.0, so the ruby version must be &gt;2.5.</p>
<p>In the terminal type</p>
<pre><code>rails <span class="hljs-keyword">new</span> blog --edge
</code></pre><p>The -- edge flag fetches the latest rails version or edge version of the rails.</p>
<p>Action Text expects web packer and ActiveStorage to be installed. The active storage is already present in the Rails app. So we need</p>
<pre><code>gem “image_processing”, “~&gt; <span class="hljs-number">1.2</span>” #uncomment <span class="hljs-keyword">from</span> Gemfilegem ‘webpacker’
</code></pre><p>in the gem file.</p>
<p>Now run</p>
<pre><code>bundle install.
</code></pre><p>Next, we need to create a config/webpacker.yml:</p>
<pre><code>bundle exec rails webpacker:install
</code></pre><p>Now let us start our Rails Server.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/1*YXa6Y6mfxGa2E2m5hnwuug.png" alt="Image" width="800" height="449" loading="lazy"></p>
<p>Great, let’s quickly build our app. The app will have only one model Article.</p>
<p>Let us create a controller for articles:</p>
<pre><code>rails g controller Articles index <span class="hljs-keyword">new</span> create show edit update destroy — no-helper — no-test-frameworks
</code></pre><p>And then configure our routes:</p>
<pre><code>Rails.application.routes.draw <span class="hljs-keyword">do</span> resources :articlesend
</code></pre><p>Next, we need to create our model. Our Articles model will have two fields: they are <strong>title</strong> and <strong>text</strong>. text must be the field that accepts Rich Text Format. So in the migration, we need to add only the title field. The text field will be handled by ActionText.</p>
<p>Let’s generate the model</p>
<pre><code>rails g model Articles title:string — no-test-framework
</code></pre><p>and run the migrations:</p>
<pre><code>rails db:migrate
</code></pre><p>Now let us add ActionText part. For that first run</p>
<pre><code>rails action_text:install
</code></pre><p>This will add all the dependencies required by Action Text. Most notably, this will add a new file <strong>javascript/packs/application.js</strong> and two action-storage migrations.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/1*1nE9nc8I6E2jC-EnEy394A.png" alt="Image" width="800" height="465" loading="lazy"></p>
<p>Run the migrations again using</p>
<pre><code>rails db:migrate
</code></pre><p><img src="https://cdn-media-1.freecodecamp.org/images/1*AzLR2ezD1weUwRXHKghCTQ.png" alt="Image" width="718" height="208" loading="lazy"></p>
<p>Now we can add the text part of our model. Go to <strong>app/models/article.rb</strong> and add the following line</p>
<p><code>has_rich_text **:text**</code></p>
<p>text is the field name we are providing. It can be anything like body or content etc.</p>
<p>Now our model becomes</p>
<pre><code><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Article</span> &lt; <span class="hljs-title">ApplicationRecord</span> <span class="hljs-title">has_rich_text</span> :<span class="hljs-title">textend</span></span>
</code></pre><p>Before we build our form, let’s create our controller logic for the creation of articles:</p>
<pre><code><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ArticlesController</span> &lt; <span class="hljs-title">ApplicationController</span>  <span class="hljs-title">def</span> <span class="hljs-title">create</span>   @<span class="hljs-title">article</span> </span>= Article.new(article_params)   @article.save   redirect_to @article end
</code></pre><pre><code> private def article_params   params.require(:article).permit(:title, :text) end
</code></pre><pre><code>end
</code></pre><p>We can now create the form for the blog. In <strong>app/views/articles/new.rb</strong> add the following form code:</p>
<pre><code>&lt;%= form_with scope: :article, <span class="hljs-attr">url</span>: articles_path, <span class="hljs-attr">local</span>: <span class="hljs-literal">true</span> <span class="hljs-keyword">do</span> |form| %&gt;
</code></pre><pre><code>&lt;p&gt;    &lt;%= form.label :title %&gt;<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span>    <span class="hljs-tag">&lt;<span class="hljs-name">%=</span> <span class="hljs-attr">form.text_field</span> <span class="hljs-attr">:title</span> %&gt;</span>  <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></span>   <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>    <span class="hljs-tag">&lt;<span class="hljs-name">%=</span> <span class="hljs-attr">form.label</span> <span class="hljs-attr">:text</span> %&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span>    <span class="hljs-tag">&lt;<span class="hljs-name">%=</span> <span class="hljs-attr">form.rich_text_area</span> <span class="hljs-attr">:text</span> %&gt;</span>  <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>   <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>    <span class="hljs-tag">&lt;<span class="hljs-name">%=</span> <span class="hljs-attr">form.submit</span> %&gt;</span>  <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">%</span> <span class="hljs-attr">end</span> %&gt;</span></span>
</code></pre><p>Notice that for text field we are using <strong>form.rich_text_area</strong> which is provided by Action Text.</p>
<p>Let us render our page:</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/1*zpL22oO9exBtJqvJ75dFPw.png" alt="Image" width="800" height="449" loading="lazy"></p>
<p>Awesome!!</p>
<p>We now have an awesome text editor for creating our article.</p>
<p>Before we start playing with the editor, let’s quickly implement the <strong>show</strong> functionality of the blog, so that we can see the articles we have created.</p>
<p>In <strong>app/controllers/articles_controller.rb</strong> add the following function:</p>
<pre><code> def show   @article = Article.find(params[:id]) end
</code></pre><p>Also, we need to create a view for this.</p>
<p>Create the file <strong>app/views/articles/show.html.erb</strong> and add the following code:</p>
<pre><code>&lt;p&gt;Article Title:<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">%=</span> @<span class="hljs-attr">article.title</span> %&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span></span>&lt;<span class="hljs-regexp">/p&gt;&lt;p&gt;Article Text:&lt;strong&gt;&lt;%= @article.text %&gt;&lt;/</span>strong&gt;&lt;/p&gt;
</code></pre><pre><code>&lt;%= link_to ‘Create <span class="hljs-keyword">new</span>’,new_article_path %&gt;
</code></pre><p>That's it. Our app is done. Now let's check the various features available in the text editor provided by ActionText.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/1*_tH1tezWuI8khKwrieWjZw.png" alt="Image" width="800" height="449" loading="lazy"></p>
<p>We can see that ActionText provides almost all the functionalities of a normal rich text-editor like formatting the text as bold, italic, adding strike-throughs, quotes, links, dragging and dropping images, etc.</p>
<p>After saving this, we can see the saved post from the show page.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/1*QD3WpW9992Wzo9a1yPyHgw.png" alt="Image" width="800" height="449" loading="lazy"></p>
<p>Great!</p>
<p>This is a very small example that displays the potential of ActionText. Hope it was helpful. Do give it a try.</p>
<p>A vast majority of web apps deal with rich content in some way. So I believe this new feature of Rails can make the lives of many developers easier.</p>
<p>Kudos to DHH and all the awesome people behind this.</p>
<p><a target="_blank" href="https://github.com/amkurian/Rails-6.0_action_text_demo">https://github.com/amkurian/Rails-6.0_action_text_demo</a></p>
<p>Some Useful Links:</p>
<p><a target="_blank" href="https://edgeguides.rubyonrails.org/action_text_overview.html"><strong>Action Text Overview - Ruby on Rails Guides</strong></a><br><a target="_blank" href="https://edgeguides.rubyonrails.org/action_text_overview.html">_Action Text OverviewThis guide provides you with all you need to get started in handling rich text content.After…_edgeguides.rubyonrails.org</a></p>
 ]]>
                </content:encoded>
            </item>
        
    </channel>
</rss>
