Using Content Tools in vue

Policy.vue

/*
 * A page where users ("agents") can edit text on a page template that is filled with model data when displayed for guests.
 * Uses content tools library: http://getcontenttools.com/
 * Agents can enter #variable# to display client model data inside text blocks (e.g. client name, etc.)
 */

<template>
	<div>

   		<div ref="policy"
			class="container-fluid"
			:class="{ 'template-editing': editing }">
		</div>
		
		<div ref="auto" id="auto-option" class="panel panel-hero section--option" v-show="agent.showAuto">
			<div class="panel-body">
				<div class="form-group">
					<!-- toggle is global component -->
					<toggle label="Display Option #1" name="showAuto1" v-on:toggle="toggleOption" :checked="agent.showAuto1"></toggle>
				</div>
				<div class="form-group">
					<toggle label="Display Option #2" name="showAuto2" v-on:toggle="toggleOption" :checked="agent.showAuto2"></toggle>
				</div>
				<button type="button" class="btn btn-primary btn-block" v-on:click="saveOptions">Save</button>
			</div>
		</div>

	</div>
</template>

<script>

	import ContentTools from 'content-tools';
	import Policy from './Policy';

	export default {

		props: ["user"],

		components: { Policy },

		data() {
			return {
				agent: {},
				editing: false,
				$template : null,
			}
		},

		watch: {
			editing(isEditing){

				if (isEditing){
				//when user enters edit mode, display #variable# format.

					$('span[data-field="NAME"]', this.$template).replaceWith('#name#');
					$('span[data-field="RENEW_MO"]', this.$template).replaceWith('#renew_month#');
					$('span[data-field="DED_AMOUNT"]', this.$template).replaceWith('#deductible#');
					$('span[data-field="DISCOUNTS"]', this.$template).replaceWith('#discounts#');

				}else{
				//when user is previewing, display client data not variables.

					$('*[data-editable]', this.$template).each( (i, div) => {
						const $div = $(div);
						const html = this.replaceAll($div.html(), 
							[
								'#name#',
								'#renew_month#',
								'#deductible#',
								'#discounts#'
							],
							[
								'<span data-field="NAME">'+this.fields.FIRST_NAME+' '+this.fields.LAST_NAME+'</span>',
								'<span data-field="RENEW_MO">'+this.fields.RENEW_MO+'</span>',
								'<span data-field="DED_AMOUNT">'+this.fields.DED_AMOUNT+'</span>',
								'<span data-field="DISCOUNTS">'+this.fields.DISCOUNTS+'</span>'
							]
						);

						$div.html(html);
					});

				}
			}
		},

		created() {

			this.agent = this.user;

			this.editor = ContentTools.EditorApp.get();

			ContentTools.StylePalette.add([
			    new ContentTools.Style('Subtitle', 'text-block--subtitle', ['p']),
			    new ContentTools.Style('Title', 'text-block--title', ['p'])
			]);

			ContentTools.DEFAULT_TOOLS = [
			    [
			        'bold',
			        'italic',
			        'link',
			        'align-left',
			        'align-center',
			        'align-right'
			    ], [
			        'heading',
			        'subheading',
			        'paragraph',
			        'unordered-list',
			        'ordered-list',
			        'table',
			        'indent',
			        'unindent',
			        'line-break'
			    ], [
			        'undo',
			        'redo',
			        'remove'
			    ],
			    [
					'name',
					'deductible',
					'discounts'
			    ],
				[
					'renew'
				]
			];

			this.fetch();

		},

		methods: {

			replaceAll(str, find, replace) {
				let result = str;
				const len = find.length;
				for (let i = 0; i < len; i++){
					let regex = new RegExp(find[i], "g");
					str = str.replace(regex, replace[i]);
				}

				return str;

			},

			toggleOption(op) {
				this.agent[op] == 0 ? this.agent[op] = 1 : this.agent[op] = 0;

				$('#'+op).fadeToggle('slow');
			},

			fetch() {

				return $.get('/api/template').done( data => {
					this.$refs.policy.innerHTML = data;

					this.$template = $(this.$refs.policy);

					this.fields = JSON.parse($('#policy_fields').text());

					this.editor.init('*[data-editable]', 'data-name');

					this.editor.addEventListener('start', ev => this.editing = true );
					this.editor.addEventListener('stop', ev => this.editing = false );
					this.editor.addEventListener('saved', ev => this.saveEditor(ev) );

					this.editor.syncRegions();
      
          				//fade in after load
					let len = $(this.$refs.policy)
						.find('img').on('load error', () => {
							if(--len === 0) {
	  							$(this.$refs.policy).fadeIn(() => {
									this.agent.showAuto && this.showAutoOptions();
								});
							}
						}).length;

					//to edit tooltip data, have to click on tooltip image to keep tooltip open
					$('.tip img').on('click', this.toggleTooltip);

				});
			},

			showAutoOptions() {
				const pos = $('#auto').position();
				$('#auto-option').css({
					left: pos.left,
					top: pos.top,
					opacity: 1
				});
			},

			toggleTooltip(e) {
				let $div = $(e.target).next();
				$div.toggleClass('show');
			},

			saveEditor(ev) {

				let regions = ev.detail().regions;
				if (Object.keys(regions).length == 0){
					return;
				}

				this.editor.busy(true);

				let payload = {};

				for (name in regions) {
					payload[name] = regions[name];
				}

				$.post('/template', payload)
					.done(data => {
						flash('Your changes have been saved.');
					})
					.fail((jqxhr, status, error) => {
						window.error('There has been a problem saving your updates: ' + jqxhr.responseText)
					})
					.always(() => {
						this.editor.busy(false);
					});
			},

			saveOptions() {

				$.post('/user/' + this.agent.id + '/profile', this.agent)
					.done(data => {
						flash('Your changes have been saved.');
					})
					.fail((jqxhr, status, error) => {
						window.error('There has been a problem saving your updates: ' + error)
					});

			}

		}

	}

</script>