① 如何在自己的前端页面中加入富媒体编辑器，哪个富媒体编辑器好用，求大神解答！
ckeditor吧，我用的就是这个
② 前端用什么编辑器
高效的Web前端开发工具：
1、Prettier Playground
Prettier是一个代码格式化程序，支持JavaScript，包括ES2017、JSX、Angular、Vue、Flow、TypeScript等。它可以移除你的原始格式，并且将其替换为遵循最佳运行方式的、标准的一致样式。如此便捷的工具在我们的编辑器中十分流行，与此同时它还有一个线上版本，可以在线完成对代码格式的修正。
2、EnjoyCSS
运用CSS，非常简单的工具就是遇到困难时的救星。EnjoyCSS可以让你通过简单的UI设计你的元素，并且提供相关的CSS输出。
3、StackBlitz
根据Chime Nnamdi显示，StackBlitz是每名使用者都很喜欢的一款在线编辑工具。最重要的一点就是，它将IDE引入了web——Visual Studio Code中。只要在StackBlitz中点击一下，你就可以设置Angular、React、Ionic、TypeScript、RxJS、Svelte以及其他JavaScript框架。由于它的操作十分便捷，在打开StackBlitz后的五秒之内，你就可以开始编辑代码了。
StackBlitz十分好用，尤其在尝试简化代码片段或在线数据库方面，你可能没有时间从头开始创建新的项目，而只是尝试新的功能。而通过StackBlitz不需要创建新的项目就可以在短短几分钟内试用新的NPM软件包。
4、Postman
Postman就一直在我的开发人员工具集中。它在后端检查GET、POST、DELETE、OPTIONS和PUT在内的一系列端点这方面，起到了非常显着的作用。
5、CanIUse
CanlUse非常的简便，可以帮你弄清楚期望实现的功能，是否与你使用的浏览器兼容。很多开发者都会遇到浏览器的兼容问题，在这个浏览器上可以正常使用的，但换一个浏览器就不支持了。
6、Bit.dev
一个软件开发的基本原则就是代码的可重复使用性，它确保你可以减少开发量，而不需要去从头构建组件。这确实是Bit.dev可以做到的，它允许共享可重复使用代码片段和组件，从而减少开销，并且加快你的开发进程。Bit.dev还允许在团队之间共享组件，让你的团队可以与其他团队进行协作。
以上就是今天为大家分享的Web前端开发常用的6款提高工作效率的开发工具。大家要是想提供自己的工作效率，现在就赶紧用起来吧！
③ 前端开发 要做一个类似公众号平台那样可以编辑文案的页面，有什么框架或者模板推荐吗
最近刚做了一个微信图片投稿的小应用。前端功能很简单，填写表格，上传图片。图片部分用了微信的 JS SDK，同时兼容非微信浏览器或低版本微信（也就是调用系统input啦）。
前端我用的是 React＋Bootstrap。因为我现在就靠这一套通吃。。。（别的不会
页面文档：1.4KB
css：1.9KB，
bootstrap.min.js：120KB，
app.js：138.2KB，
微信 JS SDK：9.4KB
字体：17.9KB
一共279.4KB，用起来还 OK，实际上这个应用页面很简单，不用 Bootstrap 完全可以（我就是懒），体积一下就能减少43%。
测试过的机型包括 iPhone 5s＋，Nexus 5，小米 Note，魅族 MX5，MOTO X Style，三星 Galaxy 4，OPPO A31。iOS 微信版本6.3.9，Android 微信版本6.3.8，OPPO 的微信版本是5.3，不支持 chooseImg 接口。
事实上微信页面并不会太复杂，或者说太复杂的页面并不适合微信，复杂度应该在产品设计阶段就解决掉，如果前端需要上重武器才能完成需求，不如回过头好好想想产品设计的问题～
④ js如何实现点击编辑按钮，前端table表格行内指定td可修改。（table是动态生成的）
functionready(){varurl=base_path+"console/cfg/getBaseLayers/"+configId;$.ajax({url:url,type:"get",dataType:"json",success:function(result){//生成之前先清空tr,防止AJAX异步加载重复生成$("#lottr").remove();varlength=result.length;for(vari=0;i<length;i++){varname=result[i].name;//服务名称varalias=result[i].alias;//服务别名vartype=result[i].type;//服务类型varyear=result[i].year;//年份varurl=result[i].url;//服务地址varvisible=result[i].visible;//是否可见varid=result[i].id;//idserviceIdArray[i]=id;//此处将id塞给serviceIdArray，用于判断是否添加。varstr="";if(visible==true){//生成trstr+='<trid="';str+=id;str+='"';str+='class="lot_box"><td>';str+=i+1;str+='</td><td>';str+=name;str+='</td><td>';str+=alias;str+='</td><td>';str+=type;str+='</td><td>';str+=year;str+='</td><td>';str+=url;str+='</td><td>';str+='<inputid="';str+=id;str+='"';str+='type="checkbox"checked="true"onchange="modifyService(this.id);"/>';str+='</td><td><inputid="';str+=id;str+='"';str+='type="button"value="编辑"onclick="editTd(this.id)"/>';str+='</td><td>';str+='<buttonclass="rosy"id="';str+=id;str+='"';str+='onclick="deleteService(this.id);">';str+='<imgsrc="static/img/del14.png"></button>';str+='</td></tr>';
}else{//生成trstr+='<trid="';str+=id;str+='"';str+='class="lot_box"><td>';str+=i+1;str+='</td><td>';str+=name;str+='</td><td>';str+=alias;str+='</td><td>';str+=type;str+='</td><td>';str+=year;str+='</td><td>';str+=url;str+='</td><td>';str+='<inputid="';str+=id;str+='"';str+='type="checkbox"onchange="modifyService(this.id);"/>';str+='</td><td><inputid="';str+=id;str+='"';str+='type="button"value="编辑"onclick="editTd(this.id)"/>';str+='</td><td>';str+='<buttonclass="rosy"id="';str+=id;str+='"';str+='onclick="deleteService(this.id);">';str+='<imgsrc="static/img/del14.png"></button>';str+='</td></tr>';
}var$tr=$(str);$("#lot").append($tr);
}
}
});
}
2）
//修改table行内元素(td)functioneditTd(id){//选中编辑按钮的时候,把这行指定的几个td变成文本框varb=$("input[type='button'][id='"+id+"']").parent();//tdvara=b.siblings();//td的兄弟节点if(a[1].children.length===0){a[1].innerHTML="<inputtype='text'value='"+a[1].innerText+"'/>";
}
if(a[2].children.length===0){a[2].innerHTML="<inputtype='text'value='"+a[2].innerText+"'/>";
}
if(a[3].children.length===0){a[3].innerHTML="<inputtype='text'value='"+a[3].innerText+"'/>";
}//将编辑改成保存和取消两个按钮b[0].innerHTML="<inputid='"+id+"'type='button'onclick='saveEditTd(this.id);'value='保存'/><inputtype='button'onclick='resertEditTd();'value='取消'/>";
//以下注掉的都是在网上找的参考。/*alert(a[0].getText());var$this=$(this).index();alert($this);*//*$('input[type="button"]').on('click',function(){var$this=$(this).parent().parent();//trready();});*//*var$=function(node){returntypeofnode=="string"?document.getElementById(node):node;}var$1=function(node,parent){varnd=document.createElement(node);if(parent)parent.appendChild(nd);returnnd;}/!**绑定事件流*!/varbind=function(obj,eventName,funcionName){if(obj.addEventListener){obj.addEventListener(eventName,funcionName,false);}elseif(obj.attachEvent){obj.attachEvent("on"+eventName,funcionName);}else{obj["on"+eventName]=funcionName;}};varfulltable=function(tbody,data){varpd=data.data;varcolumn=data.column;for(vari=0,len=data.rows;i<len;i++){vartr=$1("tr",tbody);varcd=pd[i];for(varj=0,jlen=column.length;j<jlen;j++){vartd=$1("td",tr);td.innerHTML=cd[column[j]];//innerText不兼容火狐，可以自己写innerText和textContent的兼容，这里就直接用innerHTML了}}}varlittlehow_edit_table=function(tbody,ev){this.tbody=$(tbody);this.event=ev?ev:"click";//默认为单机事件this.init=function(data){//data可以是undefinedif(data){fulltable(this.tbody,data);}//调用可编辑this.edit();}this.edit=function(){vartds=this.tbody.getElementsByTagName("td");for(vari=0,len=tds.length;i<len;i++){bind(tds[i],this.event,this.click);}}this.click=function(){//alert(this.children.length);if(this.children.length>0)return;varv=this.innerHTML;this.innerHTML="";varinput=$1("input",this);input.type="text";input.value=v;input.focus();//光标聚集bind(input,"blur",blur);}varblur=function(){varv=this.value;this.parentNode.innerHTML=v;}}window.$$=function(id,ev){returnnewlittlehow_edit_table(id,ev);};*//*$('.editable').handleTable({"handleFirst":true,"cancel":"<spanclass='glyphiconglyphicon-remove'></span>","edit":"<spanclass='glyphiconglyphicon-edit'></span>","add":"<spanclass='glyphiconglyphicon-plus'></span>","save":"<spanclass='glyphiconglyphicon-saved'></span>","confirm":"<spanclass='glyphiconglyphicon-ok'></span>","operatePos":-1,"editableCols":[2,3,4],"order":["add","edit"],"saveCallback":function(data,isSuccess){//这里可以写ajax内容，用于保存编辑后的内容//data:返回的数据//isSucess:方法，用于保存数据成功后，将可编辑状态变为不可编辑状态varflag=true;//ajax请求成功（保存数据成功），才回调isSuccess函数（修改保存状态为编辑状态）if(flag){isSuccess();alert(data+"保存成功");}else{alert(data+"保存失败");}returntrue;},"addCallback":function(data,isSuccess){varflag=true;if(flag){isSuccess();alert(data+"增加成功");}else{alert(data+"增加失败");}},"delCallback":function(isSuccess){varflag=true;if(flag){isSuccess();alert("删除成功");}else{alert("删除失败");}}});*//*//dom创建文本框varinput=document.createElement("input");input.type="text";//得到当前的单元格varcurrentCell;functioneditCell(event){if(event==null){currentCell=window.event.srcElement;}else{currentCell=event.target;}//根据Dimmacro的建议修定下面的bug非常感谢if(currentCell.tagName=="TD"){//用单元格的值来填充文本框的值input.value=currentCell.innerHTML;//当文本框丢失焦点时调用lastinput.onblur=last;input.ondblclick=last;currentCell.innerHTML="";//把文本框加到当前单元格上.currentCell.appendChild(input);//根据liu_binq63的建议修定下面的bug非常感谢input.focus();}}functionlast(){//充文本框的值给当前单元格currentCell.innerHTML=input.value;}//最后为表格绑定处理方法.document.getElementById("table").ondblclick=editCell;*//*varttr=$(this).val()=="编辑"?"确定":"编辑";$(this).val(ttr);//按钮被点击后，在“编辑”和“确定”之间切换$(this).parent().siblings("td").each(function(){//获取当前行的其他单元格varobj_text=$(this).find("input:text");//判断单元格下是否有文本框if(!obj_text.length)//如果没有文本框，则添加文本框使之可以编辑$(this).html("<inputtype='text'value='"+$(this).text()+"'>");else//如果已经存在文本框，则将其显示为文本框修改的值$(this).html(obj_text.val());});*//*$('input[type="button"]').on('click',function(){var$this=$(this);var$td_arr=$this.parent().html('保存').prevAll('td');$.each($td_arr,function(){var$td=$(this);$td.html('<inputtype="text"value="'+$td.html()+'">');});});*/}
3）
//取消editTd编辑functionresertEditTd(){ready();//此方法是自己写的，局部刷新页面，重新加载数据
}
//保存editTd编辑functionsaveEditTd(id){vara=$("input[type='button'][id='"+id+"']").parent().siblings();//td的兄弟节点vartd_name=a[1].children[0].value;//服务名称vartd_alias=a[2].children[0].value;//服务别名vartd_type=a[3].children[0].value;//服务类型varurl=base_path+"console/cfg/saveEditTd";$.ajax({url:url,type:"post",data:{"td_name":td_name,"td_alias":td_alias,"td_type":td_type,"id":id,"tpl":configId},datatype:"json",success:function(result){ready();//此方法是自己写的，局部刷新页面，重新加载数据
}
});
}
⑤ 求可视图化编辑的web前端框架，可随意自定义组态画面
不得不推荐 HT for Web，满足你这个要求可以说是非常容易的，而且我看他们官网上好像有一个你这个图类似的，我找找图
这几个都跟你的图类似吧 我觉得还是很强的一个框架，上手很容易倒是，是收费的
⑥ 如何从头做一个复杂的可拖拽前端页面编辑器界面，求思路
这种软件应该叫做组态软件，比如微软的Viso，而且微软也提供了Viso的开发SDK以供开发之用， 除此，Visual Studio也还提供了一个扩展控件，DSL专门提供这样的开发接口。 如果这些都不能满足你的要求的话，在C#中也有用WPF的画布（Canvas)来实现的
⑦ 前端组件“可编辑表格”，怎么设计才好
第一，view层，需要分层设计；
第二，model层，需要让数据来控制view层；
思路的话，可以参考react的生命周期概念:
1，插入dom；
2，获得新数据，重新渲染dom；
3，删除dom；
咱们也一样给这三种状态各提供二种处理函数，
will是事前调用；
did是事后调用；
还要有公开出来的setget方法
⑧ 现在比较好用的前端开发工具有哪些啊
1. node.js + npm， 这个是前端工具的一个平台，没有他们就没有以下的工具，建立开发环境，下载开发工具，运行开发工具的利器
2. bower, 库依赖管理器，类似于npm，但针对浏览器JavaScript的依赖管理，减少寻找库，下载库和升级库的烦恼
3.grunt，流程自动化管理工具，将你非编程的开发步骤减到最小，grunt watch+liveReload或者grunt connect,可以使得免除你F5无尽地狱，发布和开发各种无压力。以下大部分开发工具，都有grunt的相对应的插件，也就是说他们都能利用grunt进行自动化运行
5. 本人用less比较多，因为基本无缝兼容历史遗留系统中的css，（而Sass语法比较特殊，还没有专门用过，应该开发新系统的css比较好），一套css预编译语言，可以把less语法转成css语法，lessc是less语言编译器，配合grunt less，编写大型css文档毫无压力。
6.Phantomjs，没有界面的浏览器，用js脚本控制其操作网页。测试，抓图，网页流程自动化利器。配合casperjs的语法简化功能真强库后，控制Phantomjs就更加容易了
7. grunt PhotoBox, 利用phantomjs抓图功能和ImageMagick图片比较功能，在利用live-reload即时刷新功能，可以让你开发css的时候，快速对n多个页面进行观察，看其前后变化。不过缺点也比较明显，就是速度慢。但比起手动对比来看，还是非常快的。值得css开发时拥有
8. phantomCSS，这个和grunt photobox类似，都用于css开发的，差别是photobox是全局观察差别，而这个是单元组件观察差别，它方便你就抓页面中某一块元素然后进行前后比较，更加注重细节上的差异，这个比较合适组件开发时候使用。
9. jshint，帮助你快速定位JavaScript的语法错误和潜在的跨浏览器兼容性问题。在部署你JS前，用jshint检查一下是没错的 。
10.UglifyJS，压缩JavaScript代码，使你的JS代码可以更加快速的加载。有grunt的插件
11. browserify允许你在浏览器里面使用CMD标准模块，但本人认为它的另外一个优势是合并代码，开发时候可以把代码模块化，分成很多很多小文件，然后有调理的放到相对应文件夹下，然后最后合成单一文件。本人曾经利用browserify开发greasemonkey代码，大大简化了greasemonkey的开发难度和增强了greasemonkey代码的质量。browserify有grunt插件，这样又减少的开发步骤。
12. Karma， google开发的一个单元测试运行器，这个自己本身不是一个单元测试框架，而是配合测试单元框架的一个工具。由于前端浏览器众多，就算你有live-reload这样自动化工具，但是还是要手动打开各种浏览器，手动把你的单元测试在各个浏览器都运行一遍。这个工具目的是目的就是让电脑能自动化打开各种浏览器，然后把单元测试在各个浏览器中自动运行一遍，让这个步骤也能自动化了。
13.clean-css (grunt cssmin)， 我用的是grunt cssmin，但是grunt cssmin实际上背后使用的是clean-css工具，这个工具就是用来压缩精简css的，让css文件大小更小。
⑨ 前端常用的几种在线代码编辑器各有什么优势
JS Bin - Collaborative JavaScript Debugging
介绍一款在线编辑器：jsbin jsbin的用法
优点：不需要登录，即发即预览
缺点：速度不靠谱
RunJS - 在线编辑、展示、分享、交流你的 JavaScript 代码
优点：国内访问速度快，可以上传图片(左下角)
缺点：需要登录，用户名
Create a new fiddle
优点：功能强大，历史记录给力，缺点：访问速度慢
⑩ 做前端，那种编辑器最好用
前端程序员最爱用的8款代码编辑器:
Adobe Dreamweaver CC、Atom、Sublime Text、Brackets、WebStorm 11、Notepad++、HBuilder、Beyond Compare