rte.html

<link
	rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
	integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
	crossorigin="anonymous">
<link
	rel="stylesheet"
	href="https://ca1.qualtrics.com/apps/applied-predictive-technologies/bootstrap_custom.css">

<style>

	.rte-input {
		height: 450px;
		cursor: text;
		overflow: auto;
	}

	@media(max-width:480px){
		.link-group {
		margin-top: 5px;
		}
	}

	/* Styles on inputs are very specific in Qualtrics, have to use !important to get new rules to to apply */

	.force-parent-lh {
		line-height: inherit !important;
	}

	.form-control-style {
		color: #555 !important;
		border: 1px solid #ccc !important;
		border-radius: 4px !important;
		padding: 6px 12px !important;
	}

	.link-input {
		border-top-right-radius: 0px !important;
		border-bottom-right-radius: 0px !important;
	}

	li, ul {
		list-style: disc;
		margin-left: 10px;
	}

</style>

<div class="rte bs">
	<div class="btn-toolbar">
		<div class="btn-group">
			<button type="button" class="btn btn-default bold-button">
				<i class="fa fa-bold force-parent-lh"></i>
			</button>
			<button type="button" class="btn btn-default italic-button">
				<i class="fa fa-italic force-parent-lh"></i>
			</button>
			<button type="button" class="btn btn-default underline-button">
				<i class="fa fa-underline force-parent-lh"></i>
			</button>
			<button type="button" class="btn btn-default list-button">
				<i class="fa fa-list-ul force-parent-lh"></i>
			</button>
		</div>
		<div class="btn-group link-group">
			<div class="input-group" style="max-width: 225px">
				<input type="text" class="form-control-style link-input" placeholder="http://..." style="max-width:225px;font-size:17px">
				<span class="input-group-btn">
					<button type="button" class="btn btn-default link-button" nosubmit>Create link</button>
				</span>
			</div>
		</div>
	</div>
	<br>
	<div class="form-control-style rte-input" contenteditable></div>
</div>

<script>

	function unescapeHtml(text) {
		return text.replace(/&amp;/g, '&')
			.replace(/&lt;/g, '<')
			.replace(/&gt;/g, '>')
			.replace(/&quot;/g, '"')
			.replace(/&#039;/g, "'");
	}

	window.connectEditor = function (question) {
		var customInput = jQuery('#' + question.questionId + ' .QuestionBody .rte-input');
		var qualtricsInput = jQuery('#QR\\~' + question.questionId);
		var answer = unescapeHtml(qualtricsInput.val());
		customInput.html(answer);
		qualtricsInput.hide();
	}

	jQuery(document).ready(function () {

		function activateStyle(style, element) {
			var rte = jQuery(element).closest('.rte').find('.rte-input');
			rte.focus();
			if (!document.queryCommandEnabled(style)) {
				return;
			}
			document.execCommand(style, false, null);
		}

		function getSelectionParentElement() {
			var parentEl = null, sel;
			if (window.getSelection) {
				sel = window.getSelection();
				if (sel.rangeCount) {
					parentEl = sel.getRangeAt(0).commonAncestorContainer;
					if (parentEl.nodeType != 1) {
						parentEl = parentEl.parentNode;
					}
				}
			} else if ( (sel = document.selection) && sel.type != "Control") {
				parentEl = sel.createRange().parentElement();
			}
			return parentEl;
		}

		function createLink(element) {
			var url = jQuery(element).closest('.rte').find('input');
			var rte = jQuery(element).closest('.rte').find('.rte-input');
			var html = rte.html();
			html += "<a href='" + url.val() + "'>" + url.val() + "</a>";
			rte.html(html);
			url.val('');
		}

		jQuery('.rte-input').off('keyup');
		jQuery('.rte-input').keyup(function (e) {
			if (e.keyCode === 13) {
				e.stopPropagation();
				var el = getSelectionParentElement()
				if(el.nodeName == "LI"){
					var newline = jQuery("<li><br type='_moz'/></li>");
					jQuery(el).after(newline);
					var caret = 0;
					var range = document.createRange();
					range.setStart(newline.get(0), caret);
					range.setEnd(newline.get(0), caret);
					var sel = window.getSelection();
					sel.removeAllRanges();
					sel.addRange(range);
				}
				else{
					document.execCommand('insertText',false,'\n');
				}
			}
		});

		jQuery('.bold-button').off('click');
		jQuery('.bold-button').on('click', function () {
			activateStyle('bold', this);
		});

		jQuery('.italic-button').off('click');
		jQuery('.italic-button').on('click', function () {
			activateStyle('italic', this);
		});

		jQuery('.underline-button').off('click');
		jQuery('.underline-button').on('click', function () {
			activateStyle('underline', this);
		});

		jQuery('.list-button').off('click');
		jQuery('.list-button').on('click', function () {
			activateStyle('insertUnorderedList', this);
		});

		jQuery('.link-button').off('click');
		jQuery('.link-button').on('click', function (e) {
			createLink(this);
		});

		jQuery('.rte-input').off('blur');

		jQuery('.rte-input').on('blur', function (event) {
			var questionId = jQuery(event.target).closest('.QuestionOuter').prop('id');
			var customInput = jQuery('#' + questionId + ' .QuestionBody .rte-input');
			var qualtricsInput = jQuery('#QR\\~' + questionId);
			qualtricsInput.val(customInput.html());
		});
	});

</script>