如何配置一个最基本的web富文本编辑器

html-css026

如何配置一个最基本的web富文本编辑器,第1张

第一步，引用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>

在 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>

)

}

}

可以给标签家个id或class就可以调整文本框的宽和高。

如：

<style type="text/css">

.text1{width:100pxheight:20px}

</style>

<input type="text" class="text1" />

扩展资料：

在CSS中，使用text-align属性控制文本的水平方向的对齐方式：左对齐、居中对齐、右对齐。

该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 justify；不同用户代理可能会得到不同的结果。

默认值：left if direction is ltr, and right if direction is rtl 

继承：yes 

版本：CSS1 

JavaScript 语法：object.style.textAlign="right" 

参考资料来源：百度百科-text-align