javascript - 在编辑器中插入模板

Question

描述场景:

我正在浏览下面提到的代码。B基本上我正在尝试弄清楚如何编程以便 当用户单击“使用模板”按钮时，它将插入到编辑器中。 第 1 页: 有很多模板存在 当用户单击 上的“使用模板”按钮时，它将插入到存在于中的编辑器中 下一页(第 2 页)。

请找到下面我要查看的前两个模板的代码片段:

<div id="templatesWrap">
    <div class="template" data-templatelocation="templateone" data-templatename="Template ONE" data-templateid="" >
     <div class="templateContainer">
     <span>
      <a href="https://app.abc.com/pqr/core/compose/message/create?token=c1564e8e3cd11bc4t546b587jan31&amp;sMessageTemplateId=templateone&amp;sHubId=&amp;goalComplete=200" title="Use Template">
<img class="thumbnail" src="templatefiles/thumbnail_010.jpg" alt="templateone">
    </a>
    </span>
        <div class="templateName">Template ONE</div>
                <p>
        <a href="https://app.abc.com/pqr/core/compose/message/create?token=c1564e8e3cd11bc4t546b587jan31&amp;sMessageTemplateId=templateone&amp;sHubId=&amp;goalComplete=200" title="Use Template" class="button secondary">Use Template</a>
                </p>
        </div>
    </div>




  <div class="template" data-templatelocation="templatetwo" data-templatename="Template TWO" data-templateid="" >
    <div class="templateContainer">
    <span>
     <a href="https://app.abc.com/pqr/core/compose/message/create?token=c1564e8e3cd11bc4t546b587jan31&amp;sMessageTemplateId=templatetwo&amp;sHubId=&amp;goalComplete=200" title="Use Template">
    <img class="thumbnail" src="templatefiles/thumbnail_011.jpg" alt="templatetwo">
    </a>
    </span>
    <div class="templateName">Template TWO</div>
    <p>
    <a href="https://app.abc.com/pqr/core/compose/message/create?token=c1564e8e3cd11bc4t546b587jan31&amp;sMessageTemplateId=templatetwo&amp;sHubId=&amp;goalComplete=200" title="Use Template" class="button secondary">Use Template</a>
    </p>
    </div>
</div>

等等......

链接如何"https://app.abc.com/pqr/core/compose/message/create?token=c1564e8e3cd11bc4t546b587jan31&sMessageTemplateId=templatetwo&sHubId=&goalComplete=200"是否将模板插入下一页的编辑器中？我不明白链接中存在的 token 部分和大量 ID 我认为这是插入模板的原因。

以前有人遇到过这样的链接吗？请指教。

谢谢

更多说明:

谢谢你的回答，确实对我有帮助。我还有几个问题:

基本上，我使用 TinyMCE 4.0.8 版本作为我的编辑器。我使用的模板来自这里: https://github.com/mailchimp/email-blueprints/blob/master/templates/2col-1-2-leftsidebar.html

一些基于“Tivie”答案的问题。

1) 正如您在 "2col-1-2-leftsidebar.html " 的代码中看到的那样它没有在 <div> 中定义与您在 <div> 中定义的标签不同标签。你觉得我还可以吗 使用 "2col-1-2-leftsidebar.html " 使用它姓名？

2)我相信，出于解释目的，您已包含

`"<div contenteditable="true" id="myEditor">replaced stuff</div>`
 and 

<button id="btn">Load TPL</button>
<script>
$("#btn").click(function() {
    $("#myEditor").load("template.html");
});
</script>

在同一页面中。我对吗？ (我知道你试图在这里做出有根据的猜测，因此 只是问一下:))

就我而言，我有一个单独的页面，我在其中编写了按钮代码，就像您在 editor.html 中编写的那样，如下所示: <button id="btn">Load TPL</button> 。我的按钮定义在 <div class="templateContainer"> 内。 另外，我的模板是在单独的文件夹中定义的。所以，我必须从以下位置获取内容(HTML 模板): 该文件夹，然后插入到 TinyMCE 4.08 编辑器中。 (看起来像两步过程)。你能详细说明一下吗 我应该如何进行这里？

截至 12 月 27 日的更多问题

我修改了模板的代码，如下所示:

 <div class="templateName">Template ONE</div>
                <p>
        <a href="Here I have mentioned URL to next page where TinyMCE editor is mentioned" class="button secondary" id = "temp1">Use Template</a>
                </p>

请注意，我出于以下目的添加了一个额外的 id 属性。

如果我按照 Tivia 帖子中提到的答案，以下内容是否正确？

<script>
$("#temp1").click(function() {
    $("#sTextBody").load("FolderURL/template.html");
});
</script>

我的编辑器在第 2 页(编辑器页面)上的定义如下。

<div class="field">

 <textarea id="sTextBody" name="sTextBody" style="width:948px; max-width:948px; height: 70%"></textarea>
</div>  

我很困惑，就像我定义的脚本标签在第 1 页中，我在其中定义了所有模板相关代码 和第 2 页(编辑器)页面是不同的页面。它只是将我带到编辑器页面(第 2 页)，因此不起作用。

哪里说错了，请指教。 谢谢

截至 1 月 2 日还有更多问题

我面临的问题如下。基本上，对于第一个模板，我有以下代码。

代码片段#1，其中存在“使用"template"按钮:

<div class="templateName">Template ONE</div>
                <p>
        <a href="Here I have mentioned URL to next page where TinyMCE editor is mentioned" class="button secondary" id = "temp1">Use Template</a>
                </p>

答案中建议的功能如下:

代码片段#2，编辑器所在的位置:

<script>
$("#temp1").click(function() {
    $("#sTextBody").load("FolderURL/template.html");
});
</script>

因为，我相信在用户单击编辑器所在的“使用模板”按钮后我首先需要访问该页面，所以我在第 1 页上定义了代码片段 #1，并定义了代码片段 #2 和<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>作为第 2 页(编辑器页面)中的前两个脚本标签。但是，当我单击第 1 页上的“用户模板”按钮时，它只是让我进入下一页，而不是将模板加载到编辑器中。

我在这里做错了什么吗？请指教。

附注我感觉的问题是，第 2 页上的点击功能没有被 temp1 激活。第 1 页提到的 id 按钮。

谢谢

Answer 1

好吧，人们只能猜测，而无法访问页面本身(及其源代码)。不过，我可以对其工作原理做出有根据的猜测。

URL 参数遵循一定的模式。首先，您有一个在所有模板中都相同的 token 。这可能意味着 token 与模板机制本身没有任何相关性。也许它是一个身份验证 token 或其他东西。但不相关。

然后您将获得模板标识(templateOne、templateTwo 等...)，后跟一个空的 HubId。最后，您有一个 goalComplete=200，它可能对应于 HTTP 成功代码 200(正常)。

<小时/>

基于此，我的猜测是他们可能在后台使用 AJAX，从服务器获取这些模板。然后，通过 JScript，这些模板被插入到编辑器框中。

使用 JQuery，这样的事情是微不足道的。这是一个例子:

template.html

<div>
    <h1>TEST</h1>
    <span>This is a template</span>
</div>

editor.html

<!DOCTYPE HTML>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div contenteditable="true" id="myEditor">
    replaced stuff
</div>
<button id="btn">Load TPL</button>
<script>
$("#btn").click(function() {
    $("#myEditor").load("template.html");
});
</script>
</body>
</html>

编辑:

1) 嗯，由于这些模板非常复杂并且包含 CSS，您可能希望将它们与编辑器页面分开(否则模板的 CSS 会弄乱页面的 CSS)。 但是，由于您使用的是 TinyMCE，因此它附带了内置的模板管理器，因此您可能想要使用它。在这里查看此链接 http://www.tinymce.com/wiki.php/Configuration:templates用于文档。

2)我认为 1 回答了您的问题，但为了以防万一，我上面的方法适用于任何目录中的任何页面，只要它位于同一域中。示例:

<script>
$("#btn").click(function() {
    $("#myEditor").load("someDirectory/template.html");
});
</script>

我建议您查看此页面以了解使用 TinyMCE http://www.tinymce.com/wiki.php/Configuration:templates 的具体信息

编辑2:

让我解释一下上面的代码:

$("#btn").click(function() { });

这基本上告诉浏览器当您单击 id="btn"的元素时运行括号内的代码

$("#myEditor").load("someDirectory/template.html");

这是一个 AJAX 请求 ( check the documentation here )。它获取 someDirectory/template.html 的内容并将它们放置在 id="myEditor"

的元素内