在 HTML/PHP 中使用 ZinoUI 的简单用户界面

Question

我想在我的网站上创建一个用户友好的界面，我可以从网站的 php 限制区域将简单的 HTML 添加到网站的另一个打开页面。

简单的 HTML（在“BASIC HTML”下面）始终具有相同的结构，我希望用户更改标题、主 div 内的文字并上传新图像。

我正在为如何做到这一点而苦苦挣扎。我的一个好主意是使用ZinoUI，这样我就可以在受限区域显示基本的 HTML 并且用户可以修改它。这将类似于“ZinoUI HTML”中显示的内容。

我真的不知道该怎么做是如何“打印”用户修改的这个新的 HTML 代码并将其插入到站点的打开页面上。 可能吗？这是更简单的方法吗？

基本 HTML

<div id="simple HTML">

    <div class="header">
        <h1>Lorem ipsum dolor sit amet..</h1>  
    </div>

    <div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    </div>

    <div class="image">
    <img src="pic_mountain.jpg" alt="Mountain View">
    </div>

</div>

。 ZinoUI HTML

        <div class="header" id="editable">
            <h1>Lorem ipsum dolor sit amet..</h1>  
        </div>

        <div class="main" id="editable">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
        </div>

        <div class="image" id="editable">
        <img src="pic_mountain.jpg" alt="Mountain View">
        </div>
<p>To activate editable control, double click on the text above.</p>
</div>

<script type="text/javascript">
$(function () {
    $("#editable").zinoEditable({
        control: "textarea",
        event: "dblclick"
    });
});
</script>  

Answer 1

首先，每个 HTML id 必须是唯一的，所以你不希望有一系列的<div id="editable">...</div>。

如果您要拥有多个可编辑 div 并使用，您可以添加一个可编辑类 <div class="editable">..</div>

$(function () {
  $(".editable").zinoEditable({
      control: "textarea",
      event: "dblclick"
  });
});

然后为保存您订阅save 事件，例如传入控件的 id 进行保存和编辑的文本：

<script type="text/javascript">

    $(function () {
        $(".editable").zinoEditable({
            buttons: {
                "Save": function (ui) {
                    $(this).zinoEditable("save");
                },
                "Cancel": function (ui) {
                    $(this).zinoEditable("close");
                }
            },
            save: function (event, ui) {
                $.post("../../request?plugin=editable", {
                    field: $(this).attr("id"),
                    value: ui.control.val()
                });
                console.log("save");
                //return false;
            }
        });
    });
</script>

"../../request?plugin=editable" 是用于保存数据的 PHP 函数（尽管替换为适合您的任何内容）。