wave结合quill实现多用户实时在线协作文本编辑器效果代码

代码语言:html

所属分类:其他

代码描述:wave结合quill实现多用户实时在线协作文本编辑器效果代码,不同的用户可以实时在线编辑相同的文档,可以看到对方的鼠标指针位置及修改内容位置。

代码标签: wave 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.snow.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/wave.client.css">

    <style>
        .editors {
          display: flex;
          justify-content: space-around;
        }
        
        .header {
          width: 400px;
          margin-left: auto;
          margin-right: auto;
          display: block;
          margin-bottom: 30px;
          font-size: 18px;
          line-height: 25px;
        }
        
        .quillEditor{
          width:45%;
          height: 600px;
          margin-bottom:100px;
        }
        a {
          width: 100px;
          margin-left: auto;
          margin-right: auto;
          display: block;
        }
        
        #logo {
          height: 65px;
          text-align: center;
        }
    </style>



</head>

<body>
    <div class="header">
        <a href="https://www.codox.io" target="_blank">
            <img id="logo" src="https://www.codox.io/assets/img/wave.svg" alt="">
        </a>
        <span>
      Create your own Google Docs with Wave + Quill
    </span>
    </div>

    <div class="editors">
        <div class="quillEditor">
            <div id="quillEditor1Toolbar"> </div>
            <div id="quillEditor1"> </div>
        </div>
        <div class="quillEditor">
            <div id="quillEditor2"> </div>
        </div>
    </div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/quill.js"></script>
    <!-- Include the Codox library -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/wave.client.js"></script>
 
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0