无法在 RTE 中选择文本样式答案

【问题标题】：Cannot choose text style in RTE无法在 RTE 中选择文本样式
【发布时间】：2012-10-24 13:19:08
【问题描述】：

在根页面的Page TSConfig 中，我有以下代码：

/////////////////////////////////////////////////////////////
//    RTE
///////////////////////////////////////////////////////////// 
RTE.classes{
  highlight{
      name = highlight
      value = color:#636466; font-size:15px;
  } 
  brown{
      name = braun
      value = color:#9A3811;
  }
}

RTE.default{
  ignoreMainStyleOverride = 1 
  useCSS = 1
  contentCSS = fileadmin/templates/css/rte.css
  classesCharacter := addToList(highlight, brown)
  classesParagraph := addToList(highlight, brown)
  proc.allowedClasses := addToList(highlight, brown)
  showTagFreeClasses = 1
}

在我的rte.css 我有这个：

/* content of rte.css */

.highlighthighlight {
    font-size: 15px;
    color: #636466;
}

.brown {
    color: #9A3811;
}

前端的style.css 中的样式相同。如果我在编辑器中，我无法选择文本样式。它总是被禁用。我想在一段中标记一些单词。我尝试使用不同的浏览器（IE、FF、Opera ...），但在所有浏览器中都禁用了文本样式。我能做什么？

我有 Typo3 4.7.5

编辑

问题是由于不推荐使用的属性造成的（请参阅here））。我当前的代码看起来像

/////////////////////////////////////////////////////////////
//    RTE
///////////////////////////////////////////////////////////// 
RTE.default{
  ignoreMainStyleOverride = 1 
  useCSS = 1
  contentCSS = fileadmin/templates/css/rte.css
  proc.allowedClasses := addToList(highlight, brown)
  buttons {
    blockstyle.tags.div.allowedClasses := addToList(highlight, brown)
    textstyle.tags.span.allowedClasses := addToList(highlight, brown)
  }
  showTagFreeClasses = 1
}

RTE.classes{
  highlight{
      name = highlight
      value = color:#636466; font-size:15px;
  } 
  brown{
      name = braun
      value = color:#9A3811;
  }
}

现在我可以选择一种文本样式，但只能选择其中一种。还有一种块样式的名称是错误的...

【问题讨论】：

RTE.classes 中定义的样式如果您在 CSS 中有它们，则不需要它们（我不知道它们是否真的不冲突）。另外，CSS文件真的加载了吗？（尝试为 HTML 标签本身设置一些属性）
我又进了一步。见this link about deprectated properties。但它没有按预期工作。

标签： typo3 rte tsconfig

【解决方案1】：

我的 rte.css 中有错误。这似乎有效。

rte.css

div.highlight, span.highlight, p.highlight, .brown {
    font-size: 15px;
    color: #636466;
}

div.brown, span.brown, p.brown, .brown {
    color: #9A3811;
}

页面 TSConfig

/////////////////////////////////////////////////////////////
//    RTE
///////////////////////////////////////////////////////////// 
RTE.classes{
  highlight{
      name = highlight
      value = color:#636466; font-size:15px;
  } 
  brown{
      name = braun
      value = color:#9A3811;
  }
}

RTE.default{
  ignoreMainStyleOverride = 1 
  useCSS = 1
  showTagFreeClasses = 1
  contentCSS = fileadmin/templates/css/rte.css
  buttons {
    blockstyle.tags.div.allowedClasses := addToList(highlight, brown)
    blockstyle.tags.p.allowedClasses := addToList(highlight, brown)
    textstyle.tags.span.allowedClasses := addToList(highlight, brown)
  }
  proc.allowedClasses := addToList(highlight, brown)
}

【讨论】：

【解决方案2】：

适用于 TYPO3 版本 7.6.X

将以下 TS 配置放入 Page TSConfig（在您网站的根目录中），这将添加类作为块样式和文本样式的选项。

RTE {
    default {
        proc.allowedClasses >
        proc.allowedClasses = btn, btn-default, infoRow
        buttons {
            blockstyle.tags {
                div.allowedClasses = btn, btn-default, infoRow
            }
            textstyle.tags {
                span.allowedClasses = btn, btn-default
            }
        }
        contentCSS = fileadmin/templates/rte.css
        showTagFreeClasses = 0
        enableWordClean = 1
        useCSS = 0
    }
}

RTE.default.FE < RTE.default
RTE.default.FE.FE >
RTE.config.tt_content.bodytext
RTE.config.tt_content.bodytext.proc.allowedClasses = btn, btn-default, infoRow

在上述路径创建 CSS 文件，即 fileadmin/templates/rte.css，它将包含以下代码

p.btn-default, span.btn-default{
    color:green;
    background-color:yellow ;
}
p.btn, span.btn{

}
p.infoRow{
    color:grey;
}

【讨论】：