描述一个场景：

Question

描述一个场景：

我正在阅读下面提到的代码。我正在试图弄清楚如何编程当用户点击“使用模板”按钮时，它会被插入到编辑器中。第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"如何将模板插入位于下一页的编辑器中？我还没有理解链接中存在的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页），因此无法正常工作。

请告知我哪里错了。感谢

截至1月2日的更多问题

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

代码段＃1 ，其中“使用”模板“按钮存在：

<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页上的“用户模板”按钮时，它只是让我进入下一页而不是将模板加载到编辑器中。

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

P.S。我觉得问题是第2页上的点击功能没有被第1页上提到的temp1 id按钮激活。

由于

Answer 1

嗯，人们只能在没有访问页面本身的情况下猜测（以及它的源代码）。但是，我可以对它是如何工作做出有根据的猜测。

URL参数遵循一种模式。首先，您在所有模板中都有一个相同的标记。这可能意味着令牌与模板机制本身没有任何关联。也许这是一个身份验证令牌或其他东西。虽然不相关。

然后你有模板标识（templateOne，templateTwo等等），后面是一个空的HubId。最后，你有一个goalComplete = 200，它可能对应于HTTP成功代码200（OK）。

基于此，我的猜测是他们可能在后台使用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

EDIT2：

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

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

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

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

这是一个AJAX请求（check the documentation here）。它抓取someDirectory/template.html的内容并将它们放在id =“myEditor”的元素中

在编辑器中插入模板

描述一个场景：

1 个答案:

编辑：

EDIT2：