百度UEditor编辑器源代码编辑模式用CSS会被转义,有解决方法吗

html-css023

百度UEditor编辑器源代码编辑模式用CSS会被转义,有解决方法吗,第1张

1)把当前的编辑器form表单提交修改为Javascript方式提交。

<form action="index.php" method="POST" name="myForm">

form表单加入name元素。

<button class="btn2">提交</button>

submit提交改为button方式。

<script type="text/javascript">

function submitForm(){

document.myForm.action = document.myForm.action

document.myForm.submit()

}

$(".btn2").click(function(){

submitForm()

})

</script>

2)通过UEditor API中的editor.execCommand( 'source')方法事件,在源代码状态提交时切换为编辑模式。

<script type="text/javascript">

var ue = UE.getEditor('editor',{

toolbars: [["undo","redo","|","bold","italic","underline","strikethrough","|","fontsize","forecolor","backcolor","|","removeformat","|","selectall","cleardoc","source","|","unlink","link","|","insertimage"]],wordCount:false

})

function submitForm(){

document.myForm.action = document.myForm.action

document.myForm.submit()

}

$(".btn2").click(function(){

ue.execCommand('source')

submitForm()

})

</script>

主要有4个函数方法:

其中提供给url(), url-prefix(),和 domain()函数的参数可以不使用引号括起来.但提供给regexp()函数的参数必须用引号括起来.

提供给regexp()函数的正则表达式中的转义字符必须再次进行一次CSS转义.例如,一个点号(.),在正则表达式中匹配任意换行符之外的字母.如果想要匹配一个正真的点号,你必须首先按照正则表达式的规则转义一次 (变为 .), 然后在使用CSS的规则再转义一次(转换为\.).

@document url( http://www.w3.org/ ),

url-prefix( http://www.w3.org/Style/ ),

domain(mozilla.org),

regexp("https:. ")

{

/ * 该条CSS规则会应用在下面的网页:

** URL为" http://www.w3.org/ "的页面.

** 任何URL以" http://www.w3.org/Style/ "开头的网页

** 任何主机名为"mozilla.org"或者主机名以".mozilla.org"结尾的网页

** 任何URL以"https:"开头的网页

*/

body { color: purplebackground: yellow}

}

PS:目前该属性尚未有浏览器支持.

伪元素顾名思义伪装成元素,但不是元素,这与生成内容相关。生成内容主要指由浏览器创建的内容,而不是由标志或内容来表示。生成内容主要由:before和:after伪元素来实现,当然伪元素还包括:first-line,:first-letter和::selection

:first-letter

指定一个元素第一个字母的样式

注意1:所有前导标点符号应与第一个字母一同应用该样式

注意2:只能与块级元素关联

注意3:只有当选择器部分和左大括号之间有空格时,IE6-浏览器才支持。因为first-letter中存在连接符的原因

:first-line

设置元素中第一行文本的样式

注意1:只能与块级元素关联

注意2:只有当选择器部分和左大括号之间有空格时,IE6-浏览器才支持。因为first-line中存在连接符的原因

:before(IE7-浏览器不支持)

在元素内容的最开始插入生成内容

注意:默认这个伪元素是行内元素,且继承元素可继承的属性;IE7-浏览器中必须声明!DOCTYPE,否则不起作用

:after(IE7-浏览器不支持)

在元素内容的最后插入生成内容

注意:默认这个伪元素是行内元素,且继承元素可继承的属性;IE7-浏览器中必须声明!DOCTYPE,否则不起作用

::selection(IE8-浏览器不支持)

匹配被用户选择的部分

注意1:firefox浏览器需要添加-moz-前缀

注意2:只支持双冒号写法

注意3:只支持颜色和背景颜色两个样式

下面是伪元素的速查表

【content属性】

content属性应用于before和after伪元素

【1】 <string>里面的内容会原样显示,即使包含某种标记也不例外。

注意1:如果希望生成内容中有一个换行,则需要使用\A

注意2:若是一个很长的串,需要它拆分成多行则需要用\对换行符转义

【2】 <uri>

【3】attr( <identifier>)

<补充>【quotes属性】

管理引号

【4】open-quote|close-quote

【5】counter

首字下沉

钉子效果

图片叠加效果