react-quill富文本编辑器简单示例代码

代码语言:html

所属分类:其他

代码描述:react-quill富文本编辑器简单示例代码

代码标签: react quill 富文本 编辑器

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/quill.core.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/quill.snow.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/quill.bubble.css">
  
<style>
body {
  background: #f3f1f2;
  font-family: sans-serif;
}

.app {
  margin: 1rem 4rem;
}

.app .ql-container {
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  background: #fefcfc;
}

/* Snow Theme */
.app .ql-snow.ql-toolbar {
  display: block;
  background: #eaecec;
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
}

/* Bubble Theme */
.app .ql-bubble .ql-editor {
  border: 1px solid #ccc;
  border-radius: 0.5em;
}

.app .ql-editor {
  min-height: 18em;
}

.themeSwitcher {
  margin-top: 0.5em;
  font-size: small;
}
</style>


</head>

<body >
  <div class="app">
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.17.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.productio.........完整代码请登录后点击上方下载按钮下载查看

网友评论0