前端在实例化编辑器ueditor中插入指定内容

在实例化编辑器ueditor中插入指定内容

1.首先引入

<script type="text/javascript" src="./ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="./ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" src="./ueditor/lang/zh-cn/zh-cn.js"></script>

2.首先引入

<div class="DetailsCom_main_text">
	<p class="p_name">模板内容</p>
	<div class="templateContainer boxEditSms" style="position: relative;">
		<div class="editBar">
			<script id="editor" class="message_area" type="text/plain" >
				尊敬的{姓名}，您好！{活动名称}与您相约深圳福田会展中心，参观报名点击{报名链接}，填写报名信息，恭候您的光临！
			</script>
		</div>
		<div class="quicksWrap">
			点击
			<span class="quicks">
				<i class="name ">姓名</i><i>活动名称</i><i class="link ">报名链接</i>
			</span>
			可在通知中插入{姓名}、{报名链接}等信息，发送时将用实际数据替换
		</div>
	</div>
</div>

js片段

//实例化编辑器
var ue= UE.getEditor('editor', {
	toolbars: [[ //这些是你要显示的编辑图片
		'fullscreen', 'source', '|', 'undo', 'redo', '|',
		'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
		'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
		'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
		'link', 'unlink', '|',
		'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify',
		'|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
		'simpleupload',
	]]
});

// ueditor ready
ue.addListener('ready', function () { //重点
	// 插入固定字段
	$('.boxEditSms .quicks i').click(function () {
		var text = $(this).text();
		$(this).addClass('active');
		console.log(text)
		ue.focus();
		ue.execCommand('inserthtml', '{' + text + '}'); //插入
	});
});