搜索
首页科技周边IT业界如何创建简单的CM，使编辑变得容易

如何创建简单的CM，使编辑变得容易

尊渡假赌尊渡假赌尊渡假赌
尊渡假赌尊渡假赌尊渡假赌
Feb 09, 2025 am 09:32 AM

如何创建简单的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文件中，以更改工具栏的背景颜色和鼠标光标。完成后，您的用户界面应如下所示。

>

如何创建简单的CM，使编辑变得容易

>现在我们已经设置了界面，现在该使用JavaScript添加功能了。

发送数据

在我们的index.js文件中，我们将为以下功能定义五个功能：创建组件，切换工具栏可见性，重置输入字段，加载帖子和加载组件。让我们看看他们每个人的所作所为。

    > createComponent（componentType）我们将使用此功能将创建的组件发送到数据库。它将ComponentType（将组件类型（链接，标题，文本，编辑器）描述为其参数。首先，我们必须使用开关案例语句确定组件类型。对于标题，文本和链接，我们将使用AJAX请求将其内容及其组件类型一起发送到PHP/ADD.PHP。另一方面，对于编辑人员，我们只需要发送组件类型即可。成功保存内容后，我们将getComponents（）函数称为“刷新”所显示的组件。

    toggletoolbar（）
  1. 此功能只需根据需要添加或删除工具栏的D-FLEX和D-NONE类。

    > repentValue（componentType）
    2. >具有ComponentType参数的函数，通过通过ID获取每个元素并将其值设置为空字符串来重新定位输入字段的值。

  2. getComponents（）

    3. 首先，此功能向php/load.php提出AJAX HTTP请求，以从数据库中获取组件的数据。如果成功，它会根据从数据库中检索到的组件（例如，标题组件的

    元素）动态生成HTML。之后，对于每个编辑器组件，将Froala实例与保存按钮一起初始化。最后，单击事件侦听器被添加到按钮中，以保存编辑器中写的帖子。关于成功，getPosts（）函数被要求“刷新”帖子列表。

  3. > getPosts（）

    4. 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正在行动吗？让我们测试它！

    首先，让我们使用构建的工具栏创建一些页面组件。

    如何创建简单的CM，使编辑变得容易>现在我们已经创建了每个组件之一，包括编辑器实例，让我们尝试将帖子添加到我们的页面中。

    在上面的视频中，我们可以看到功能强大的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中文网其他相关文章！

声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
相关文章
21个开发人员新闻通讯将在2025年订阅21个开发人员新闻通讯将在2025年订阅Apr 24, 2025 am 08:28 AM

与这些顶级开发人员新闻通讯有关最新技术趋势的了解！ 这个精选的清单为每个人提供了一些东西，从AI爱好者到经验丰富的后端和前端开发人员。 选择您的收藏夹并节省时间搜索REL

使用AWS ECS和LAMBDA的无服务器图像处理管道使用AWS ECS和LAMBDA的无服务器图像处理管道Apr 18, 2025 am 08:28 AM

该教程通过使用AWS服务来指导您通过构建无服务器图像处理管道。 我们将创建一个部署在ECS Fargate群集上的next.js前端，与API网关，Lambda函数，S3桶和DynamoDB进行交互。 Th

CNCF ARM64飞行员：影响和见解CNCF ARM64飞行员：影响和见解Apr 15, 2025 am 08:27 AM

该试点程序是CNCF（云本机计算基础），安培计算，Equinix金属和驱动的合作，简化了CNCF GitHub项目的ARM64 CI/CD。 该计划解决了安全问题和绩效

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

如何修复KB5055523无法在Windows 11中安装？
3 周前ByDDD
如何修复KB5055518无法在Windows 10中安装？
3 周前ByDDD
R.E.P.O.的每个敌人和怪物的力量水平
3 周前By尊渡假赌尊渡假赌尊渡假赌
<🎜>：死铁路 - 如何驯服狼
3 周前ByDDD
蓝王子：如何到达地下室
3 周前ByDDD
显示更多

热工具

mPDF

mPDF

mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

EditPlus 中文破解版

EditPlus 中文破解版

体积小，语法高亮，不支持代码提示功能

显示更多

热门话题

Java教程
1655
14
CakePHP 教程
1413
52
Laravel 教程
1306
25
PHP教程
1252
29
C# 教程
1226
24
显示更多