Support for custom HTML editors

This commit is contained in:
witzig 2017-03-02 18:52:40 +01:00
parent 78d262ac8d
commit a11d95f3d7
22 changed files with 255 additions and 133 deletions

View file

@ -19,72 +19,21 @@
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<a class="btn btn-default" role="button" data-toggle="collapse" href="#mergeReference" aria-expanded="false" aria-controls="mergeReference">Merge tag reference</a>
<div class="collapse" id="mergeReference">
<p>
Merge tags are tags that are replaced before sending out the message. The format of the merge tag is the following: <code>[TAG_NAME]</code> or <code>[TAG_NAME/fallback]</code> where <code>fallback</code> is an optional text value used
when <code>TAG_NAME</code> is empty.
</p>
<ul>
<li>
<code>[EMAIL]</code> email address of the subscriber
</li>
<li>
<code>[FIRST_NAME]</code> first name of the subscriber
</li>
<li>
<code>[LAST_NAME]</code> last name of the subscriber
</li>
<li>
<code>[FULL_NAME]</code> first and last names of the subscriber joined
</li>
<li>
<code>[LINK_UNSUBSCRIBE]</code> URL that points to the preferences page of the subscriber
</li>
<li>
<code>[LINK_PREFERENCES]</code> URL that points to the unsubscribe page
</li>
<li>
<code>[LINK_BROWSER]</code> URL to preview the message in a browser
</li>
<li>
<code>[SUBSCRIPTION_ID]</code> Unique ID that identifies the recipient
</li>
<li>
<code>[LIST_ID]</code> Unique ID that identifies the list used for this campaign
</li>
<li>
<code>[CAMPAIGN_ID]</code> Unique ID that identifies current campaign
</li>
</ul>
<p>
In addition to that any custom field can have its own merge tag.
</p>
</div>
<label for="editor_name" class="col-sm-2 control-label">HTML Editor</label>
<div class="col-sm-10">
<select class="form-control" id="editor_name" name="editor_name">
<option value=""> Select </option>
{{#each editors}}
<option value="{{name}}">{{label}}</option>
{{/each}}
</select>
</div>
</div>
<div class="form-group">
<label for="template-html" class="col-sm-2 control-label">Template content (HTML)</label>
<div class="col-sm-10">
{{#if disableWysiwyg}}
<div class="code-editor" id="template-html">{{html}}</div>
<input type="hidden" name="html">
{{else}}
<textarea class="form-control summernote" id="template-html" name="html" rows="8">{{html}}</textarea>
{{/if}}
</div>
</div>
<div class="form-group">
<label for="template-text" class="col-sm-2 control-label">Template content (plaintext)</label>
<div class="col-sm-10">
<textarea class="form-control" id="template-text" name="text" rows="10">{{text}}</textarea>
<div id="editor-template">
<div>
<input type="hidden" name="text" value="{{text}}">
<input type="hidden" name="html" value="{{html}}">
</div>
</div>
@ -102,5 +51,42 @@
</div>
</div>
</form>
<div style="display: none">
{{#each editors}}
{{#if templates}}
<div class="form-group" id="{{name}}-template">
<label for="editor_data_{{name}}" class="col-sm-2 control-label">{{label}} Template</label>
<div class="col-sm-10">
<select class="form-control" id="editor_data_{{name}}" name="editor_data">
{{#each templates}}
<option value='{"template":"{{name}}"}'>{{label}}</option>
{{/each}}
</select>
</div>
</div>
{{/if}}
{{/each}}
<div id="summernote-template">
<input type="hidden" name="text" value="{{text}}">
<input type="hidden" name="html" value="{{html}}">
</div>
<div id="codeeditor-template">
<input type="hidden" name="text" value="{{text}}">
<input type="hidden" name="html" value="{{html}}">
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
$('select#editor_name').on('change', function() {
var editor = this.value || 'summernote';
$('#editor-template').children().first().replaceWith(
$('#' + editor + '-template').clone()
);
});
});
</script>