iceEditor编辑器开发插件是如此的简单,插入代码语言示例

代码高亮插件为:iceCode(我已经开源,欢迎大家使用,如今集成到了iceEditor富文本编辑器中)

iceCode官方地址https://www.iceui.net/iceCode.html

iceCode码云地址https://gitee.com/iceui/iceCode

//实例化
var e = new ice.editor('content');

//代码语言插件
e.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(){
			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;
		}	
	}
});

//创建
e.create(); 

编辑器最终效果图如下,前端页面代码高亮效果如上


« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。