Question

我很难为这个问题找到解决方案。

我正在为微型网站建立一个WYSIWYG设计师。这些微型网站的模板将由中间用户提供，最终用户将操纵这些模板。因此，该应用程序实际上有两组用户：模板驱动程序和最终用户。想想MailChimp。

这意味着我的Ember应用程序将从模板构建器的模板开始，比如说

<h1>An awesome product</h1>
<h2 contenteditable="true">Subtitle away</h2>
<p>{{#if optionA}} One thing {{else}} Another thing {{/if}}<p>

最终用户选择此模板后，就可以自定义它。有一些要求：

页面上会有静态的，不可编辑的部分（上面h1）
页面上会有静态的可编辑部分（h2以上）
会有影响布局，样式等的选项（上面p）

到目前为止，我的尝试已经引导我构建一个带有字符串和上下文的把手助手，并返回一个渲染的模板。这是因为上面的模板实际上将作为字符串来自数据库 - 请记住，它是用户生成的。

这意味着，在我的应用程序的模板中，它看起来像

<div class="preview">
  {{preview-userTemplate template context}}}
</div>

，其中

template: '<h1>An awesome product</h1><h2 contenteditable="true">Subtitle away</h2><p>{{#if optionA}} One thing {{else}} Another thing {{/if}}<p>',
context: {optionA: true}

现在，这实际上是有效的，因为如果context更新它会更新，所以我可以在旁边添加控件，以便最终用户操作这些选项。所以我可以控制那些（更多）。

这是WYSIWYG内容编辑给我带来麻烦。在上面的模板中（来自我的模板构建器用户），我希望他们能够将contenteditable="true"添加到其模板中的位置，最终用户可以在其中更改内容。

现在，需要保存这些更改。理想情况下，在内联编辑完成后，我将能够从DOM 中检索实例视图的模板。这可能吗？需要保留原始的{{data}}占位符。

或者，我可以创建一个视图/组件，因此模板构建器会执行以下操作：

<h1>An awesome product</h1> {{#editable}} <h2>Subtitle away</h2> {{/editable}} <p>{{#if optionA}} One thing {{else}} Another thing {{/if}}<p>

但这似乎需要进行大量的改编才能让编辑坚持下去 - 我现在还不确定如何去做。

你们觉得怎么样？我有一个更容易解决的问题吗？感谢您的任何指示！

为Ember应用程序提供WYSIWYG架构的建议

0 个答案: