PJCHENder 未整理筆記

[Rails] Action Text Overview

2019-05-09

@(Ruby on Rails)[Ruby,RailsGuides]

[Rails] Action Text Overview

keywords:action text

Action Text @ Edge RailsGuides

安裝

1
$ rails action_text:install

使用

Model

1
2
3
4
# app/models/message.rb
class Message < ApplicationRecord
has_rich_text :content
end

Controller

1
2
3
4
5
6
class MessagesController < ApplicationController
def create
message = Message.create! params.require(:message).permit(:title, :content)
redirect_to message
end
end

View

1
2
3
4
5
6
7
<%# app/views/messages/_form.html.erb %>
<%= form_with(model: message) do |form| %>
<div class="field">
<%= form.label :content %>
<%= form.rich_text_area :content %>
</div>
<% end %>
1
2
<%# app/views/messages/show.html.erb %>
<%= @message.content %>

客製化

新增一顆 h2 的按鈕

建立一支 trix_init.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// ./app/javascript/packs/trix_init.js
const trixInit = (e) => {
const trix = e.target;

addSubHeadingButton(trix);

return;
};

function addSubHeadingButton(trix) {
const toolBar = trix.toolbarElement;

// Creation of the sub-heading button
const subHeadingButton = document.createElement('button');
subHeadingButton.innerText = 'h2';
setAttributes(subHeadingButton, {
type: 'button',
class: 'trix-button trix-button--icon trix-button--icon-heading-2',
title: 'subHeading',
tabindex: '-1',
'data-trix-attribute': 'subHeading',
});

// Attachment of the sub-heading button to the toolBar
const headingButton = toolBar.querySelector(
'[data-trix-attribute="heading1"]'
);
headingButton.insertAdjacentElement('afterend', subHeadingButton);

// When the sub-heading button is clicked
subHeadingButton.addEventListener('click', () => {
if (trix.editor.attributeIsActive('subHeading')) {
headingButton.setAttribute('disabled', '');
} else {
headingButton.removeAttribute('disabled');
}
});
}

function setAttributes(element, attributes) {
if (!element || !attributes) {
console.warn(
'Element or attributes is not existed in setAttributes function'
);
return;
}
Object.entries(attributes).forEach(([key, value]) => {
element.setAttribute(key, value);
});
}

module.exports = trixInit;

接著在 application.js 中去載入 trix_init.js 這支檔案:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// app/javascript/packs/application.js
require('@rails/actiontext');
const Trix = require('trix');
const trixInit = require('./trix_init.js');

// 告訴 Trix 當 attribute 是 subHeading 時,要產生 <h2> 的標籤
Trix.config.textAttributes.subHeading = {
inheritable: true,
tagName: 'h2',
};

// trix-initialize 時執行 trixInit
document.addEventListener('turbolinks:load', function() {
document.addEventListener('trix-initialize', trixInit, false);
});

樣式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
trix-toolbar {
// REMOVE:
max-width: 730px;
margin: 0 auto;

.trix-button--icon-heading-1::before {
background-image: url("...");
}

.trix-button--icon-heading-2::before {
background-image: url("...");
}

.trix-button-group,
.trix-button,
.trix-button:not(:first-child) {
border: 0;
}

.trix-button::before {
background-size: 60%;
}
}

.trix-content {
color: #333333;

// REMOVE:
max-width: 730px;
margin: 0 auto;

> div {
font-size: 16px;
line-height: 24px;
letter-spacing: -0.003em;
margin-bottom: 16px;
}

h2 {
font-size: 18px;
margin-bottom: 1rem;
}

ul,
ol {
margin-bottom: 1rem;
padding-left: 40px;
}

a {
color: #007bff;
text-decoration: none;
}

blockquote {
margin-bottom: 2rem;
margin-top: 2rem;
font-style: italic;
color: #7f8c8d;
font-size: 22px;
line-height: 1.5;
}

.attachment {
margin-bottom: 1rem;
}

.attachment-gallery {
> action-text-attachment,
> .attachment {
flex: 1 0 33%;
padding: 0 0.5em;
max-width: 33%;
}

&.attachment-gallery--2,
&.attachment-gallery--4 {
> action-text-attachment,
> .attachment {
flex-basis: 50%;
max-width: 50%;
}
}
}

action-text-attachment {
.attachment {
padding: 0 !important;
max-width: 100% !important;
}
}
}

參考

Tags: rails

掃描二維條碼,分享此文章