实时共享白板_使用Froala文本编辑器构建实时协作白板-第1部分。

实时共享白板

介绍 (Intro)

Hello! Nice to meet you, I am Boyan, I recently became a web-developer, and am pretty excited (and nervous!) to make my first post to Medium, and join an amazing community that has taught me so much in just a few months.

你好！ 很高兴认识你，我是Boyan，最近成为一名网络开发人员，我很高兴(很紧张！)向我的第一篇文章发表文章，加入了一个很棒的社区，该社区在短短几个月内给了我很多知识。

这个想法： (The idea:)

The initial idea for this project was to use the Froala WYSIWYG editor to create a blank canvas for artists to slap anything they want on a web-page, set the layout exactly as they please, and create Internet art, functioning in the same way to NewHive, a web-based canvas for making artworks like this! (NewHive doesn’t seem to really exist anymore, beyond this Instagram account ☹️ )

这个项目的最初想法是使用Froala WYSIWYG编辑器创建一个空白画布，供艺术家在网页上拍他们想要的任何东西，完全按照自己的喜好设置布局，以及创建Internet art ，其功能与NewHive ，一个基于网络的画布，用于制作这样的艺术品！ (除了这个Instagram帐户☹️以外，NewHive似乎不再存在)

But when I demoed the app, it was suggested that it could actually be really useful as a collaborative tool for sharing ideas and taking notes as a team — a whiteboard for brainstorming — if I simply added a unique URL for sharing and a database for sending and retrieving data between each user’s whiteboard. Imagine: you fire up the web-app and a unique link is generated in the address bar. You then share the link with your colleague, and then you proceed to add an image and some text. Your colleague will see the image and text show up instantaneously in their own browser. A bit like Google docs!

但是，当我演示该应用程序时，有人建议说，如果我只是添加一个唯一的URL进行共享，并作为数据库进行发送，则它实际上可以作为一个团队协作共享工具和做笔记的集体协作工具(集思广益的白板)实际上非常有用。并在每个用户的白板之间检索数据。 想象一下：您启动了Web应用程序，并且在地址栏中生成了唯一的链接。 然后，您与同事共享链接，然后继续添加图像和一些文本。 您的同事将在他们自己的浏览器中立即看到图像和文本。 有点像Google文档！

By the end of this tutorial, you will have created your very own whiteboard web-app, starting with the basics of React, Redux and Froala, to implementing a back-end server, a database, and a CDN, and then finally pushing it all to a web-host to allow the world to see!

在本教程结束时，您将创建自己的白板Web应用程序，从React，Redux和Froala的基础知识开始，以实现后端服务器，数据库和CDN，然后最终将其推送所有人都可以通过网络托管让世界看到！

You can see the final version of the app here: froala.com/wysiwyg-editor/whiteboardAfter following the link, you will notice that a series of numbers and letters are appended to the URL. This whole URL will be unique to your whiteboard. If you copy and paste it to another browser, or share it with a friend, you can then play around with adding gifs or doodling, and it will update immediately in the other browser.

您可以在此处查看该应用程序的最终版本： froala.com/wysiwyg-editor/whiteboard 在链接之后，您会注意到URL后面附加了一系列数字和字母。 整个URL对于您的白板将是唯一的。 如果将其复制并粘贴到另一个浏览器中，或者与朋友共享，则可以添加gif或涂鸦，然后在另一个浏览器中立即更新。

And here’s a link to the repo — I have comments throughout the code which should help you get around! -> https://github.com/boyanlevchev/froala-whiteboard.git

这是回购的链接-我在整个代码中都有注释，可以帮助您解决问题！ -> https://github.com/boyanlevchev/froala-whiteboard.git

我们将在5个帖子中介绍以下主题 (We will cover the following topics over 5 posts)

1. How to use the Froala text editor for React (Named react-froala-wysiwyg):

   如何将Froala文本编辑器用于React(命名为react-froala-wysiwyg )：

   • Configuring the text-editor

   •配置文本编辑器

   • Customizing the toolbar — buttons for adding video, images, etc.

   •自定义工具栏-用于添加视频，图像等的按钮。

2. How to use Redux to improve communication in your app, and create a whiteboard — Click to go to part 2

   如何使用Redux改善应用程序中的通信并创建白板— 单击以转到第2部分

   • Creating your own Froala Editor buttons — in our case a delete button

   •创建自己的Froala编辑器按钮-在我们的情况下为删除按钮

   • Creating user actions to dynamically add and move content on the whiteboard

   •创建用户操作以在白板上动态添加和移动内容

3. How to build and communicate with a web-based real-time NoSQL database using Google FireBase

   如何使用Google FireBase构建基于Web的实时NoSQL数据库并与之通信

   • Adding async functionality to our whiteboard using Redux-Thunk

   •使用Redux-Thunk向我们的白板添加异步功能

4. How to store media in AWS S3 and build a back-end server using Express.js

   如何在AWS S3中存储媒体并使用Express.js构建后端服务器

   • How to host video and images on a CDN — for storage and delivery — using AWS S3.

   •如何使用AWS S3在CDN上托管视频和图像以进行存储和交付。

   • How to make a bucket on S3 — also link to guides online

   •如何在S3上制作水桶-也可以在线链接到指南

   • CORS policies

   •CORS政策

   • How to store your secret keys the RIGHT way in React

   •如何在React中以正确的方式存储您的密钥

   • Configuring Froala Editor to automatically communicate with S3

   •配置Froala编辑器以自动与S3通信

5. Hosting your web-app online using Heroku!
   使用Heroku在线托管您的Web应用程序！

This guide assumes that you some minor knowledge of the CLI (Terminal), of the JavaScript/Node package managers NPM and Yarn, and of basic git commands — and that NPM, Yarn and git are already installed on your computer. This guide also uses MacOS, so you may have to Google the equivalent commands for your operating system.

本指南假定您对CLI(终端)，JavaScript / Node程序包管理器NPM和Yarn以及基本git命令有一些了解，并且您的计算机上已经安装了NPM，Yarn和git。 本指南还使用MacOS，因此您可能必须对操作系统使用与Google等价的命令。

让我们开始！ (Let’s Begin!)

Getting started with a simple React app and Froala, and preparing the correct structure.

简单的React应用程序和Froala入门，并准备正确的结构。

First, we must create our React app. The easiest way to get started is to use create-react-app.

首先，我们必须创建我们的React应用程序。 最简单的入门方法是使用create-react-app 。

To do this, add a folder called froala-project to your desktop. This will be the directory for all the code we will write. In your command-line, paste the following commands:

为此，将一个名为froala-project的文件夹添加到桌面。 这将是我们将编写的所有代码的目录。 在命令行中，粘贴以下命令：

*Please note that you can name your app and place it wherever you please, but for the purpose of this tutorial I will be using the name “froala-whiteboard” and have it located in a folder in the computer’s root directory, which we will call “code”:

*请注意，您可以命名应用程序并将其放置在任意位置，但是出于本教程的目的，我将使用名称“ froala-whiteboard”并将其放置在计算机根目录中的文件夹中，我们将称为“代码”：

 cd   # take us to the root directory mkdir code    # creates a new folder called 'code' cd code     # access new folder we just created npx create-react-app froala-whiteboard     # create a new react app with the name froala-whiteboard - i.e. creates a new folder with all the necessary stuff inside cd froala-whiteboard     #access the folder created by the above command npm start    #runs the new React project so it shows up in your web browser 

You can now see your site if you type into the address bar of your web browser — localhost:3000 — and press enter. After this, open up your app in your text editor of choice — I use Sublime Text, and the CLI command stt.

现在，如果您在Web浏览器的地址栏中键入localhost:3000 ，然后按Enter，就可以看到您的站点。 之后，在您选择的文本编辑器中打开您的应用程序-我使用Sublime Text和CLI命令stt 。

Now we just need to add the Froala Editor for React package. Back to your CLI, hit ⌘-t to open a new tab (so that we can leave the localhost server running, and continue to use the CLI for other commands), and run the following:

现在我们只需要添加Froala Editor for React包即可 。 返回您的CLI，按⌘-t打开一个新选项卡(以便我们可以使localhost服务器保持运行状态，并继续将CLI用于其他命令)，然后运行以下命令：

 npm install react-froala-wysiwyg 

You can now head back to your text-editor and check your package.json file in the root directory of your app, and you will see it added as“react-froala-wysiwyg” with a version number to its right.

现在，您可以返回文本编辑器，并在应用程序的根目录中检查package.json文件，您会看到它添加为“react-froala-wysiwyg” ，其版本号在其右侧。

Now let’s think about the structure of the app. We are trying to build a whiteboard, and on this whiteboard, we want to be able to add content like text, video and images. So the app will house a child component which will be the whiteboard, and the whiteboard will be the parent of its own children components that will house the content. The power of the content component will be delivered by the Froala editor, which has the inbuilt capacity to accept fully format-able text, images and video.

现在让我们考虑一下应用程序的结构。 我们正在尝试构建一个白板，并且希望在该白板上添加文本，视频和图像等内容。 因此，该应用将容纳一个子组件，该子组件将是白板，并且该白板将成为其自己的子组件的父代，该子组件将容纳该内容。 内容组件的功能将由Froala编辑器提供，该编辑器具有内置功能，可以接受完全可格式化的文本，图像和视频。

So, following this structure, go to the src folder of your app, and add a new folder called containers. Inside of containers, create two files — name one whiteboard.jsx and the other froala.jsx. Copy-paste the template code below into both of these new files, and replace [NAME-OF-COMPONENT] in each file with the name Whiteboard and Froala respectively:

因此，按照此结构，转到应用程序的src文件夹，并添加一个名为containers的新文件夹。 在containers内部，创建两个文件-命名为whiteboard.jsx ，另一个froala.jsx 。 将下面的模板代码复制粘贴到这两个新文件中，并将每个文件中的[NAME-OF-COMPONENT]分别替换为Whiteboard和Froala：

 import React, { Component } from 'react' class [NAME-OF-COMPONENT] extends Component {
  constructor(props) {
    super(props); this.state = {
    };
  } render(){
    return(
      <div>
      </div>
    )
  }
} export default [NAME-OF-COMPONENT]; 

Now, let’s start with configuring the content component. Go to froala.jsx, and underneath the line where we import React, we need to import the Froala Editor, along with its CSS and associated JavaScript functionality:

现在，让我们开始配置内容组件。 转到froala.jsx ，在导入React的行下面，我们需要导入Froala编辑器及其CSS和关联JavaScript功能：

 import FroalaEditor from 'react-froala-wysiwyg'; import 'froala-editor/js/froala_editor.pkgd.min.js';
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css'; 

And then add the code in bold below to the return statement:

然后将下面以粗体显示的代码添加到return语句中：

 render(){
    return(
      <div>
        <FroalaEditor/> 
      </div>
     )
} 

Now, we need to hook this file up to the Whiteboard, to let the Whiteboard know that this is a child that it has to display. Do this by going to the whiteboard.jsx file, and typing in the code in bold below. First, we import the Froala component we just created above, and then we add it to the return statement of the render() function, within the <divs>:

现在，我们需要将此文件连接到白板，以使白板知道这是它必须显示的子级。 为此，请转到whiteboard.jsx文件，然后在下面以粗体键入代码。 首先，导入上面刚刚创建的Froala组件，然后将其添加到<divs>中的render()函数的return语句中：

 import React, { Component } from 'react' import Froala from './froala' class Whiteboard extends Component {
  constructor(props) {
    super(props); this.state = {
    };
  } render(){
    return(
      <div>
        <Froala/> 
      </div>
    )
  }
} export default Whiteboard; 

Finally, we have to tell the app that it must display its own child component, which will be the Whiteboard. Go to app.js and import the Whiteboard component at the top, delete everything within the <divs> inside of the return statement, and add in the component to be rendered — as shown below in bold:

最后，我们必须告诉应用程序它必须显示自己的子组件，即白板。 转到app.js并在顶部导入Whiteboard组件，删除return语句内<divs>内的所有内容，然后添加要呈现的组件-如下粗体所示：

 import React from 'react';
import logo from './logo.svg';
import './App.css'; import Whiteboard from './containers/whiteboard' function App() {
  return (
    <div className="App">
      <Whiteboard/> 
    </div>
  );
} export default App; 

And that’s it! 🎉 ... No, it’s not, but you can go to localhost:3000 and you will see the Froala text editor right there! So easy!

就是这样！ 🎉...不，不是，但是您可以转到localhost：3000，您将在其中看到Froala文本编辑器！ 太简单！

Now let’s pass some settings to make the editor only have the features we need. We want to be able to add photos, videos, and format our text inside of the content component however we please! So back in froala.jsx, we must import some new files, which will give us added functionality — you can see in the filename for each one what functionality is being added (we kind of have a stupid amount of import calls at the top now, but whatever…):

现在，让我们传递一些设置，以使编辑器仅具有我们需要的功能。 我们希望能够添加照片，视频，并在内容组件中设置文本格式，但是请您满意！ 因此，回到froala.jsx ，我们必须导入一些新文件，这将为我们提供附加的功能-您可以在每个文件名中看到要添加的功能(我们现在在顶部有一些愚蠢的导入调用， 但是无所谓…)：

 import  'froala-editor/js/plugins/image.min.js';
import  'froala-editor/js/plugins/video.min.js';
import  'froala-editor/js/plugins/colors.min.js';
import  'froala-editor/js/plugins/emoticons.min.js';
import  'froala-editor/js/plugins/font_family.min.js';
import  'froala-editor/js/plugins/font_size.min.js';
import  'froala-editor/js/plugins/line_height.min.js';
import  'froala-editor/js/plugins/lists.min.js';
import  'froala-editor/js/plugins/align.min.js';
import  'froala-editor/js/plugins/link.min.js';
import  'froala-editor/js/plugins/file.min.js'; import 'froala-editor/css/plugins/image.min.css';
import 'froala-editor/css/plugins/video.min.css';
import 'froala-editor/css/plugins/colors.min.css';
import 'froala-editor/css/plugins/emoticons.min.css';
import 'froala-editor/css/plugins/file.min.css'; 

And then, we must create a new constant called config. This constant will be an Object (also known in other languages as a Hash) into which we add the configurations that we want for the Froala editor — you can see a list of all the available toolbar plugins and editor configurations here. Add the config to the render() function (but before the return statement) and then assign this to the config prop of the <FroalaEditor> component as shown in bold below (apologies if the formatting below looks funky, if you copy/paste into your text editor, you should be able to see the structure of the config Object more clearly):

然后，我们必须创建一个名为config的新常量。 该常数将是一个Object (在其他语言中也称为Hash为我们补充一点，我们要为Froala编辑器中配置) -你可以看到所有可用的工具栏插件和编辑器配置的列表在这里 。 将配置添加到render()函数(但在return语句之前)，然后将其分配给<FroalaEditor>组件的配置<FroalaEditor> ，如下面的粗体所示(如果下面的格式看起来很时髦，如果您将其复制/粘贴到其中，则表示歉意)您的文本编辑器，您应该能够更清楚地看到config对象的结构)：

 render(){ const config = {
      toolbarButtons: {
        'moreRich': {
            'buttons': ['insertImage', 'insertVideo', 'insertLink', 'insertFile', 'emoticons'],
            buttonsVisible: 5
          },
        'moreText': {
            'buttons': ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting', 'alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote'],
            buttonsVisible: 0
          }
      },
      autofocus: true,
      toolbarInline: true,
      toolbarVisibleWithoutSelection: true,
      heightMin: '30',
      placeholderText: 'Type something \n or click inside me',
      charCounterCount: true,
      attribution: false
    }; 
    
    return(
      <div>
        <FroalaEditor config={config} />
      </div>
    )
  } 

Let’s just add one final touch which will set the style of the whiteboard. Essentially, we want the whiteboard to be at least the size of the computer screen (mine is 15 inches).

让我们添加一个最终的设置，它将设置白板的样式。 本质上，我们希望白板至少要与计算机屏幕一样大(最小为15英寸)。

In the src directory of the app, add a new folder called assets. In assets, create a new file whiteboard.scss and copy-paste the code below:

在app的src目录中，添加一个名为assets的新文件夹。 在资产中，创建一个新文件whiteboard.scss并复制粘贴以下代码：

 #whiteboard {
  /* set the height and width */ 
  min-height: 700px;
  min-width: 1500px;   /* This will allow us to position the child media relative to the position of the whiteboard */ 
  position: relative;     /* The next five lines remove a glowing blue outline from the whiteboard, which is usually included for accessibility reasons, but is not necessary for our use case. */ 
  shadow: none;
  outline: none;
  & :focus{
    shadow: none;
    outline: none;
  }
} 

Then we must give the whiteboard an id, which will then style the whiteboard as defined above. Add the code in bold below into our whiteboard.jsx file, inside the opening <div> tag in the return statement:

然后，我们必须给白板指定一个ID，该ID将为白板定义上面的样式。 将下面以粗体显示的代码添加到我们的whiteboard.jsx文件中，位于return语句中的<div>标记内：

 render(){
  return(
    <div id=”whiteboard” >
      <Froala/>
    </div>
  )
} 

Finally, we must tie it together, by going to the App.css file in the src folder, and adding at the top:

最后，我们必须将其绑在一起，方法是转到src文件夹中的App.css文件，并在顶部添加：

 @import './assets/whiteboard.scss'; 

If you go back to localhost:3000 and click inside the editor, you will now see the menu offer all of the buttons you configured above, and the whiteboard will be the size of the screen. Nice one!

如果返回到localhost:3000并在编辑器中单击，现在您将看到菜单提供了上面配置的所有按钮，并且白板将是屏幕的大小。 好一个！

The next part will go over adding Redux, and connecting the whiteboard to the dynamically generated editor instances, so that we can add as many content components as we like, and position them where we want, and have them send data between each other.

下一部分将介绍添加Redux，并将白板连接到动态生成的编辑器实例，以便我们可以添加任意数量的内容组件，并将它们放置在所需的位置，并使它们之间相互发送数据。

Onward!

向前！

翻译自: https://medium.com/@boyanlevchev/building-a-real-time-collaborative-whiteboard-with-froala-text-editor-part-1-b5bc34033b66

实时共享白板