34 lines
1.3 KiB
Plaintext
34 lines
1.3 KiB
Plaintext
%script{:src => "https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"}
|
|
%script{:src => "https://cdn.jsdelivr.net/npm/marked/marked.min.js"}
|
|
.editor.mt-4
|
|
You can use
|
|
=link_to "markdown" , "https://www.markdown-cheatsheet.com/" , class: :underline, target: :blank
|
|
for styling, use Preview tab to view rendered output. Remember to save!
|
|
%ul.flex.text-center.mt-4.font-bold
|
|
%li.p-2.flex-1.border-t.border-l.border-r.rounded-lg.border-gray-200{"v-bind:class" => "{'bg-gray-50 border-b font-normal': tab == 2}"}
|
|
%a.text-sm{"@click" => "tab = 1"}
|
|
Write text
|
|
%li.p-2.flex-1.border-t.border-l.border-r.rounded-lg.border-gray-200{"v-bind:class" => "{'bg-gray-50 border-b font-normal': tab == 1}"}
|
|
%a.p-4.text-sm{"@click" => "tab = 2"}
|
|
Preview
|
|
|
|
.my-3{"v-bind:class" => "{hidden: tab == 2}"}
|
|
%textarea.w-full{ rows: rows(object.send(field)) ,
|
|
name: "#{object.class.name.downcase}[#{field}]",
|
|
id: "#{object.class.name.downcase}_#{field}" ,
|
|
"v-model": "markdown" }
|
|
|
|
.my-3.prose{"v-html" => "compiledMarkdown" , "v-bind:class" => "{hidden: tab == 1}"}
|
|
|
|
:ruby2js
|
|
class MarkdownEditor < Vue
|
|
options el: '.editor'
|
|
def initialize
|
|
@tab = 1
|
|
@markdown = "#{object.send(field).to_s.html_safe}"
|
|
end
|
|
def compiledMarkdown
|
|
marked.parse(@markdown)
|
|
end
|
|
end
|