Javascript 在编辑器中插入模板 描述一个场景：

我正在浏览下面提到的代码。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>

在同一页上。我说得对吗？（我知道你在这里试图做出一个有根据的猜测，因此 只是问：））

在我的例子中，我有一个单独的页面，其中我为按钮编写了代码，就像您在editor.html中编写的一样，如下所示：

加载第三方物流

。我的按钮在

中定义。 此外，我的模板在单独的文件夹中定义。因此，我必须从中获取内容（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>

$（“#temp1”）。单击（函数（）{
$（“#sTextBody”）.load（“FolderURL/template.html”）；
});

我的编辑器的定义如第2页（编辑器页）所示

我很困惑，比如，我定义的脚本标记在第1页，在那里我定义了所有与模板相关的代码 第2页（编辑器）页是另一页。它只是将我带到编辑器页面（第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>

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

模板一

答案中建议的功能如下：

 <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：

<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>

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

$（“#temp1”）。单击（函数（）{
$（“#sTextBody”）.load（“FolderURL/template.html”）；
});

因为，我相信我首先需要在用户单击编辑器所在的“Use Template”（使用模板）按钮后访问该页面，我在第1页定义了代码段1，并将代码段2和定义为第2页（编辑器页面）中的前两个脚本标记。但当我单击“user Template”（用户模板）时，仍然需要访问该页面“第1页上的按钮，它只是让我进入下一页，而不是将模板加载到编辑器中

我做错什么了吗？请告知

另外，我觉得问题在于第2页上的点击功能没有被第1页提到的

temp1

id按钮激活

---

谢谢

好吧，在没有访问页面本身（及其源代码）的情况下，人们只能猜测。然而，我可以对它的工作原理做出有根据的猜测

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>

<!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>

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

---

这是一个AJAX请求（）。它获取

someDirectory/template.html

的内容，并将它们放在id=“myEditor”

元素中。好吧，如果我们不知道这个链接指向的API，我们很难说太多。我可以猜测，goalComplete=200意味着在goalComplete发生时返回状态代码200，但这并不是特别有用。更多详细信息？代码段#2必须位于模板所在的同一页面中inserted@Tivie我已通过将id传递到第二页来处理该问题。我相信

$.load（）

不起作用，我需要使用tinyMCE 4.X函数来插入内容，你对此有什么想法吗？很抱歉，除了我在答案上发布的链接，我对tinyMCE API不太了解，无法为你指出正确的方向。不用担心！！我感谢你的帮助。非常感谢！！谢谢你的回答。你能在我更新的问题中回答我更多的问题吗？谢谢。我已经在使用TinyMCE的内置模板选项，但除此之外，我还想使用我自己的方法，因为稍后我想为用户指定“空白模板”选项和“保存模板”功能。请检查我对已编辑问题的尝试。Thanks@Jack看看这是否有帮助谢谢你的解释。你能看看我面临的问题吗？我已经在今天更新了我的问题。谢谢

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

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