在 Livewire 中使用 CKEditor 所遇到的各種問題

中秋連假，一時心血來潮想要把部落格中所有頁面都改為使用 Livewire。這次將部落格中新增文章與更新文章的部分改為使用 Livewire，原本以為很簡單，結果沒想到整合 Livewire  與 CKEditor 5 的問題比想像中還要來得...
CKEditor Laravel Livewire

CKEditor 5 教學 (六)，在你的文章中顯示程式碼區塊 (Code Block)

CKEditor 5 支援程式碼區塊 (Code Block)，讓你可以在文章中呈現各種程式語言的區塊。本篇文章會敘述如何安裝程式碼區塊的套件，還有在文章中使用 Prism.js 高亮你的程式碼區塊。這篇文章會簡單敘述安裝套件的過程，...
CKEditor Laravel CSS

CKEditor 5 教學 (五)，超連結要小心的安全性問題

超連結是很多編輯器都會有的功能，CKEditor 也不例外。讓你在編輯內容中可以插入像是下方的連結：<a href="連結在此">我是超連結</a>當文章中的連結會導向至其他網站時。這個時候網站通常會在新視窗中開...
CKEditor JavaScript

CKEditor 5 教學 (四)，如何顯示編輯好的文章

當文章編輯好之後按下儲存送出，接下來就要來查看編輯好的文章內容啦！這時候如果你開啟文章顯示的頁面，你會發現剛剛編輯的效果並沒有完整顯示出來，像是馬克筆沒有顏色。如果你有插入影片的話，甚至連影片都看不到...
CKEditor JavaScript CSS

CKEditor 5 教學 (三)，上傳圖片至 Amazon S3

要想讓文章的內容更為生動，圖片可以說是必不可少的東西，畢竟圖文並茂的文章絕對是大大的加分。一般的文章編輯器，都會提供插入圖片的功能。本文中我們會使用 CKEditor 官方提供的 CKFinder 套件，實作一個將圖片插...
CKEditor Laravel PHP JavaScript

CKEditor 5 教學 (二)，客製化編輯器的功能列

本文章已經偏舊，但是主要架構不變。最近幾個版本官方已經改為使用 TypeScript 作為主要語言。在上一篇文章中，我們簡單介紹了一下 CKEditor 如何安裝。CKEditor 雖然功能非常多，但預設的功能非常少，需要我們再進...
CKEditor JavaScript CSS

CKEditor 5 教學 (一)，在網站中使用 CKEditor 5

CKEditor 是一款老牌的富文本編輯器 (Rich Text Editor)。這類編輯器最大特性就是 WYSIWYG (What You See Is What You Get)，原本的 CKEditor 4，因為年代較為久遠，所以官方後來重新打造，也就有了現在的 CKEditor...
CKEditor JavaScript