使用jQuery创建HTML模板

我希望简化创建html电子邮件的过程，简化拖放不同元素以编译最终产品的过程

我已经创建了一系列html内容块（1栏故事、2栏故事、广告块等），并希望创建一些内容，允许用户：

根据需要将html内容块元素拖到后台，并在任意点对其进行排序

编辑每个内容块中的文本和图像区域

允许我导出最终编译的html-可用于第三方电子邮件管理应用程序

---

我已经查看了jquerysortable和draggable，但知道它们只是图片的一小部分。我想知道是否有人创建了类似的东西，或者能够为我指出正确的方向来实现这一点？

试试Jquery模板，它为您提供了更大的灵活性

来自Jquery示例

<script id="movieTemplate" type="text/x-jquery-tmpl">  //this is template 
    <li><b>${Name}</b> (${ReleaseYear})</li>
</script>

<ul id="movieList"></ul>

<script>
var movies = [  // data for the template 
    { Name: "The Red Violin", ReleaseYear: "1998" },
    { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
    { Name: "The Inheritance", ReleaseYear: "1976" }
];

/* Render the template with the movies data and insert
   the rendered HTML under the "movieList" element */

$( "#movieTemplate" ).tmpl( movies )  
    .appendTo( "#movieList" );
</script>

//这是一个模板
${Name}（${ReleaseYear}）

var movies=[//模板的数据
{名称：“红色小提琴”，发行年份：“1998”}，
{名称：“闭上眼睛”，发布年份：“1999”}，
{名称：“遗产”，发布年份：“1976”}
];
/*使用电影数据渲染模板并插入
“movieList”元素下呈现的HTML*/
$（“#movieTemplate”）.tmpl（电影）
.附于（“#movieList”）；

如果您想要更多功能，可以尝试HandleBar.JS

---

是的，这是可能的，我以前就已经建立了这个工具

一些陷阱：

• 您还需要一些服务器端代码，因为最终用户使用的任何浏览器都会稍微更改代码。之后，我使用了一些后处理来清除不必要/有害的代码
• 避免使用所见即所得编辑器，因为您将花费大量时间删除它们的垃圾，同时尝试保持用户想要的样式。相反，可以使用

  contenteditable

  属性，以及您自己的简单样式选项来选择粗体、斜体和其他任何您想要提供的样式
• 注意在网络浏览器（使用CSS3）中可以做的、在电子邮件中做不到的所有事情。首先在电子邮件客户端中测试模板，然后将它们转换为模块

---

你需要一位编辑吗？如果你看过这家公司发送的电子邮件的长度和复杂性（这本身就是另一个问题），你也会这么想的。我想这是不可能的。考虑到所有不同电子邮件客户端的复杂性和无数细微差别，如果模板经过测试（litmus）并且模块位于自包含的表中，这将是非常困难的，这应该是小菜一碟！谢谢你，我去看看。我应该担心他们发布了这个警告吗？“jQuery团队已经决定不让这个插件通过测试版。它不再被积极开发或维护。”

/* Render the template with the movies data and insert
   the rendered HTML under the "movieList" element */

$( "#movieTemplate" ).tmpl( movies ).appendTo( "#movieList" );