bubbleでCMSを機能を作る場合

bubble
1

bubbleでwebサイトを構築するのですが、CMS機能も追加したいです。

簡易的なCMSならbubbleでもできると思うのですが、結構リッチなページの作成が必要になります。

例えば類似の例でいうと以下のページのような記事をかけるようにしたいです。

上記例のように、会話形式で色のついた吹き出しがあって、双方でやりとりしてるような感じも表現できるような感じにしたいです。

となるとこの部分はbubbleじゃできない…ですよね？
そうするとどんな代替え案があるかご教示いただけると嬉しいです。

例えば、この記事ページ・CMS部分だけ別サービスで作ったりするのがいいでしょうか？
その場合、どんなツール（wordpress？studio？）が良いでしょう？

それとも、このページだけフロントエンドエンジニアが静的なhtmlページを作っちゃってbubbleの中のどこかに置く…とかそんなことってbubbleはできたりしますでしょうか？（よくわかっていなくすみません…）

アドバイスいただけると幸いです。
宜しくお願い致します :bowing_man:

2

HTML code elementを使うことで、吹き出しを表現することは可能です。
ただ、ブログのように吹き出しを使うとなると毎回HTMLコードを入力するのも面倒なので
OptionSetsにコードを保管しておき、都度呼び出す方法が良いかと思います。
実際に記事を書くときには、吹き出しを選んでコピーし、記事執筆用のFormに貼り付けるではどうでしょうか。

ただRich text editorに貼り付けると添付画像の用に見た目が反映されません。

スクリーンショット 2022-12-14 19.20.09
スクリーンショット 2022-12-14 19.20.091676×1200 97.5 KB

HTML Elementに書き出すとこのように吹き出しになっています。
スクリーンショット 2022-12-14 19.20.03

コードとしてはおかしくないのですが、
表示されないので、別のinputプラグインを試すといいかもしれません。
もし解決策をご存知の方がいましたら、補足いただけると幸いです。

また、今回の実装にはinputForm用に「Rich Text Editor」プラグインと

Air Copyプラグインを使用しました。

「いいね！」 1
3

補足になります。
RichText EditorではHTMLタグ内に全てのCSSコードを書く必要があるので、吹き出しで使用するbeforeを書くのが難しいのと、コードの管理が複雑になってしまいます。
そこで、CSS用にCSSToolsプラグインを導入してみたところ吹き出しの表現ができました。

作り方としては、Option Setsに

ここに文字を入力

と登録しておいて
RitchTextの設置しているページにCSS Toolを設置
Work FlowのPage loardedをトリガーとし、CSSを読み込ませます。
読み込ませるコード↓

.left-baloon:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid #e0edff;
}
.left-baloon {
  position: relative;
  display: inline-block;
  margin: 1.5em 0 1.5em 15px;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #e0edff;
}

これで吹き出しをコピーして貼り付けることができます。
ただ、DBへの保存時にという文字がくっついてきてしまうので、
find&replaceを使って削除しようと思いましたが、だけがどうしても消えませんでした。
以上、進捗報告です。
もう少しいい方法があれば別途共有します。

スクリーンショット 2022-12-15 5.43.59
スクリーンショット 2022-12-15 5.43.591384×936 13.4 KB

「いいね！」 3
4

ありがとうございます！なるほどですね！！
めちゃくちゃ調べていただいてとても嬉しいです…！！まさにやりたかったことです。

また、今回の実装にはinputForm用に「Rich Text Editor」プラグインと
Air Copyプラグインを使用しました。

承知しました、参考に致します！

「いいね！」 1