本文目录一览:
- 1、百度UEditor编辑器源代码编辑模式用CSS会被转义,有解决方法吗
- 2、我用百度富文本插入网络视频,插入后不能播放,如何解决?
- 3、web前端开发常用工具有哪些
- 4、ueditor设置内容
- 5、如何替换JEECMS 里的文本编辑器为百度的ueditor
百度UEditor编辑器源代码编辑模式用CSS会被转义,有解决方法吗
最新的 ueditor 已经不存在这个问题。demo:UEditor - 示例
请不要再评论此答案,谢谢。
以下文字编辑于2013-08-17:
不同意前面两人的观点,ueditor对style进行编码是一种非常多余的行为。
既然编辑器提供了html编辑方式,毫无疑问这个功能是给懂html的人提供的。
富文本编辑器一般都可以写标签内样式,所以普通用户也可以通过html模式让页面乱掉,和提不提供自定义css没关系。
还有说防止注入的。前端做不了安全,要安全只能靠后端实现。所以这个不成立。
但是他最后一句我还是非常赞同的,如果有精力可以专门制定一套样式,在编辑文章的时候直接设置class就行,便于风格一致。
我以前用php写过博客,也是用的ueditor。刚刚试了一下,里面的ueditor可以插入style而不会被转移。
因为ueditor的config里面没有版本信息,我不知道那是什么版本。我写那套程序是12年初,到现在已经一年半了,所以那是个比较老的版本。不过功能貌似都正常,如果你要可以私信我。
-----------------------------
继续说。
刚刚想了想,其实这个功能在一定程度上可以起到安全作用,可以阻止那些html入门者搞破坏,但是如果一个对js熟悉的人想要在页面插入css js,前端是阻止不了的。
ueditor的config里面也提供了blacklist,可以过滤掉标签。所以把style内容编码成url编码相当奇怪,不知道谁可以有一个合理的解释。
-----------------------------
言归正传,因为我发现提问者很没耐心。OK,说说解决方法。
这种编码是通过encodeURIComponent()方法实现的。那么就改它的源代码,去掉源文件中编码style标签内容的代码。
打开ueditor.all.min.js或者ueditor.all.js,搜索encodeURIComponent,可以找到四个结果。
其中有一处是:
case "style":
case "script":
node.setAttr({
cdata_tag: node.tagName,
cdata_data: encodeURIComponent(node.innerText() || "")
});
node.tagName = "div";
node.removeChild(node.firstChild());
break;
删除case 'style':就行。如果你还想插入script,就删掉全部。
我用百度富文本插入网络视频,插入后不能播放,如何解决?
修改配置文件:ueditor.config.js,添加xss过滤白名单
embed: ['type', 'class', 'pluginspage', 'src', 'width', 'height', 'align', 'style', 'wmode', 'play','loop', 'menu', 'allowscriptaccess', 'allowfullscreen'],
web前端开发常用工具有哪些
常用的web前端开发工具 web前端开发工具有哪些:
1、Bootstrap
Bootstrap 是快速开发 Web 应用程序的前端工具包。它是一个 CSS 和HTML 的集合,它使用了最新的浏览器技术,给你的 Web 开发提供了时尚的版式,表单,buttons,表格,网格系统等等。
2、Foundation
Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。提供多种 Web 上的 UI 组件,如表单、按钮、Tabs 等。
3、Cloud9 IDE
Cloud9 IDE 是一个基于 Node.JS 构建的 JavaScript 程序开发 Web IDE。它拥有一个非常快的文本编辑器,支持为 JS,HTML,CSS 和这几种的混合代码进行着色显示。Cloud9 IDE 还为 node.js 和 Google Chrome 集成调试器,可以在IDE 中启动、暂停和停止。
4、Notepad++
Notepad++ 是一款非常有特色的编辑器,是开源软件,可以免费使用。我们开发人员都是必备的。支持的语言: C, C++ , Java , C#, XML, HTML, PHP,Javascript!
5、Visual Studio Code
Visual Studio Code 是一个运行于 OS X,Windows 和 Linux 之上的,针对于编写现代 web 和云应用的跨平台编辑器。
6、GIMP
GIMP 是 GNU 图像处理程序(GNU Image Manipulation Program)的缩写。包括几乎所有图象处理所需的功能,号称 Linux 下的 PhotoShop。GIMP 在 Linux系统推出时就风靡了绘图爱好者圈。
7、SecureHeaders
SecureHeaders 是 Twitter 送给 Web 开发者的一份大礼,作为一款 Web 安全开发工具,Secureheaders 能够自动实施安全相关的 header 规则,包括内容安全政策(CSP),防止 XSS、HSTS 等攻击,防止火绵羊(Firesheep)攻击以及 XFO 点击劫持等。
8、Fontello
Fontello 是个图标字体生成器。这个工具允许用户把这些图标 web 字体放到自己的项目中。主要特性如下:缩小字形集合,减小字体大小;合并一些字体标记到单个文件中;访问大量专业级的开源图标。
ueditor设置内容
你的事件应该绑定在按钮上,而不是ready上。
var bready=false;
B.addListener("ready",function(){bready=true;});//防止在按钮按下的时候,编辑器还没初始化
bt.addListener("click",function(){
if (bready) B.setContent("内容");
else B.addListener("ready",function(){B.setContent("内容");});//如果点下按钮时还没初始化,那么就等初始化完成的时候自动把内容放进去
})
如何替换JEECMS 里的文本编辑器为百度的ueditor
1、拷贝源码包中的dialogs、themes、net、third-party、editor_all.js和editor_config.js到ueditor文件夹中。
2、在ueditor文件夹里的editor_config.js里设置绝对路径:
把URL = window.UEDITOR_HOME_URL||tmp.substr(0,tmp.lastIndexOf("/")+1).replace("_examples/","").replace("website/","");
改成URL= window.UEDITOR_HOME_URL||"/ueditor/";
3、加入文件头,注意次序不要错:
script type="text/javascript" src="/ueditor/editor_config.js"/script
script type="text/javascript" src="/ueditor/editor_all.js"/script
link rel="stylesheet" href="/ueditor/themes/default/ueditor.css"
4、加入实体,其中div或者textarea是实例,script是引用语句。
div id="myEditor" style="width:800px;"/div
script type="text/javascript"
var editor = new baidu.editor.ui.Editor();
editor.render("myEditor");
/script
可以在div或textarea中加name属性,以改变传值变量名,覆盖默认变量名,在一页里引用多个实例时用,如下:
textarea id="myEditor" style="width:800px;" name="myContent"/textarea
script type="text/javascript"
var editor = new baidu.editor.ui.Editor();
editor.render("myEditor");
/script
5、传值到数据库:
默认传值变量为editorValue,这个可以在editor_config.js文件里的textarea:后面修改。
◆如果不放在控件里:后端可以用Request.Form["editorValue"]来获取,这个值只能由有提交功能的按钮来提取。
◆用FormView控件实现插入功能:
①在InsertItemTemplate里把asp:TextBox Text='%# Bind("newsContent") %' ...什么的替换成:
textarea id="myEditor" style="width:800px;" /textarea
script type="text/javascript"
var editor = new baidu.editor.ui.Editor();
editor.render("myEditor");
/script
②在InsertItemTemplate的底端,一定要把asp:LinkButton ...的提交按钮改换成asp:Button ID="InsertButton" runat="server" CommandName="Insert" Text="确定新增" /
③在此FormView的数据源asp:SqlDataSource里的InsertParameters里:
把asp:Parameter Name="newsContent" Type="String" /改成asp:FormParameter FormField="editorValue" Name="newsContent" Type="String" /
◆用ListView控件实现插入功能:
①在InsertItemTemplate里把asp:TextBox Text='%# Bind("newsContent") %' ...什么的替换成:
textarea id="myEditor1" name="insertEditorValue" style="width:800px;" /textarea
script type="text/javascript"
var editor = new baidu.editor.ui.Editor();
editor.render("myEditor1");
/script
关键点:textarea一定要加上name属性以防止和编辑模块中的传值参数起冲突;
textarea的id也要和编辑模块的有区别,但要和render("的id保持一致。
②在此ListView的数据源asp:SqlDataSource里的InsertParameters里:
把asp:Parameter Name="newsContent" Type="String" /改成asp:FormParameter FormField="insertEditorValue" Name="newsContent" Type="String" /
◆用ListView控件实现编辑功能:
①首先要打开ueditor目录下的editor_config.js文件,设置,autoClearinitialContent:false否则一点鼠标内容就消失了。
②在EditItemTemplate里把asp:TextBox Text='%# Bind("newsContent") %' ...什么的替换成:
textarea id="myEditor2" name="editEditorValue" style="width:800px;"asp:Label ID="Label1" runat="server" Text='%# Eval("newsContent") %'/asp:Label/textarea
script type="text/javascript"
var editor = new baidu.editor.ui.Editor();
editor.render("myEditor2");
/script
③在此ListView的数据源asp:SqlDataSource里的UpdateParameters里:
把asp:Parameter Name="newsContent" Type="String" /改成asp:FormParameter FormField="editEditorValue" Name="newsContent" Type="String" /
6、常见问题解决:
图片上传不成功?
由于目前官方提供的最新的.NET 1.2.1.0版本 是.Net FrameWork 4.0 ,所以如果在你的项目里是是.Net FrameWork 3.5
请做如下修改:
删除官方下的.Net/web.config,(只用vs自动生成的web.config就可以了)
这样就没有问题了。
或者修改你网站的.NET版本:右击“解决方案资源管理器”的网站根文件夹,选“属性页”,“生成”标签里改。