javascript 最好的方法,使一个网站的一部分可编辑的业主?

m4pnthwp  于 2023-03-16  发布在  Java
关注(0)|答案(4)|浏览(172)

我正在做一个简单的网站,我的朋友为他的餐厅,我想问什么是最好的方式,让朋友编辑网站上的每日菜单时,他想。
假设我通过一个无序列表完成了菜单,所以我正在寻找一种方法来允许他编辑列表项的内容。我对如何做到这一点有一些想法,但我想问什么是“正确”的方式来做这样的事情,以及它通常是如何完成的。

rnmwe5a2

rnmwe5a21#

因此,有多种方法可以解决这个问题,对您和您的朋友来说,复杂程度各不相同。
最简单的方法可能是让他自己编辑代码。如果他所要做的只是更改日常菜单、无序列表中的一些文本和/或图片,你可以很容易地给他一个如何打开文件并自己重写这些东西的教程。我个人也为那些希望能够在页面上添加“新闻”文章的人做过这样的事情。给了他一些代码片段,添加了HTML注解,应该粘贴在它们管理的地方。
更复杂的解决方案是编写一个JS脚本来动态加载一个资源文件(例如JSON、XML、CSV...或者甚至是您同意的一些自定义格式),在加载过程中从该文件加载数据(或者JSON可能已经包含在JS脚本中,此时的情况与前一点类似)。
Trying to load local JSON file to show data in a html page using JQuery
最后,最复杂的版本是内容管理系统,本质上意味着构建(或使用现有的)应用程序,该应用程序位于服务器上,可以使用某种花哨的GUI(例如Shopify)来操作网页。然而,这很可能是一个矫枉过正的版本,我个人会根据解决方案的通用性来选择前面的选项。
当然,这些东西有很多变体。你可以运行PHP/Node.js或其他一些服务器应用程序,当请求时组装网页,你可以创建一些HTML片段插入主页...但我认为这归结为这些主要情况。
当然,可能有一些我不知道的明显而直接的替代方案,但我相信有人会指出它们。

oknwwptz

oknwwptz2#

如果您想用一种简单的方法来实现这一点,可以使用Javascript将contenteditable="true"属性添加到HTML元素中,或者设置document.designMode = "on"以影响整个页面。
之后,您需要将新代码保存到服务器,以便每个人都可以更改它。然而,存在主要缺点

  • 这种方法***极其***不安全,因为任何有访问权限的人都可以轻松地插入恶意内容,从而影响前端甚至后端。
  • 由于没有图形用户界面,格式设置相当有限。相反,你必须依赖键盘快捷键和复制/粘贴。

如果你只是做一个快速的网站,这将工作正常,但永远不要这样做的生产,除非你确定你知道你在做什么。

r7s23pms

r7s23pms3#

你这样做就像“大多数”网站允许这样做。
添加、采用和使用HTML标记编辑器。
所以,比如说ckedit,或者其他HTML编辑器。
我是说,你觉得文字出版社是怎么运作的?
下面是Ckeditor的截图:

因此,您可以将这些内容保存到数据库中,然后显示在页面上。
我的意思是,想想这个网站(StackoverFlow)。
我们整天都在输入东西,然后它就“出现”在我们的帖子里!!!
所以,你也可以这么做。
采用这样的edtior是伟大的。
那么,说欢迎页面的文字,或什么?
你可以用任何你想要的方式显示文本。
然后,您只需放置一个标签或div,并将内容加载到该div中。
因此,您的欢迎页面可能是这样的:
我使用的是免费的ajaxtoolkit HTML编辑器。
编辑器只是放置在窗体上的一个简单文本框。
因此,比如说:

<div id="MyEditArea" runat="server">

            <asp:TextBox ID="TextBox1" runat="server" Width="1309px" 
                TextMode="MultiLine" Rows="40" 
                f="Content"
                ></asp:TextBox>

            <ajaxToolkit:HtmlEditorExtender ID="TextBox1_HtmlEditorExtender" runat="server" 
                BehaviorID="TextBox1_HtmlEditorExtender" 
                EnableSanitization="False" 
                TargetControlID="TextBox1" DisplayPreviewTab="True" DisplaySourceTab="True">
            </ajaxToolkit:HtmlEditorExtender>

        </div>

因此,当您编辑时,页面现在看起来像这样:
(you可以粘贴任何你想要的东西。甚至是“表格”或菜单。
更棒的是,你可以粘贴图片,或者其他什么。
因此,编辑器显示如下:

现在,我可以创建一个新页面,比如说名为greeting. aspx。
这一页是这样的:

<body>
    <form id="form1" runat="server">

        <div style="padding:35px" id="mydiv" runat="server">            s

        </div>

    </form>
</body>
</html>

要加载的代码如下所示:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    Dim rst As DataTable = MyRst("SELECT * from tblContent WHERE ContentName='MainPage'")

    Me.mydiv.InnerHtml = rst.Rows(0).Item("Content")

End Sub

我们现在看到,得到这个:

因此,HTML编辑器有无数的用例。
例如,我可能想为网站的所有消息和电子邮件通知构建一个电子邮件(消息)编辑器。
使用HTML编辑器,您可以执行以下操作:

因此,“html”区域只是一个文本框,但是允许文本框“保存”和“拥有”内容,那么消息和文本可以是您想要“任何内容”,包括带有这些模板的图像的电子邮件。
或者,一个问题编辑器怎么样-你可以扔在屏幕截图的问题跟踪数据库。
所以,这么说吧:

因此,HTML编辑器控件有无数的用例。
你永远不会有用户进行内容编辑,或触摸实际的软件(好吧,一个小丑服装的傻瓜可能会!!!)。
所以,采用一个HTML编辑器,简单的便让用户输入内容,问候语,节日(季节信息)。
然后是每日特色菜,晚间特色菜等?
它们都变成了数据库中的简单行。
而且更神奇的是?你要写的代码量非常少,再多也不会说把文本框的内容保存到数据库的代码了。
最终用户可以粘贴图片,在大多数情况下,甚至Word中的文本也可以正确地“粘贴”到该文本框中。
因此,对于项目符号列表等(午餐菜单),最终用户在学习HMTL方面不需要任何培训。2这一切都是可视化的,非常容易,驱动这样一个系统的代码也是如此。
正如我所说的,HTML编辑器插件的用途几乎是无限的,它允许人们非常方便地将内容输入到系统中。
如前所述,想想这篇关于堆栈溢出的文章。我必须知道或写任何HTML来写这篇文章吗?不!

zed5wv10

zed5wv104#

如果只有一个东西需要频繁编辑,我可能会设置一个文本/json文件或.CSV文件,他们可以编辑和上传,并让网站读取该文件,并在页面加载时使用数据。如果你不想在网站上设置验证系统,ftp将与此方法一起工作。
如果他们在简单的技术问题上遇到困难,我会沿着阿尔伯特·D·卡拉尔(Albert D. Kallal)的回答,为他们设置一个可以登录的文本编辑器。我为自己几乎不懂技术的父母建立了一个网站,结果效果很好。

相关问题