实时互动白板

介绍 (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艺术作品，其功能与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)

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.

•自定义工具栏-用于添加视频，图像等的按钮。
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

•创建用户操作以在白板上动态添加和移动内容
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向我们的白板添加异步功能
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通信
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 directorymkdir code    #creates a new folder called 'code'cd code    #access new folder we just creatednpx 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 insidecd froala-whiteboard    #access the folder created by the above commandnpm 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!

实时互动白板_使用froala文本编辑器构建实时协作白板第1部分相关推荐

python多功能文本编辑器_多功能文本编辑器(EditPad Pro)
EditPad Pro 是一款多功能文本编辑器,设计的目标就是在保持程序小巧简洁的同时,提供所有基础编辑功能.EditPad Pro 可以在 Windows 98.Me.NT4.2000.XP.Vis ...
百度富文本编辑jsp上传_百度富文本编辑器教程，从入门到放弃
原标题:百度富文本编辑器教程,从入门到放弃百度UEditor 资源与项目分离-完全教程夏老师人真好又求到一篇技术贴来来来继续掏出小本本什么是百度UEditor? 百度UEditor是一款富 ...
js富文本编辑器_自制富文本编辑器
前言介绍一款 markdown富文本编辑器源码 https://gitee.com/pingfanrenbiji/markdown-nice 这里要感谢一些开源作者这位大佬的微信公众号是本地启 ...
树莓派该文件名_树莓派：文本编辑器与文件
GNU nano是Unix系统下一款常用的文本编辑器,以简单易用著称.与之相比,功能更强大的Vi和Emacs编辑器,学习曲线比nano陡峭很多.由于nano对于一般的文本编辑来说已经足够,所以我想简 ...
vue获取编辑器纯文字_前端富文本编辑器 vue-html5-editor
1..项目创建与初始化在安装好脚手架的依赖后,要执行 npm install vue-html5-editor -S 来安装这个富文本插件,由于这个富文本插件的图标是依赖font-awesome.c ...
vim 文本编辑器_标志性的文本编辑器Vim庆祝成立25周年
vim 文本编辑器稍微回拨时间. 不,继续转弯--多一点--在那里! 25年前,当您的一些专业同事还在蹒跚学步时,Bram Moolenaar开始为他的Amiga编写文本编辑器. 他是Unix上vi ...
晨风机器人插件编辑器_晨风机器人文本编辑器
晨风机器人文本编辑器提供文本编辑功能,可以在软件快速设计代码文本,软件已经提供多种添加功能,在编辑代码的时候可以添加宝物要求.坐骑要求.武器要求.防御要求.勋章要求.VIP等级要求.奴隶要求,从而快速 ...
java 文本编辑器_「java文本编辑器」用Java实现文本编辑器 - seo实验室
java文本编辑器源码里有注释:import java.awt.*; import java.awt.event.*; import java.io.*; import javax.swing.*; ...
java富文本传图片_使用富文本编辑器上传图片实例详解
富文本编辑器上传图片一.导入kindeditor的js 二.将kindeditor与一个文本域textarea进行关联,即用textarea初始化一个kindeditor对象 itemaddedit ...
桌面上的软件图标是白板_是时候结束对软件工程师的白板采访了
桌面上的软件图标是白板 In 2017, prominent software engineers took to Twitter to confess that they would fail a ...

实时互动白板_使用froala文本编辑器构建实时协作白板第1部分

介绍 (Intro)

这个想法： (The idea:)

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

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

实时互动白板_使用froala文本编辑器构建实时协作白板第1部分相关推荐

最新文章

热门文章