css - 您可以根据输入标签值将 CSS 添加到动态可编辑区域吗

标签 css css-selectors

我使用的 CMS 系统允许您在主空间内编辑多个内容区域(就像所有内容区域一样)。我想要做的是为每个我想显示特定背景颜色的可编辑内容区域。 Main-Content = 白色,右边栏在编辑时会变成红色。

由于单击编辑按钮后所有内容都是即时生成的,并且两者之间的所有内容除了输入值外都是相同的,所以我想说如果输入值 = 主要内容是否正确,则是否显示白色编辑器正文标签 上的 rail 显示红色 #tinymce.mceContentBody . 我只能使用 CSS,不能添加到 HTML(所以不能添加 ID 和类)

下面是截取的一些生成的代码。如果滚动浏览它,您将看到 <input id="label" type="hidden" value="Main-Content" name="label"></input> 行.这是两个可编辑区域之间唯一不同的地方。一个是 Main-Content,另一个是 Right-Right(下图未显示)。这可以做到吗?我可以向下钻取吗 - 我唯一能想到的就是使用该标签值,但我不确定如何对其进行编码以及是否可以说它是可编辑区域的父级。我试过做这样的事情 - input[value="Main-Content"] #tinymce.mceContentBody {background-color:#FFF;}这失败了,我确定我的编码不正确,但我认为可能会有类似这样的方法。

注意这是代码,根本无法更改 -

<form id="wysiwyg_form" method="post" action="/servlet/OX/iesave">
<input id="site" type="hidden" value="test-email" name="site"></input>
<input id="path" type="hidden" value="/training/eo/Erick-Test_delete.aspx" name="path"></input>
<input id="newPath" type="hidden" value="/training/eo/Erick-Test_delete.aspx" name="newPath"></input>
<input id="label" type="hidden" value="Main-Content" name="label"></input>
<input id="dest" type="hidden" value="preview" name="dest"></input>
<textarea id="text" rows="1" cols="1" name="text" style="display: none;" aria-hidden="true"></textarea>
<span id="text_parent" class="mceEditor defaultSkin" role="application" aria-labelledby="text_voice">
   <span id="text_voice" class="mceVoiceLabel" style="display:none;"></span>
   <table id="text_tbl" class="mceLayout" cellspacing="0" cellpadding="0" role="presentation" style="width: 100px; height: 100px;">
      <tbody>
         <tr class="mceFirst" role="presentation"></tr>
         <tr>
            <td class="mceIframeContainer mceFirst mceLast">
                <iframe id="text_ifr" frameborder="0" src="javascript:""" allowtransparency="true" title="Rich Text AreaPress ALT-F10 for toolbar. Press ALT-0 for help" style="width: 1000px; height: 703px; display: block;">
                   #document
                      <!DOCTYPE >
                      <html>
                         <head xmlns="http://www.w3.org/1999/xhtml"></head>
                         <body id="tinymce" class="mceContentBody oucampus-wysiwyg" contenteditable="true" onload="window.parent.tinyMCE.get('text').onLoad.dispatch();" dir="ltr">
                            <p>This is where the content gets displayed - I want this BG to be white and be red when the label above is right rail</p>

最佳答案

实现此目的的方法是在可编辑区域的编辑器标签中使用“wysiwyg-class”属性。该class会被添加到TinyMCE编辑器的节点中,然后一个css就可以根据class修改body的margin,width,height位置

body.main_content { } 
body.left_column { } 
<!-- com.omniupdate.div ....
<!-- com.omniupdate.editor ... wysiwyg-class="left_column" ...

关于css - 您可以根据输入标签值将 CSS 添加到动态可编辑区域吗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21861151/

相关文章:

jquery - CSS 中的目标标签

css - 如何删除内联 block 产生的额外边距空间?

html - 当我添加 Bootstrap 样式表时,我的左上角 png 变得不可见

css - 在 SharePoint 2010 中覆盖默认 css 的最佳方式

javascript - 在 Mozilla 中,我的轮播气泡周围有一条虚线。如何删除它?

css - 使用 css 将第一个 a-tag 设置为粗体

css - Angular 2中/deep/和>>>的使用

html - 并非所有列表项都正确 float

悬停时的CSS列表菜单子(monad)选择器

html - 如何用css找到一些同级的元素?