0

我需要使用Textile作为我的标记语言为我的django网站创建一个实时预览容器（如 stackoverflow 和 Reddit） 。

实时预览 - Reddit

有没有办法在客户端做到这一点？（不使用ajax？）

从视图中解析代码很简单：

{% load markup %}
{{ theme.content|textile }}

（不用说，我遵循了文档并包含'django.contrib.markup'在我的INSTALLED_APPS设置中。）

为简单起见，假设我不需要 IE 支持。我的 JS 如下所示：

function change_preview() {
    var fragment = document.createDocumentFragment();
    // I am no sure what should I put here:
    fragment.appendChild(document.createTextNode('{{ theme.content|textile }}'))
    document.getElementById("preview").appendChild(fragment);
}

window.onload = function() {
    var content_box = document.getElementById('id_content');
    content_box.addEventListener("input", change_preview , false );
}

和 HTML：

<textarea id="id_content" rows="10" cols="40" name="content"></textarea>
<div id = "preview"></div>

我还发现了这个 JS 库。在客户端与服务器端的PyTextile一起使用它是一个好主意吗？

最佳实践是什么？

我正在寻找非 jQuery 解决方案，但如果没有其他方法，我会接受。

先感谢您。

4

1 回答 1

1

由于 Textile 指定了什么标记对应于什么 html，我认为 JS 库和 Py 库之间不兼容的可能性不大。

在您的即时预览更新脚本中，您可能希望使用keyup事件而不是input事件，因为后者仅在textarea失去焦点时才会触发。

window.onload = function() {
    var content_box = document.getElementById('id_content');
    content_box.addEventListener("keyup", change_preview , false );
}

要使用不基于 jQuery 的 Ben Daglish 的库，您的事件处理程序将如下所示：

function change_preview() {
    var content_box = document.getElementById('id_content');
    var html = convert(content_box.value);
    document.getElementById('preview').innerHTML=html;
}
于 2012-06-24T22:07:18.793 回答