Question

我正在使用CMS系统，它允许您编辑主空间内的多个内容区域（就像所有这些区域一样）。我想要做的是每个可编辑的内容区域我想要显示某种背景颜色。编辑时，Main-Content = white和right 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>

Answer 1

实现此目的的方法是在可编辑区域内的编辑器标记中使用“wysiwyg-class”属性。该类将被添加到TinyMCE编辑器的节点，然后一个css可以根据类修改主体的边距，宽度，高度位置

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

是否可以根据输入标签值将CSS添加到动态可编辑区域

1 个答案: