如何让富文本里的css局部生效

html-css015

如何让富文本里的css局部生效,第1张

在 react 中，css 样式默认是全局生效的，想要使样式局部生效可以使用以下方案：

给 css 文件名加一个 .module.css 后缀，编译后的 css 样式文件就会导出一个对象，为每个选择器起一个随机名字

// 文件名假设为 index.module.css

.box {

width: 50px

height: 50px

}

// 在这个文件中设置全局样式

:global(.active) { color: re

import React, { Component } from 'react'

// 引入自定义样式

import style from './index.module.css'

export default class Home extends Component {

render() {

return (

<div>

<p className={style.box}>home</p>

<p className="active">list</p>

</div>

)

}

}

第一步，引用wangEditor的css文件，css文件最好在<head>中引用

<link rel="stylesheet" type="text/css" href="css/wangEditor-1.3.0.min.css">

第二步，引用jquery和wangEditor.js，js文件最好在<body>最下方引用

<script type="text/javascript" src='js/jquery-1.10.2.min.js'></script>

<script type="text/javascript" src='js/wangEditor-1.3.0.min.js'></script>

第三步，配置富文本框。

<script type="text/javascript">

$(function(){

$('#textarea1').wangEditor()

})

</script>