带类的TinyMCE color_map
我想问你，是否有办法设置TinyMCE颜色托盘与类。我找到了一个预定义的十六进制颜色的解决方案，但这不是我想要的：
color_map: [
'#1f478f', 'Primary',
'#DF271F', 'Secondary',
'#000000', 'Black',
'#ffffff', 'White'
],当我应用颜色时，它看起来如下：
<p><span style="color: #df271f;">Hello, World!</span></p>我使用的是Tailwind，我用文本-主-500、文本-次要-400等定义了我的颜色。所以我的目标是将这些类推到tinyMCE，不管用它们定义了什么颜色，并得到类似于以下结果的结果：
<p class="text-primary-500">Hello, World!</p>或
<p><span class="text-primary-500">Hello, World!<span></p>因此，每当我更改类text-xxx-xxx时，它在TinyMCE中也会发生变化。这是我的JSFiddle。谢谢你们的建议。
回答 3
Stack Overflow用户
发布于 2022-03-16 16:00:21
您可以使用预定义的TailwindCSS颜色作为tinyMCE颜色。
当您想要在JS中配置您的颜色时，您将需要您的尾风颜色作为JSON而不是类名。要获得它们，您需要实现以下代码：
import resolveConfig from "tailwindcss/resolveConfig";
import tailwindConfig from "path/to/tailwind.config.js";
var colors = resolveConfig(tailwindConfig).theme.colors;更多关于这里的报道。
然后，您可以在colors.primary配置中使用JS变量colors.primary、colors.secondary等：
color_map: [
colors.primary, 'Primary',
...
],现在，当您更改您的尾风配置时，tinyMCE中的颜色将相应更改。
Stack Overflow用户
发布于 2022-04-01 16:08:02
使用forecolor或backcolor选项是不可能的。
提供的值将被复制到样式属性中，因此在内容中是硬编码的。(即使您提供了一个css变量来设置颜色，最终也会得到一个硬编码的RGB-值)。
如果您确实想应用一个类，以便以后可以更改颜色的样式，那么很遗憾，您需要使用style_formats来实现这一点。
例如：
style_formats: [
{title: 'Primary text', inline: 'span', classes: "text-primary"},
...
]将在tinymce的输出中生成一个<span class="text-primary"></span>。
您仍然可以使用Tailwind的resolveConfig生成这些选项，如p.loeffler的答案所述。
我编辑了您的JSFiddle以证明这是可行的：https://jsfiddle.net/87zsgpwv/7/
Stack Overflow用户
发布于 2022-08-25 14:56:21
这实际上是可能的使用TinyMCE 6预置颜色和希尔托颜色格式。
首先，您需要创建一个十六进制颜色到顺风颜色的映射：
const tailwindColorMap = {
'#4B5563': 'gray-600', // Hex letters need to be uppercase for this to work
'#4338CA': 'indigo-700',
// ...
}通过导入顺风颜色更快的方式：
import tailwindColors from 'tailwindcss/colors'
function colorMapForTailwindColors(colorArray = []) {
let colors = {}
colorArray.forEach((color) => {
for (let key in tailwindColors[color]) {
colors[tailwindColors[color][key].toUpperCase()] = `${color}-${key}`
}
})
return colors
}
const tailwindColorMap = colorMapForTailwindColors([
'gray',
'red',
'amber',
'yellow',
'green',
'blue',
'indigo',
])接下来，更新color_map，以便这些颜色显示在TinyMCE调色板中：
color_map: Object.keys(tailwindColorMap)
.map(function (key) {
return [key, tailwindColorMap[key]]
})
.flat()最后，设置使用顺风类名的止赎色和希尔茨颜色格式：
tinymce.init({
selector: 'textarea', // change this value according to your HTML
color_map: Object.keys(tailwindColorMap)
.map(function (key) {
return [key, tailwindColorMap[key]]
})
.flat(),
formats: {
forecolor: {
inline: 'span',
attributes: {
class: (value) => `text-${tailwindColorMap[value.value]}`,
},
links: true,
remove_similar: true,
clear_child_styles: true,
},
hilitecolor: {
inline: 'span',
attributes: {
class: (value) => `bg-${tailwindColorMap[value.value]}`,
},
links: true,
remove_similar: true,
clear_child_styles: true,
},
}
})现在，当您设置元素的文本颜色时，颜色选择器的值将传递给回调(例如。( #4B5563)，该值对应于tailwindColorMap中的一个键，该键返回顺风类名。
https://stackoverflow.com/questions/71284252
复制相似问题
腾讯云开发者
