如何創建簡單的CM，使編輯變得容易

在本文中，我們將研究一種簡單的方法來構建您自己的內容管理系統，以使您的網站變得容易。

我們與弗羅拉拉合作創建了這篇文章。感謝您支持使SitietPoint成為可能的合作夥伴。

鑰匙要點

>利用HTML/CSS/JavaScript/jQuery和Bootstrap的組合來確保響應能力和易於設計。

>

>根據用戶偏好，使用PHP和Microsoft SQL Server進行後端操作，可以選擇切換到MySQL或MariadB（例如MariaIadb）。

>
• >集成Wysiwyg HTML編輯器Froala，以增強內容編輯功能，使管理員更容易有效地管理網站內容。
>專注於創建一個用戶友好的界面，該接口包括用於添加頁面組件的動態工具欄和用於輸入管理的模態系統。
確保CMS支持基本功能，例如創建，查看，編輯和刪除內容，並在未來的開發中具有可伸縮性和安全性增強的潛力。
什麼CMS是
• 內容管理系統（CMS）是功能強大且流行的工具，用於製作嚴重依賴內容的平台。他們為用戶提供了簡單的方法來創建，發布，查看和編輯內容。
>
• >此外，他們通常幾乎不需要編碼經驗。這使他們成為博客，企業，開發人員或任何想以減少努力建立網站的人的理想選擇。
CMS用於不同字段的不同目的。例如，它們可用於為博客，公司或自由職業網站，教育網站甚至電子商務平台提供動力。因此，使用CMS仍然是一種流行且相關的選擇，可以在未來幾年中確保其在Web開發中的位置。

市場上有很多可用的CMS。有些是開源的，而另一些則可以以價格使用。開源和付費的CMS都是可行的選擇，並且具有其優勢。在某些情況下，您想創建自己的CMS。

>您可能是尋求挑戰的開發人員，負責創建CMS的學生或渴望成為CMS行業大牌的企業。如果您想創建一個內容管理系統，那麼本文適合您。

準備自己構建自己的CMS

我們將使用以下工具製作基本（即足夠可用的）CMS：

• html/css/javascript/jquery for the Frontend
引導程序用於響應能力和簡易設計
• 後端
php
• 用於存儲數據的MS SQL Server（或等效）MS 用於創建數據庫和表的SSMS（SQL Server Management Studio或同等學歷）
froala，wysiwyg（您看到的是您得到的）html編輯器用於內容編輯
雖然我們要製作的CMS是基本的，但也將非常穩定。這是因為我們將使用的Wysiwyg編輯器Froala具有您在CMS編輯器中所需的大多數功能。本文應該讓您走上正確的軌道，無論您的CMS最終目標是什麼。
• 另外，請注意，我將使用的DBMS（數據庫管理系統）是Microsoft SQL Server，因為這是我最熟悉的。您可以輕鬆地將其換成首選的DBM，例如MySQL或Mariadb。由於我們沒有在數據庫中做任何特別複雜的事情，因此在這裡，
dbms的選擇並不重要。
>在繼續之前，假設您已經有了PHP，您選擇的DBM，並且在計算機上安裝了Froala。如果您還沒有，則可以通過訪問其各自的網站並按照說明來安裝它們。

>

CMS中有什麼？

>

通常，在內容管理系統中，有管理員和最終用戶。管理員管理網站的頁面，組件和內容。他們維護網站，確保每個功能都可以使用，並在需要時進行改進。 另一方面，最終用戶與CMS驅動網站的頁面和組件進行交互，以創建，編輯和消費內容。兩個用戶通常都與CMS中的Wysiwyg編輯器進行交互，以創建和編輯。 出於演示目的，為了使事情變得簡單，我們將僅針對管理員實施單頁CMS。在生產CMS中，我們需要考慮許多其他因素，這些因素超出了本教程的範圍。其中包括用戶管理和訪問權限，安全性（輸入消毒，參數化查詢等），性能等。

在我們的簡單CMS中，管理員應該能夠執行以下任務：>

>與工具欄進行交互以創建頁面組件，例如標題，文本，鏈接和FROALA編輯器實例

與Froala實例進行交互，以發布將顯示的內容

>

>查看發布的內容

輸入視圖模式，它隱藏了工具欄

管理員通常也可以編輯和刪除頁面組件，但讓我們堅持創建和刪除組件。考慮到這些功能，讓我們通過創建數據庫架構開始我們的過程。

• 設置數據庫
• >由於我們有簡單的要求，因此我們還具有更簡單的數據庫結構。對於我們的示例CMS，我們將僅使用兩個無關表：
>
• > post
  • post_id：int，身份（1,1），而不是null，主鍵
  • post_content：varchar（max），而不是null
  • > ports_on：datetime2（7），而不是null
• >
  組件
  component_id：int，身份（1,1），而不是null，主鍵
  component_type：char（8），而不是null
  component_content：varchar（255），nullable
  create_on：datetime2（7），而不是null

>

>第一表，即帖子，將存儲從編輯器組件中存儲內容，而組件表將存儲使用工具欄生成的頁面元素。 請注意，在大多數瀏覽器中，URL具有2048個字符的最大長度，但在我們的數據庫中，我們僅將其設置為255個字符。此外，您可能還需要將兩個表的ID列更改為應用程序的隨機字符串。

創建接口

我們將包括Bootstrap，Bootstrap圖標以及Froala的CSS和JS文件的CDN鏈接。我們還將擁有我們的自定義CSS和JS文件：

<span><!--Include Bootstrap CSS-->
</span><span><span><span><link> href<span>="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"</span> rel<span>="stylesheet"</span> integrity<span>="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"</span> crossorigin<span>="anonymous"</span>></span>
</span>
<span><!--Include Bootstrap Icons-->
</span><span><span><span><link> rel<span>="stylesheet"</span> href<span>="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"</span>></span>
</span>
<span><!--Include Froala Editor CSS-->
</span><span><span><span><link> href<span>="css/froala_editor.pkgd.min.css"</span> rel<span>="stylesheet"</span> type<span>="text/css"</span> /></span>    
</span>
<span><!--Include Custom CSS-->
</span><span><span><span><link> href<span>="css/index.css"</span> rel<span>="stylesheet"</span> type<span>="text/css"</span> /></span>
</span>
<span><!--Include Popper JS-->
</span><span><span><span><script> src<span >="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js"</script></span> integrity<span>="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
</span>
<span><!--Include Bootstrap JS-->
</span><span><span><span><script> src<span >="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js"</script></span> integrity<span>="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
</span>
<span><!--Include jQuery-->
</span><span><span><span><script> src<span >="https://code.jquery.com/jquery-3.6.1.js"</script></span> integrity<span>="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
</span>
<span><!--Include Froala JS-->
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/froala_editor.pkgd.min.js"</span>></span><span><span></span>></span>
</span>
<span><!--Include Custom JS-->
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/index.js"</span>></span><span><span></span>></span>
</span></span></span></span></span>

>我們將要處理的以下組件是Navbar和工具欄。 Navbar包含網站的標題或品牌以及用於切換工具欄可見性的圖標按鈕（將其視為“ Toggle Admin View”按鈕）。

另一方面，工具欄包含與可以在編程中添加到頁面的四個組件相對應的四個按鈕：

<span><span><span><div> class<span>="row"</span>>
  <span><span><span><nav> class<span>="navbar navbar-expand-xl"</span>></nav></span>
</span>    <span><span><span><div> class<span>="container-fluid"</span>>
      <span><span><span><a> class<span>="navbar-brand text-white"</span> href<span>="#"</span>></a></span>Froala CMS<span><span></span>></span>
</span>      <span><span><span><ul> class<span>="navbar-nav me-auto mb-2 mb-lg-0"</span>></ul></span>
</span>        <span><span><span><li> class<span>="nav-item"</span>></li></span>
</span>          <span><span><span><a> class<span>="bi bi-eye text-white"</span> href<span>="#"</span> <span>onclick<span>="<span>toggleToolbar()</span>"</span></span>></a></span><span><span></span>></span>
</span>        <span><span><span></span>></span>
</span>      <span><span><span></span>></span>
</span>    <span><span><span></span></span></span></span></span></span></span>
</div></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span></span></span></span>
</div></span>></span>
</span>

上面的代碼創建了Navbar和組件。 Navbar的背景顏色為＃0098F7，使其具有藍色的色調。 toggletoolbar（）onclick事件負責隱藏工具欄元素。接下來，為工具欄寫代碼：

<span><span><span><div> class<span>="row mt-5 px-xl-5 mx-xl-5"</span> id<span>="toolbar"</span>>
  <span><span><span><p> class<span>="lead ms-xl-5"</span>></p></span>
</span>    This is your CMS toolbar. You can add new components to your page by clicking any of the buttons below. To toggle the visibility of the toolbar, click the eye (<span><span><span><i> class<span>="bi bi-eye"</span>></i></span><span><span></span>></span>) icon on the navbar.
</span>  <span><span><span></span>></span>
</span>  <span><span><span><div> class<span>="col-xxl-3 col-md-4"</span>>
    <span><span><span><div> class<span>="m-xl-5 shadow p-xl-5 rounded border border-0 toolbarBox"</span> data-bs-toggle<span>="modal"</span> data-bs-target<span>="#headingModal"</span>>
      <span><span><span><div> class<span>="row text-center display-4"</span>>
        <span><span><span><i> class<span>="bi bi-type-h1"</span>></i></span><span><span></span>></span>
</span>      <span><span><span></span></span></span></span>
</div></span>></span>
</span>      <span><span><span><div> class<span>="row text-center h3"</span>>
        <span><span><span><label>></label></span>Heading<span><span></span>></span>
</span>      <span><span><span></span></span></span></span>
</div></span>></span>
</span>    <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span><div> class<span>="col-xxl-3 col-md-4"</span>>
    <span><span><span><div> class<span>="m-xl-5 shadow p-xl-5 rounded border border-0 toolbarBox"</span> data-bs-toggle<span>="modal"</span> data-bs-target<span>="#textModal"</span>>
      <span><span><span><div> class<span>="row text-center display-4"</span>>
        <span><span><span><i> class<span>="bi bi-fonts"</span>></i></span><span><span></span>></span>
</span>      <span><span><span></span></span></span></span>
</div></span>></span>
</span>      <span><span><span><div> class<span>="row text-center h3"</span>>
        <span><span><span><label>></label></span>Text<span><span></span>></span>
</span>      <span><span><span></span></span></span></span>
</div></span>></span>
</span>    <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span><div> class<span>="col-xxl-3 col-md-4"</span>>
    <span><span><span><div> class<span>="m-xl-5 shadow p-xl-5 rounded border border-0 toolbarBox"</span> data-bs-toggle<span>="modal"</span> data-bs-target<span>="#linkModal"</span>>
      <span><span><span><div> class<span>="row text-center display-4"</span>>
        <span><span><span><i> class<span>="bi bi-link-45deg"</span>></i></span><span><span></span>></span>
</span>      <span><span><span></span></span></span></span>
</div></span>></span>
</span>      <span><span><span><div> class<span>="row text-center h3"</span>>
  <span><span><span><label>></label></span>Link<span><span></span>></span>
</span>       <span><span><span></span></span></span></span>
</div></span>></span>
</span>     <span><span><span></span></span></span>
</div></span>></span>
</span>   <span><span><span></span></span></span>
</div></span>></span>
</span>   <span><span><span><div> class<span>="col-xxl-3 col-md-4"</span>>
    <span><span><span><div> class<span>="m-xl-5 shadow p-xl-5 rounded border border-0 toolbarBox"</span> <span>onclick<span>="<span>createComponent('editor')</span>"</span></span>>
      <span><span><span><div> class<span>="row text-center display-4"</span>>
        <span><span><span><i> class<span>="bi bi-pencil-square"</span>></i></span><span><span></span>></span>
</span>      <span><span><span></span></span></span></span>
</div></span>></span>
</span>      <span><span><span><div> class<span>="row text-center h3"</span>>
        <span><span><span><label>></label></span>Editor<span><span></span>></span>
</span>      <span><span><span></span></span></span></span>
</div></span>></span>
</span>    <span><span><span></span></span></span>
</div></span>></span>
</span>   <span><span><span></span></span></span>
</div></span>></span>
</span> <span><span><span></span></span></span></span></span>
</div></span>></span>
</span>

>我們使用Bootstrap的網格顯示（單擊此處以了解更多）和大小選項，以使其工具欄為其按鈕組件。我們還使用Bootstrap圖標以及按鈕標籤，以提高可讀性。在製作自己的CMS時，有很多方法可以代表工具欄。

通常的選項是

> navbar ， cards ，或> offcanvas elements。在這種情況下，我們使用類似卡的矩形表示它們，每個矩形都具有按鈕狀的行為。

>我們還將為工具欄盒添加一些事件。請注意，我們將打開一個模態，其代碼在下面的前三個框（標題，文本和鏈接）中顯示。

>每個都包含一個輸入字段（兩個用於鏈接，一個用於文本，一個用於URL）。最後，我們將調用用於初始化我們的Wysiwyg HTML編輯器的CREATECOMPONT函數：>

>上面的代碼顯示了其中一種模式 - 特別是用於將新標題添加到頁面上的代碼。當用戶單擊“標題”按鈕/卡時，顯示此模式。單擊出口或取消按鈕或添加標題時，它將被解散。

<span><span><span><div> class<span>="modal fade"</span> id<span>="headingModal"</span> tabindex<span>="-1"</span> aria-labelledby<span>="headingModalLabel"</span> aria-hidden<span>="true"</span>>
  <span><span><span><div> class<span>="modal-dialog"</span>>
    <span><span><span><div> class<span>="modal-content"</span>>
      <span><span><span><div> class<span>="modal-header"</span>>
        <span><span><span><h5 id="class-span-modal-title-span-id-span-headingModalLabel-span-gt"> class<span>="modal-title"</span> id<span>="headingModalLabel"</span>></h5></span>Add a heading:<span><span></span>></span>
</span>        <span><span><span><button> type<span>="button"</span> class<span>="btn-close"</span> data-bs-dismiss<span>="modal"</span> aria-label<span>="Close"</span>></button></span><span><span></span>></span>
</span>      <span><span><span></span></span></span></span></span>
</div></span>></span>
</span>      <span><span><span><div> class<span>="modal-body"</span>>
        <span><span><span><div> class<span>="mb-3"</span>>
          <span><span><span><input> type<span>="text"</span> class<span>="form-control"</span> id<span>="headingContent"</span>></span>
</span>        <span><span><span></span></span></span></span>
</div></span>></span>
</span>      <span><span><span></span></span></span>
</div></span>></span>
</span>      <span><span><span><div> class<span>="modal-footer"</span>>
        <span><span><span><button> type<span>="button"</span> class<span>="btn btn-light"</span>  <span>onclick<span>="<span>resetValue('heading')</span>"</span></span> data-bs-dismiss<span>="modal"</span>></button></span>Cancel<span><span></span>></span>
</span>        <span><span><span><button> type<span>="button"</span> class<span>="btn btn-primary"</span> <span>onclick<span>="<span>createComponent('heading')</span>"</span></span> data-bs-dismiss<span>="modal"</span>></button></span>Save<span><span></span>></span>
</span>      <span><span><span></span></span></span></span></span>
</div></span>></span>
</span>    <span><span><span></span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span>
</span>

其他模式的工作方式相似，但是請注意，正確的鏈接輸入應具有文本和URL的兩個輸入字段（目前，我們僅使用一個）：>

<span><!--Include Bootstrap CSS-->
</span><span><span><span><link> href<span>="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"</span> rel<span>="stylesheet"</span> integrity<span>="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"</span> crossorigin<span>="anonymous"</span>></span>
</span>
<span><!--Include Bootstrap Icons-->
</span><span><span><span><link> rel<span>="stylesheet"</span> href<span>="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"</span>></span>
</span>
<span><!--Include Froala Editor CSS-->
</span><span><span><span><link> href<span>="css/froala_editor.pkgd.min.css"</span> rel<span>="stylesheet"</span> type<span>="text/css"</span> /></span>    
</span>
<span><!--Include Custom CSS-->
</span><span><span><span><link> href<span>="css/index.css"</span> rel<span>="stylesheet"</span> type<span>="text/css"</span> /></span>
</span>
<span><!--Include Popper JS-->
</span><span><span><span><script> src<span >="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js"</script></span> integrity<span>="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
</span>
<span><!--Include Bootstrap JS-->
</span><span><span><span><script> src<span >="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js"</script></span> integrity<span>="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
</span>
<span><!--Include jQuery-->
</span><span><span><span><script> src<span >="https://code.jquery.com/jquery-3.6.1.js"</script></span> integrity<span>="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
</span>
<span><!--Include Froala JS-->
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/froala_editor.pkgd.min.js"</span>></span><span><span></span>></span>
</span>
<span><!--Include Custom JS-->
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/index.js"</span>></span><span><span></span>></span>
</span></span></span></span></span>

>最後，我們將上面的代碼片段添加到index.css.css文件中，以更改工具欄的背景顏色和鼠標光標。完成後，您的用戶界面應如下所示。

>

>現在我們已經設置了界面，現在該使用JavaScript添加功能了。

發送數據

在我們的index.js文件中，我們將為以下功能定義五個功能：創建組件，切換工具欄可見性，重置輸入字段，加載帖子和加載組件。讓我們看看他們每個人的所作所為。

> createComponent（componentType）我們將使用此功能將創建的組件發送到數據庫。它將ComponentType（將組件類型（鏈接，標題，文本，編輯器）描述為其參數。首先，我們必須使用開關案例語句確定組件類型。對於標題，文本和鏈接，我們將使用AJAX請求將其內容及其組件類型一起發送到PHP/ADD.PHP。另一方面，對於編輯人員，我們只需要發送組件類型即可。成功保存內容後，我們將getComponents（）函數稱為“刷新”所顯示的組件。
toggletoolbar（）
1. 此功能只需根據需要添加或刪除工具欄的D-FLEX和D-NONE類。
   > repentValue（componentType）
>具有ComponentType參數的函數，通過通過ID獲取每個元素並將其值設置為空字符串來重新定位輸入字段的值。

2. getComponents（）

首先，此功能向php/load.php提出AJAX HTTP請求，以從數據庫中獲取組件的數據。如果成功，它會根據從數據庫中檢索到的組件（例如，標題組件的

元素）動態生成HTML。之後，對於每個編輯器組件，將Froala實例與保存按鈕一起初始化。最後，單擊事件偵聽器被添加到按鈕中，以保存編輯器中寫的帖子。關於成功，getPosts（）函數被要求“刷新”帖子列表。

3. > getPosts（）

getPosts（）函數由AJAX請求組成，該請求通過PHP/LoadPosts.php檢索數據庫中的所有帖子。類似於getComponents（），此功能動態生成用於顯示帖子的HTML。

4. 在文檔負載上，getComponents（）和getPosts（）函數都調用。現在，您已經擁有將數據發送到服務器的必要JS代碼，剩下的就是在後端處理它。

   準備後端

   正如您之前可能注意到的那樣，我們有四個PHP文件 - 兩個用於添加組件和帖子的文件，兩個用於加載它們。它們由類似的代碼組成，從使用SQLSRV_Connect連接到數據庫，獲取$ _POST變量（如果有），然後定義和運行查詢。下面列出的是這些文件中涉及的查詢：

   >

   load.php：

   <span><!--Include Bootstrap CSS-->
   </span><span><span><span><link> href<span>="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"</span> rel<span>="stylesheet"</span> integrity<span>="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"</span> crossorigin<span>="anonymous"</span>></span>
   </span>
   <span><!--Include Bootstrap Icons-->
   </span><span><span><span><link> rel<span>="stylesheet"</span> href<span>="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"</span>></span>
   </span>
   <span><!--Include Froala Editor CSS-->
   </span><span><span><span><link> href<span>="css/froala_editor.pkgd.min.css"</span> rel<span>="stylesheet"</span> type<span>="text/css"</span> /></span>    
   </span>
   <span><!--Include Custom CSS-->
   </span><span><span><span><link> href<span>="css/index.css"</span> rel<span>="stylesheet"</span> type<span>="text/css"</span> /></span>
   </span>
   <span><!--Include Popper JS-->
   </span><span><span><span><script> src<span >="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js"</script></span> integrity<span>="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
   </span>
   <span><!--Include Bootstrap JS-->
   </span><span><span><span><script> src<span >="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js"</script></span> integrity<span>="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
   </span>
   <span><!--Include jQuery-->
   </span><span><span><span><script> src<span >="https://code.jquery.com/jquery-3.6.1.js"</script></span> integrity<span>="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="</span> crossorigin<span>="anonymous"</span>></span><span><span></span>></span>
   </span>
   <span><!--Include Froala JS-->
   </span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/froala_editor.pkgd.min.js"</span>></span><span><span></span>></span>
   </span>
   <span><!--Include Custom JS-->
   </span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="js/index.js"</span>></span><span><span></span>></span>
   </span></span></span></span></span>

   loadposts.php：

   <span><span><span><div> class<span>="row"</span>>
     <span><span><span><nav> class<span>="navbar navbar-expand-xl"</span>></nav></span>
   </span>    <span><span><span><div> class<span>="container-fluid"</span>>
         <span><span><span><a> class<span>="navbar-brand text-white"</span> href<span>="#"</span>></a></span>Froala CMS<span><span></span>></span>
   </span>      <span><span><span><ul> class<span>="navbar-nav me-auto mb-2 mb-lg-0"</span>></ul></span>
   </span>        <span><span><span><li> class<span>="nav-item"</span>></li></span>
   </span>          <span><span><span><a> class<span>="bi bi-eye text-white"</span> href<span>="#"</span> <span>onclick<span>="<span>toggleToolbar()</span>"</span></span>></a></span><span><span></span>></span>
   </span>        <span><span><span></span>></span>
   </span>      <span><span><span></span>></span>
   </span>    <span><span><span></span></span></span></span></span></span></span>
   </div></span>></span>
   </span>  <span><span><span></span>></span>
   </span><span><span><span></span></span></span></span>
   </div></span>></span>
   </span>

   add.php：

   <span><span><span><div> class<span>="row mt-5 px-xl-5 mx-xl-5"</span> id<span>="toolbar"</span>>
     <span><span><span><p> class<span>="lead ms-xl-5"</span>></p></span>
   </span>    This is your CMS toolbar. You can add new components to your page by clicking any of the buttons below. To toggle the visibility of the toolbar, click the eye (<span><span><span><i> class<span>="bi bi-eye"</span>></i></span><span><span></span>></span>) icon on the navbar.
   </span>  <span><span><span></span>></span>
   </span>  <span><span><span><div> class<span>="col-xxl-3 col-md-4"</span>>
       <span><span><span><div> class<span>="m-xl-5 shadow p-xl-5 rounded border border-0 toolbarBox"</span> data-bs-toggle<span>="modal"</span> data-bs-target<span>="#headingModal"</span>>
         <span><span><span><div> class<span>="row text-center display-4"</span>>
           <span><span><span><i> class<span>="bi bi-type-h1"</span>></i></span><span><span></span>></span>
   </span>      <span><span><span></span></span></span></span>
   </div></span>></span>
   </span>      <span><span><span><div> class<span>="row text-center h3"</span>>
           <span><span><span><label>></label></span>Heading<span><span></span>></span>
   </span>      <span><span><span></span></span></span></span>
   </div></span>></span>
   </span>    <span><span><span></span></span></span>
   </div></span>></span>
   </span>  <span><span><span></span></span></span>
   </div></span>></span>
   </span>  <span><span><span><div> class<span>="col-xxl-3 col-md-4"</span>>
       <span><span><span><div> class<span>="m-xl-5 shadow p-xl-5 rounded border border-0 toolbarBox"</span> data-bs-toggle<span>="modal"</span> data-bs-target<span>="#textModal"</span>>
         <span><span><span><div> class<span>="row text-center display-4"</span>>
           <span><span><span><i> class<span>="bi bi-fonts"</span>></i></span><span><span></span>></span>
   </span>      <span><span><span></span></span></span></span>
   </div></span>></span>
   </span>      <span><span><span><div> class<span>="row text-center h3"</span>>
           <span><span><span><label>></label></span>Text<span><span></span>></span>
   </span>      <span><span><span></span></span></span></span>
   </div></span>></span>
   </span>    <span><span><span></span></span></span>
   </div></span>></span>
   </span>  <span><span><span></span></span></span>
   </div></span>></span>
   </span>  <span><span><span><div> class<span>="col-xxl-3 col-md-4"</span>>
       <span><span><span><div> class<span>="m-xl-5 shadow p-xl-5 rounded border border-0 toolbarBox"</span> data-bs-toggle<span>="modal"</span> data-bs-target<span>="#linkModal"</span>>
         <span><span><span><div> class<span>="row text-center display-4"</span>>
           <span><span><span><i> class<span>="bi bi-link-45deg"</span>></i></span><span><span></span>></span>
   </span>      <span><span><span></span></span></span></span>
   </div></span>></span>
   </span>      <span><span><span><div> class<span>="row text-center h3"</span>>
     <span><span><span><label>></label></span>Link<span><span></span>></span>
   </span>       <span><span><span></span></span></span></span>
   </div></span>></span>
   </span>     <span><span><span></span></span></span>
   </div></span>></span>
   </span>   <span><span><span></span></span></span>
   </div></span>></span>
   </span>   <span><span><span><div> class<span>="col-xxl-3 col-md-4"</span>>
       <span><span><span><div> class<span>="m-xl-5 shadow p-xl-5 rounded border border-0 toolbarBox"</span> <span>onclick<span>="<span>createComponent('editor')</span>"</span></span>>
         <span><span><span><div> class<span>="row text-center display-4"</span>>
           <span><span><span><i> class<span>="bi bi-pencil-square"</span>></i></span><span><span></span>></span>
   </span>      <span><span><span></span></span></span></span>
   </div></span>></span>
   </span>      <span><span><span><div> class<span>="row text-center h3"</span>>
           <span><span><span><label>></label></span>Editor<span><span></span>></span>
   </span>      <span><span><span></span></span></span></span>
   </div></span>></span>
   </span>    <span><span><span></span></span></span>
   </div></span>></span>
   </span>   <span><span><span></span></span></span>
   </div></span>></span>
   </span> <span><span><span></span></span></span></span></span>
   </div></span>></span>
   </span>

   > addpost.php：

   <span><span><span><div> class<span>="modal fade"</span> id<span>="headingModal"</span> tabindex<span>="-1"</span> aria-labelledby<span>="headingModalLabel"</span> aria-hidden<span>="true"</span>>
     <span><span><span><div> class<span>="modal-dialog"</span>>
       <span><span><span><div> class<span>="modal-content"</span>>
         <span><span><span><div> class<span>="modal-header"</span>>
           <span><span><span><h5 id="class-span-modal-title-span-id-span-headingModalLabel-span-gt"> class<span>="modal-title"</span> id<span>="headingModalLabel"</span>></h5></span>Add a heading:<span><span></span>></span>
   </span>        <span><span><span><button> type<span>="button"</span> class<span>="btn-close"</span> data-bs-dismiss<span>="modal"</span> aria-label<span>="Close"</span>></button></span><span><span></span>></span>
   </span>      <span><span><span></span></span></span></span></span>
   </div></span>></span>
   </span>      <span><span><span><div> class<span>="modal-body"</span>>
           <span><span><span><div> class<span>="mb-3"</span>>
             <span><span><span><input> type<span>="text"</span> class<span>="form-control"</span> id<span>="headingContent"</span>></span>
   </span>        <span><span><span></span></span></span></span>
   </div></span>></span>
   </span>      <span><span><span></span></span></span>
   </div></span>></span>
   </span>      <span><span><span><div> class<span>="modal-footer"</span>>
           <span><span><span><button> type<span>="button"</span> class<span>="btn btn-light"</span>  <span>onclick<span>="<span>resetValue('heading')</span>"</span></span> data-bs-dismiss<span>="modal"</span>></button></span>Cancel<span><span></span>></span>
   </span>        <span><span><span><button> type<span>="button"</span> class<span>="btn btn-primary"</span> <span>onclick<span>="<span>createComponent('heading')</span>"</span></span> data-bs-dismiss<span>="modal"</span>></button></span>Save<span><span></span>></span>
   </span>      <span><span><span></span></span></span></span></span>
   </div></span>></span>
   </span>    <span><span><span></span></span></span>
   </div></span>></span>
   </span>  <span><span><span></span></span></span>
   </div></span>></span>
   </span><span><span><span></span></span></span>
   </div></span>></span>
   </span>

   >設置這些PHP文件後，您應該能夠使用Wysiwyg編輯器的編輯功能執行CMS的所有基本功能。製作自己的CMS時，請記住對輸入進行消毒和參數化查詢，以及其他安全措施，以使您的用戶和應用程序免受某些漏洞的影響。
   >好奇地看到我們的基本CMS正在行動嗎？讓我們測試它！
   首先，讓我們使用構建的工具欄創建一些頁面組件。

   >現在我們已經創建了每個組件之一，包括編輯器實例，讓我們嘗試將帖子添加到我們的頁面中。

   在上面的視頻中，我們可以看到功能強大的Wysiwyg編輯器可以提供的一些功能。這些包括字體格式，保留格式時的複制和圖像上傳。它還顯示了角色計數作家的右下角的字符數。

   保存內容後，我們看到它在編輯器下方顯示。您可能需要添加更多的填充，設計或完全更改帖子的顯示，但這暫時可以。 Froala提供了一百多個功能，可以豐富內容編輯和用戶體驗。他們也可以很好地防止壓倒性用戶。編輯器是可自定義的，因此您只能包含要用戶使用的功能。 >您有一個可以建立的CMS；未來複雜CMS項目的岩石固定基金會。

   下一步是什麼？

   >現在您擁有必要的工具和知識來構建一個簡單但堅實的CMS，現在該確定下一步了。您可以在將此CMS轉換為成熟的CM方面做出很多改進。

   >一個改進是接口和新功能的添加。其中包括用戶訪問權限，評論部分，搜索引擎，其他工具，頁面組件和主題，僅舉幾例。

   >您可以做出的另一個明顯的改進是安全性。您可以使用它保護您的CMS，服務器，數據，用戶和業務。我們建議查看此鏈接以獲取OWASP（Open Web應用程序安全項目）的指南，該指南說明了最佳的安全實踐。

   >您可能還想了解有關Wysiwyg編輯的更多信息。例如，您可以檢查它是否具有全面且易於理解的文檔頁面（單擊此處查看示例）。

   熟悉編輯器的另一種方法是使用其演示和免費試用。當您看到它可以帶來的好處時，您可以在方便方面承諾。這些編輯節省了時間，您將需要額外的幾個月（甚至幾年）來創建和拋光CMS的其他功能。

   最後，您需要閱讀有關CMS最佳實踐的更多信息。它們會不時改變，因此更新總是更好。

   >

   >我們希望您喜歡閱讀本指南，現在創建CMS的目標似乎更容易獲得。

   >經常詢問的問題（常見問題解答），以創建一個簡單的CMS，以簡化編輯

   創建簡單的CMS時要考慮的關鍵功能是什麼？

   在創建簡單的CMS時，重要的是要考慮將其用戶友好且高效的功能。其中包括一個簡單而直觀的界面，簡單的內容管理，靈活性和自定義選項。 CMS還應具有強大的安全系統來保護您的內容。此外，考慮合併對SEO友好的功能，以幫助提高網站在搜索引擎上的可見性。

   >我如何確保我的CMS用戶友好？

   確保您的CMS對用戶友好，專注於創建易於導航的直觀界面。這包括清晰的菜單，易於找到的按鈕和邏輯結構。此外，提供全面的文檔和支持，以幫助用戶了解如何有效使用CMS。

   >

   >如何使我的CMS柔性且可自定義？

   使您的CMS靈活且可自定義，請考慮合併允許用戶修改其網站的佈局，設計和功能的功能。這可能包括更改主題，添加插件和自定義代碼的選項。此外，請確保您的CMS支持各種內容類型，例如文本，圖像和視頻。

   >我在CMS中應該實施哪些安全措施？

   >在您的CMS中實現強大的安全措施是至關重要的保護您的內容。這可能包括諸如強密碼要求，兩因素身份驗證和常規安全更新之類的功能。此外，考慮納入防止常見的安全威脅的措施，例如SQL注入和跨站點腳本。
   >如何使我的CMS SEO友好？友好，考慮合併有助於提高網站在搜索引擎上的可見性的功能。這可能包括添加元標籤，創建SEO友好的URL以及與流行的SEO工具集成的選項。此外，請確保您的CMS支持快速的加載時間和移動友好的設計，因為這些因素也會影響SEO。 - 帶有CMS的方工具可以增強其功能並提高其效率。這可能包括用於SEO，分析，社交媒體集成等的工具。但是，確保這些集成不會損害CMS的安全性或性能。

   >我如何確保我的CMS可擴展？

   以確保您的CMS可伸縮，將其設計為處理增加的金額內容和用戶而沒有損害性能。這可能涉及使用有效的數據庫優化代碼以及實施緩存技術。此外，考慮使用可以適應不斷變化需求的靈活體系結構。

   >

   >我應該使用哪些編程語言來創建我的CMS？但是，流行的選擇包括PHP，JavaScript和Python。這些語言被廣泛使用，具有強大的社區支持，並提供了可以簡化開發過程的各種庫和框架。

   >

   >如何測試CMS的性能？在CMS中，考慮使用可以模擬用戶活動並監視CMS響應的工具。這可能包括負載測試工具，性能監控工具和分析工具。此外，定期查看您的CMS的性能並進行必要的優化以確保其保持有效的效率。

   我如何為CMS的用戶提供支持？

   >為CMS的用戶提供全面的支持是至關重要的確保他們可以有效使用它。這可能包括創建詳細的文檔，提供教程，並提供支持論壇或服務台。此外，考慮合併反饋系統以收集用戶見解並進行改進。

以上是如何創建簡單的CM，使編輯變得容易的詳細內容。更多資訊請關注PHP中文網其他相關文章！