iceEditor
/
demo.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>iceEditor-演示DEMO</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body style="margin: 100px;">
<div style="text-align: center;font-size:20px;margin-bottom: 20px;">演示DEMO</div>
<div style="text-align: center;font-size:15px;margin-bottom: 20px;">官方：<a href="https://www.iceui.cn/iceEditor.html" target="_blank">https://www.iceui.cn/iceEditor.html</a></div>
<form action="#"  method="post">
    <h1>完整demo</h1>
    <textarea name="content" id="content"></textarea>
	<button type="submit">提交</button/>
</form>

<script type="text/JavaScript" src="src/iceEditor.js"></script>
<script>
 //自定义编辑器菜单
ice.editor("content",function(e){
	this.uploadUrl = "src/upload.php";
	this.pasteText = false;
	this.screenshot = true;
	this.screenshotUpload = true;
	//this.menu=['fontSize','foreColor','bold','italic','underline','strikeThrough','line','justifyLeft','justifyCenter','justifyRight','line','table','insertImage','video'];


	//下拉菜单类型
	this.plugin({
		menu:'代码语言',
			name:'codeLanguages',
			dropdown:`
				<div class="iceEditor-codeLanguages" style="padding:10px 20px;">
					<div>iceCode代码高亮</div>
					<select>
						<option disabled selected>代码语言</option>
						<option value ="html">HTML/XTML</option>
						<option value ="css">CSS</option>
						<option value ="js">JS</option>
						<option value="php">PHP</option>
						<option value="python">Python</option>
						<option value="java">JAVA</option>
						<option value="sql">SQL</option>
						<option value="go">GO</option>
						<option value="cpp">C++</option>
						<option value="csharp">C#</option>
						<option value="c">C</option>
					</select>
				</div>`,
			success:function(e,z){
				//获取content中的按钮
				var select = e.getElementsByTagName('select')[0];
				//设置点击事件
				select.onchange=function(){
					//判断光标是否在pre标签中
					if(z.inNodeParent(z.range.getRangeAt(0).endContainer,'pre')){
						var pre = z.range.getRangeAt(0).endContainer.parentNode;
						if(pre.tagName == 'PRE'){
							pre.className = 'iceCode:'+select.value;
						}
						return;
					}
					var str = z.getSelectHTML().replace(/<\s*\/p\s*>/ig,"\n").replace(/<[^>]+>/g,'').replace(/\n/g,'<br>').trim();
					str = str.length?str:' ';
					z.element.focus();
					var range = z.range.getRangeAt(0);
					var frag = range.createContextualFragment('<pre class="iceCode:'+select.value+'">'+str+'</pre>');
					var lastNode = frag.firstChild.lastChild;
					range.insertNode(frag);
					range.setStart(lastNode,0);
					range.setEnd(lastNode,0);
					range.collapse();
					select.getElementsByTagName('option')[0].selected = true;
				}
			}
	});

	//function方式
	this.plugin({
		menu:'function方式',
		name:'click',
		click:function(e,z){
			z.setText('hello world');
		}
	});
	//function方式
	this.plugin({
		menu:'<svg class="icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M689.25060779 62.95703666C877.07192889 62.95703666 997.45185223 213.56847445 997.45185223 416.26889443c0 157.29853667-142.33448334 330.53203001-422.76788224 525.18608669a110.10048 110.10048 0 0 1-125.36793998 0C168.88263111 746.80092445 26.54814777 573.56743111 26.54814777 416.26889443 26.54814777 213.56847445 146.92807111 62.95703666 334.74939221 62.95703666c67.82976 0 113.83845888 23.70218667 177.25060779 77.47811555C575.42428445 86.67136 621.42084779 62.95703666 689.25060779 62.95703666z m0 71.84687445c-47.14951111 0-79.94178333 17.28208555-133.07448889 62.62328889-2.46366777 2.09957888-16.384 14.07810333-20.41325113 17.50053888a36.77297778 36.77297778 0 0 1-47.52573554 0c-4.02924999-3.43457223-17.94958222-15.40096-20.41325113-17.50053888-53.13270557-45.34120334-85.92497778-62.62328889-133.07448889-62.62328889C191.35905223 134.80391111 99.36592555 249.4676389 99.36592555 414.9460389 99.36592555 541.12711111 228.53252779 697.7338789 491.10129778 879.30500779a36.80938667 36.80938667 0 0 0 41.79740444 0C795.46747221 697.74601443 924.63407445 541.12711111 924.63407445 414.9460389c0-165.4784-91.99312555-280.14212779-235.38346666-280.14212779z" p-id="670"></path></svg>',
		name:'heard',
		click:function(e,z){
			z.setText('hello world');
		}
	});
	//execCommand命令
	this.plugin({
		menu:'删除命令',
		name:'del',
		data:'delete'
	});
	//下拉菜单类型
	this.plugin({
		menu:'下拉菜单',
		name:'dropdown',
		dropdown:'<div class="iceEditor-exec" data="copy" style="padding:10px 20px;">复制选中的文字</div>',
	});
	//弹出层类型
	this.plugin({
		menu:'弹窗演示',
		name:'popup',
		style:'.demo-p{margin-bottom:10px}.demo-button{padding:0 10px}',
		popup:{
			width:230,
			height:120,
			title:'我是一个demo',
			content:'<p class="demo-p">在光标处插入hello world!</p> <button class="demo-button" type="button">确定</button>',
		},
		success:function(e,z){
			//获取content中的按钮
			var btn = e.getElementsByTagName('button')[0];
			//设置点击事件
			btn.onclick=function(){
				z.setText('hello world');
				//关闭本弹窗
				e.close()
			}
		}
	});
	this.create();
	this.setValue('Hi,My name is iceui。');
})
</script>

</body>
</html>