--- title: 12th 鐵人賽 Day_18 action text? tags: 12th 鐵人賽 --- # 12th 鐵人賽 Day_18 action text? 嗨!各位朋友大家好,打給後,歹嘎吼,胎尬喉,我是阿圓,一樣有請今天的one piece: ![](https://i.imgur.com/Zp87QFY.jpg) (他的能力超好玩的,就像 Rails 在對我做的事 QAQ") 前三天介紹 ~~(混完)~~ 了 devise 這個 gem ,今天再度回到我們的部落格,前情提要一下,我們目前有三個model,controller,分別是admin、post、category。 而文章內文的部分希望可以讓她漂亮一點,不要永遠都只有一般的文字~~新細明體12號字~~,而 Rails 內有一個action text,可以用! ### action text? [官方文件](https://guides.rubyonrails.org/action_text_overview.html) 想像一下,如果今天想要將 「我要成為海賊王!」 這段文字變成粗體,並在網頁上顯示出來,我要怎麼做呢? 有兩種方式,一個是用strong的標籤包起來,一個是寫css,讓他有粗體的樣式。 所以我會需要有一個簡單的textarea,在裡面寫下: ```html <strong>「我要成為海賊王!」</strong> ``` 再把上面一整行,丟到html上,這樣就會有下面的效果: <strong>我要成為海賊王!</strong> 但沒有人寫文章的時候會這樣寫啊?!那樣也太辛苦了,因此就會需要一款文字編輯器(action text 預設是 [trix](https://trix-editor.org/)),也就是當我在文字編輯器裡打下「我要成為海賊王!」這段字,可以反白後,按下一個粗體的按鈕,就可以產生上面由strong標籤包起來的文字,接著只要把文字放到畫面上也會有一樣的效果!甚至是我在做編輯的時候,就能及時去渲染我想要的畫面,意即,「我見即所得!」 而action text,就是將這些步驟變得更簡單,只要打一行安裝指令,並在model中設定,就可以了!(連 CSS 都幫你寫好了!) ### 使用方法 首先先安裝: ```shell= $ rails action_text:install ``` 接著,再去我們的 post model 做設定,將 content 這個欄位指定給 action_text 來做處理: ```ruby= # app/models/post.rb class Post < ApplicationRecord has_rich_text :content #...略 end ``` 在編輯頁面的from那邊: ```htmlmixed= <!-- app/views/posts/_form.html.erb --> <%= form_with(model: post) do |form| %> <div class="field"> <%= form.label :content %> <%= form.rich_text_area :content %> </div> <% end %> ``` 這樣就有 trix 編輯器囉~ ![](https://i.imgur.com/zbTYHRl.png) 來測試一下! ![](https://i.imgur.com/4YVHUyF.png) 最後只要在post的show.html.erb裡加上: ```htmlmixed= <%= @message.content %> ``` 就可以看到裡面的東西囉! ![](https://i.imgur.com/ClTKSTj.png) 不過目前還沒有辦法使用圖片的功能,我們明天來處理吧! 感謝各位看到這邊,若有任何建議,請各位不吝指教!我們明天見! ![](https://i.imgur.com/PPbpd2b.gif)