html代码编辑器sp,在线HTML编译，文本关键字高亮显示，富文本编辑实现大概思路...

????最近被安排做了一个HTML在线编译功能，也利用这个机会对HTML在线编译，关键字高亮，富文本编辑器等的实现做了一些比较表面的研究，做简要记录，以便再次遇到作为参考。

????在线HTML编译

????首先需要一个能够输入及展示HTML代码的文本框，若只是显示普通HTML代码，使用即可(w3school在线编译功能即如此)。若还要在其中实现标签及关键字高亮，则使用

(百度在线编译功能)，这里需要将

设置为contentEditable="true",将其设置为可编辑状态。

????使用实现，textarea为代码输入框，旁边需要一个iframe来展示代码运行结果。

????核心JS代码：

????function run(){

var iframeContent=$(".mysource").val();

var iFrame=document.getElementById("container").contentWindow;

iFrame.document.open();

iFrame.document.write(iframeContent);

iFrame.document.close();

}

????var iframeContent=$(".mysource").val()来获取textarea内容；

????var iFrame=document.getElementById("container").contentWindow得到iframe对象；

????iFrame.document.write(iframeContent)将textarea内容写入iframe得到结果。

????若涉及到从外部向textarea导入代码，可考虑设置不可见iframe在textarea之前，iframe中也需设置textarea，获取iframe中textarea内容，并将其赋给显示代码处的textarea，核心代码如下：

????function go1(){

????var win = document.getElementById(‘demo1‘).contentWindow.document.getElementById(‘code‘).value;

????document.getElementById("mysource").value=win;

}

????文本关键字高亮

????通常用

来实现，核心思想为获取div中文本，并用设置了高亮的相同内容替换之。

????核心JQ代码：

????$(document).ready(function() {

???? var key = "高亮字";

???? $("#keyword").html(function() {

???? return $(this).text().replace(key,""+key+"");

???? });

????多关键字：

????

txt.innerHTML = txt.innerHTML.replace(/(文章)|(关键字)|(功能)/gi,"$1$2$3");

txt为div。

????富文本编辑器

????富文本编辑器往往需要对字体大小，颜色，插入图片，表情等做众多改变，目前用得最多、兼容性最好的还是iframe方式。

????先将iframe标签通过：

????var edit=document.getElementById("myedit").contentWindow;

????edit.document.designMode="On";

????edit.document.contentEditable="ture";????

将其设置为可编辑状态。换而言之，HTML在线编辑器就是一个可编辑的iframe。

具体功能实现：

浏览器已经提供了实现这些功能的接口execCommand：

iframe.contentWindow.document.execCommand(cmd, isDefaultShowUI, value);

????execCommand具体使用参见下篇博文。

????

????以上为在线HTML编译，文本关键字高亮，富文本编辑器实现大致思路，由于他们功能看似类似，实则不然，所以放在一起以便对比讨论。

????新手，欢迎高手批评指正。

原文：http://www.cnblogs.com/xiangxs/p/5120574.html

html代码编辑器sp,在线HTML编译，文本关键字高亮显示，富文本编辑实现大概思路...相关推荐

哪款Mac代码编辑器好用？Mac文本代码编辑器推荐—-CudaText for Mac
一款好的代码编辑器可以使工作更有效率,今天要给大家推荐一款Mac文本代码编辑器推荐--CudaText.CudaText Mac版是一款轻便好用的跨平台文本代码编辑器,具有很好的配置可能性和许多高级功 ...
代码编辑器控件ICSharpCode.TextEditor的关键字高亮以及代码折叠功能
SharpDevelop (#develop)有很多"副产品",其中最出名的应算SharpZipLib (#ziplib),纯C#的ZIP类库, 而在SharpDevelop (# ...
java 富文本 xss_KindEditor开源富文本编辑框架XSS漏洞
原标题:KindEditor开源富文本编辑框架XSS漏洞 *原创作者:卫士通安全服务事业部天龙,叶龙,本文属FreeBuf原创奖励计划,未经许可禁止转载 0×01 前言 KindEditor 是一 ...
html手机端富文本,pc端富文本编辑的字符串在手机端适配
此方法依赖于lib-flexible,直接替换其中的字符串就可以了 transformHtmlStr(str) { let vm = this; const ZPXRegExp = /(\d+)px/ ...
python代码编辑器、最好_这十大文本/代码编辑器最好用
10款最著名的代码(文本)编辑器,作为程序员的你喜欢哪个,哪种代码编辑器最入你的法眼.代码编辑器对我们的用途有多大呢? 通常操作系统和软件开发包中都包含文本/代码编辑器,可以用来编辑配置文件,文档文件 ...
python代码编辑器排行榜-写 Python 哪个编辑器 / IDE 最好用？
不请自来嘻嘻,简单介绍一下几款好用的编写器,希望对你有帮助- 1.IDLE IDLE是开发 python 程序的基本IDE(集成开发环境),具备基本的IDE的功能,是非商业Python开发的不错的选择 ...
定义快捷代码_nodepad++代码编辑器替代工具整理
概述代码编辑工具选择 Visual Studio Code VS vode特点: 开源,免费: 自定义配置集成git 智能提示强大支持各种文件格式(html/jade/css/less/sass ...
java代码编辑器 pdf文件预览主流SSM 代码生成器 shrio redis websocket即时通讯
获取[下载地址] QQ: 313596790 官网 http://www.fhadmin.org/ A 代码编辑器,在线模版编辑,仿开发工具编辑器,pdf在线预览,文件转换编码 B 集成代码生成器 [ ...
推荐：常用的代码编辑器！
1.VS Code Visual Studio Code(简称VS Code)是一款由微软开发且跨平台的免费源代码编辑器. Visual Studio Code 默认支持非常多的编程语言,包括 Jav ...

html代码编辑器sp,在线HTML编译，文本关键字高亮显示，富文本编辑实现大概思路...

html代码编辑器sp,在线HTML编译，文本关键字高亮显示，富文本编辑实现大概思路...相关推荐

最新文章

热门文章