One place for hosting & domains

      Editor

      How To Install the Etherpad Collaborative Web Editor on Ubuntu 20.04


      Introduction

      Etherpad is a web application that enables real-time collaborative text editing in the browser. It is written in Node.js and can be self-hosted on a variety of platforms and operating systems.

      In this tutorial we will install Etherpad on an Ubuntu 20.04 server, using the SQLite database engine to store our data. We’ll also install and configure Nginx to act as a reverse proxy for the application, and we’ll fetch and install SSL certificates from the Let’s Encrypt certificate authority to enable secure HTTPS connections to our Etherpad instance.

      Prerequisites

      Before starting this tutorial, you will need the following:

      • An Ubuntu 20.04 server, with a non-root, sudo-enabled user, and with the UFW firewall enabled. Please read our Initial Server Setup with Ubuntu 20.04 to learn more about setting up these requirements.
      • Node.js installed, version 14 or higher. See option 2 of How To Install Node.js on Ubuntu 20.04 to learn how to install an up-to-date version of Node.js using NodeSource packages.
      • A domain name pointed at your server’s public IP address. This should be something like example.com or etherpad.example.com, for instance.

      Note: If you’re using DigitalOcean, our DNS Documentation can help you get your domain name set up in the control panel.

      When you have the prerequisites in place, continue to Step 1, where we’ll download and configure the Etherpad application.

      Step 1 — Downloading and Configuring Etherpad

      To install Etherpad, you’ll need to download the source code, install dependencies, and configure systemd to run the server.

      The Etherpad maintainers recommend running the software as its own user, so your first step will be to create a new etherpad user using the adduser command:

      • sudo adduser --system --group --home /opt/etherpad etherpad

      This creates a --system user, meaning that it can’t log in directly and has no password or shell assigned. We give it a home directory of /opt/etherpad, which is where we’ll download and configure the Etherpad software. We also create an etherpad group using the --group flag.

      You now need to run a few commands as the etherpad user. To do so, you’ll use the sudo command to open a bash shell as the etherpad user. Then you’ll change directories (cd) to /opt/etherpad:

      • sudo -u etherpad bash
      • cd /opt/etherpad

      Your shell prompt will update to show that you’re the etherpad user. It should look similar to etherpad@host:~$.

      Now clone the Etherpad repository into /opt/etherpad using Git:

      • git clone --branch master https://github.com/ether/etherpad-lite.git .

      This will pull the master branch of the Etherpad source code into the current directory (.). When that’s done, run Etherpad’s installDeps.sh script to install the dependencies:

      This can take a minute. When it’s done, you’ll need to manually install one last dependency. We need to cd into the Etherpad src folder and install the sqlite3 package in order to use SQLite as our database.

      First, change into the src directory:

      Then install the sqlite3 package using npm:

      Your final task as the etherpad user is to update the Etherpad settings.json file to use SQLite for its database, and to work well with Nginx. Move back up to the /opt/etherpad directory:

      Then open the settings file using your favorite text editor:

      The file is formatted as JSON, but with extensive comments throughout explaining each setting. There’s a lot you can configure, but for now we’re interested in two values that update the database configuration:

      settings.json

        "dbType": "dirty",
        "dbSettings": {
          "filename": "var/dirty.db"
        },
      

      Scroll down and look for the dbType and dbSettings section, shown here. Update the settings to sqlite and a filename of your choice, like the following:

      settings.json

        "dbType": "sqlite",
        "dbSettings": {
          "filename": "var/sqlite.db"
        },
      

      Finally, scroll down some more, find the trustProxy setting, and update it to true:

      settings.json

      "trustProxy": true,
      

      Save and close the settings file. In nano you can save and close by typing CTRL+O then ENTER to save, and CTRL+X to exit.

      When that’s done, be sure to exit the etherpad user’s shell:

      You’ll be returned to your normal user’s shell.

      Etherpad is installed and configured. Next we’ll create a systemd service to start and manage the Etherpad process.

      Step 2 — Creating a Systemd Service for Etherpad

      In order to start Etherpad on boot and to manage the process using systemctl, we need to create a systemd service file. Open up the new file in your favorite text editor:

      • sudo nano /etc/systemd/system/etherpad.service

      We’re going to create a service definition based on information in Etherpad’s documentation wiki. The How to deploy Etherpad Lite as a service page gives an example configuration that needs just a few changes to make it work for us.

      Add the following content into your text editor, then save and close the file:

      /etc/systemd/system/etherpad.service

      [Unit]
      Description=Etherpad, a collaborative web editor.
      After=syslog.target network.target
      
      [Service]
      Type=simple
      User=etherpad
      Group=etherpad
      WorkingDirectory=/opt/etherpad
      Environment=NODE_ENV=production
      ExecStart=/usr/bin/node --experimental-worker /opt/etherpad/node_modules/ep_etherpad-lite/node/server.js
      Restart=always
      
      [Install]
      WantedBy=multi-user.target
      

      This file gives systemd the information it needs to run Etherpad, including the user and group to run it as, and the command used to start the process (ExecStart=...).

      After closing the file, reload the systemd daemon to pull in the new configuration:

      • sudo systemctl daemon-reload

      Next, enable the etherpad service. This means the service will start up whenever your server reboots:

      • sudo systemctl enable etherpad

      And finally, we can start the service:

      • sudo systemctl start etherpad

      Check that the service started properly using systemctl status:

      • sudo systemctl status etherpad

      Output

      ● etherpad.service - Etherpad, a collaborative web editor. Loaded: loaded (/etc/systemd/system/etherpad.service; enabled; vendor preset: enabled) Active: active (running) since Thu 2021-09-09 14:12:43 UTC; 18min ago Main PID: 698 (node) Tasks: 13 (limit: 1136) Memory: 152.0M CGroup: /system.slice/etherpad.service └─698 /usr/bin/node --experimental-worker /opt/etherpad/node_modules/ep_etherpad-lite/node/server.js

      The output should indicate that the service is active (running).

      Etherpad is now running, but it is unavailable to the public because port 9001 is blocked by your firewall. In the next step we’ll make Etherpad public by setting up Nginx as a reverse proxy in front of the Etherpad process.

      Step 3 — Installing and Configuring Nginx

      Putting a web server such as Nginx in front of your Node.js server can improve performance by offloading caching, compression, and static file serving to a more efficient process. We’re going to install Nginx and configure it to proxy requests to Etherpad, meaning it will take care of handing requests from your users to Etherpad and back again.

      First, refresh your package list, then install Nginx using apt:

      • sudo apt update
      • sudo apt install nginx

      Allow traffic to ports 80 and 443 (HTTP and HTTPS) using the “Nginx Full” UFW application profile:

      • sudo ufw allow "Nginx Full"

      Output

      Rule added Rule added (v6)

      Next, open up a new Nginx configuration file in the /etc/nginx/sites-available directory. We’ll call ours etherpad.conf but you could use a different name:

      • sudo nano /etc/nginx/sites-available/etherpad.conf

      Paste the following into the new configuration file, being sure to replace your_domain_here with the domain that is pointing to your Etherpad server. This will be something like etherpad.example.com, for instance.

      /etc/nginx/sites-available/etherpad.conf

      server {
          listen       80;
          listen       [::]:80;
          server_name  your_domain_here;
      
          access_log  /var/log/nginx/etherpad.access.log;
          error_log   /var/log/nginx/etherpad.error.log;
      
          location / {
              proxy_pass         http://127.0.0.1:9001;
              proxy_buffering    off;
              proxy_set_header   Host $host;
              proxy_pass_header  Server;
      
              # proxy headers
              proxy_set_header    X-Real-IP $remote_addr;
              proxy_set_header    X-Forwarded-For $remote_addr;
              proxy_set_header    X-Forwarded-Proto $scheme;
              proxy_http_version  1.1;
      
              # websocket proxying
              proxy_set_header  Upgrade $http_upgrade;
              proxy_set_header  Connection "upgrade";
          }
      }
      

      This configuration is loosely based on a configuration provided on the Etherpad wiki. It is HTTP-only for now, as we’ll let Certbot take care of configuring SSL in the next step. The rest of the config sets up logging locations and then passes all traffic along to http://127.0.0.1:9001, the Etherpad instance we started up in the previous step. We also set various headers that are required for well-behaved proxying and for websockets (persistent HTTP connections that enable real-time two-way communication) to work through a proxy.

      Save and close the file, then enable the configuration by linking it into /etc/nginx/sites-enabled/:

      • sudo ln -s /etc/nginx/sites-available/etherpad.conf /etc/nginx/sites-enabled/

      Use nginx -t to verify that the configuration file syntax is correct:

      [secondary_lable Output]
      nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
      nginx: configuration file /etc/nginx/nginx.conf test is successful
      

      And finally, reload the nginx service to pick up the new configuration:

      • sudo systemctl reload nginx

      Your Etherpad site should now be available on plain HTTP, and it will look something like this:

      The default homepage of an Etherpad instance, with a button for

      Now that we have our site up and running over HTTP, it’s time to secure the connection with Certbot and Let’s Encrypt certificates.

      Step 4 — Installing Certbot and Setting Up SSL Certificates

      Thanks to Certbot and the Let’s Encrypt free certificate authority, adding SSL encryption to our Etherpad app will take only two commands.

      First, install Certbot and its Nginx plugin:

      • sudo apt install certbot python3-certbot-nginx

      Next, run certbot in --nginx mode, and specify the same domain you used in the Nginx server_name config:

      • sudo certbot --nginx -d your_domain_here

      You’ll be prompted to agree to the Let’s Encrypt terms of service, and to enter an email address.

      Afterwards, you’ll be asked if you want to redirect all HTTP traffic to HTTPS. It’s up to you, but this is generally recommended and safe to do.

      After that, Let’s Encrypt will confirm your request and Certbot will download your certificate:

      Output

      Congratulations! You have successfully enabled https://etherpad.example.com You should test your configuration at: https://www.ssllabs.com/ssltest/analyze.html?d=etherpad.example.com - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - IMPORTANT NOTES: - Congratulations! Your certificate and chain have been saved at: /etc/letsencrypt/live/etherpad.example.com/fullchain.pem Your key file has been saved at: /etc/letsencrypt/live/etherpad.example.com/privkey.pem Your cert will expire on 2021-12-06. To obtain a new or tweaked version of this certificate in the future, simply run certbot again with the "certonly" option. To non-interactively renew *all* of your certificates, run "certbot renew" - Your account credentials have been saved in your Certbot configuration directory at /etc/letsencrypt. You should make a secure backup of this folder now. This configuration directory will also contain certificates and private keys obtained by Certbot so making regular backups of this folder is ideal. - If you like Certbot, please consider supporting our work by: Donating to ISRG / Let's Encrypt: https://letsencrypt.org/donate Donating to EFF: https://eff.org/donate-le

      Certbot will automatically reload Nginx to pick up the new configuration and certificates. Reload your site and it should switch you over to HTTPS automatically if you chose the redirect option.

      The default Etherpad editor, with a textbox and placeholder text

      You’re done! Try out your new Etherpad editor and invite some collaborators.

      Conclusion

      In this tutorial we set up Etherpad, with Nginx and Let’s Encrypt SSL certificates. Your Etherpad is now ready to use, but there’s more configuration you may want to do, including adding authenticated users, adding plugins, and customizing the user interface through skins.

      Your SQLite-backed Etherpad instance will be able to handle a moderate number of active users, but if you anticipate very high traffic, you may want to look into configuring a MySQL or PostgreSQL database instead.

      All of these configuration options are documented on the official Etherpad wiki.



      Source link

      How to Fix White Text and Missing Buttons in the WordPress Visual Editor (5 Steps)


      Picture this: You log in to your WordPress dashboard to write a new blog post. You fire up the Classic Editor, only to find a problem. All of the formatting buttons are missing, and the text is white and impossible to see.

      Encountering this error can be frustrating. It may even prevent you from getting work done, potentially putting you behind schedule. Fortunately, there are several solutions to this issue.

      In this article, we’ll look at exactly what this error involves and then walk you through how to fix it in five steps. Let’s get started!

      An Introduction to the White Text and Missing Buttons Error in the WordPress Visual Editor

      Before we dig into this error, let’s clarify exactly what we mean by the “visual editor.” This refers to the nicely-formatted editor you use to create your posts or pages in WordPress, whether that’s the Classic Editor or the newer Block Editor.

      The error we’re dealing with in this article occurs with the visual editor when using the Classic Editor plugin.

      The WordPress visual editor.

      The formatting buttons along the top suddenly vanish. Additionally, the text you write in the editor field may appear the same color as the background, making it unreadable.

      This makes using the Classic Editor pretty much impossible. If you rely on it to create your blog content, you’ll want to fix this problem as quickly as possible. Fortunately, this issue isn’t difficult to correct.

      What to Do Before You Start Troubleshooting

      Before you start troubleshooting, we recommend making a backup of your site. If you’re using DreamHost, we make the backup process incredibly easy.

      If you’re using a different hosting provider, it likely also offers a backup solution. You can consult the appropriate documentation for instructions. You can also opt for a WordPress backup plugin such as UpdraftPlus.

      Skip the WordPress Error Stress

      Avoid troubleshooting when you sign up for DreamPress. Our friendly WordPress experts are available 24/7 to help solve website problems — big or small.

      How to Fix White Text and Missing Buttons in the WordPress Visual Editor (In 5 Steps)

      This error is most likely either a problem with your browser cache or with the Classic Editor itself  — both of which can be easily fixed. We recommend following these five steps in order, and only proceeding to the next if you’re still experiencing the issue.

      Step 1: Clear Your Browser Cache

      The first and simplest method you can try is clearing your browser cache. Your browser saves versions of websites you visit (including your WordPress editor) to make loading them quicker.

      If your cache is corrupted or has stored a version of a page with errors, it may continue to load the broken page. Clearing the cache forces the browser to load a fresh copy of the editor, hopefully resolving the problem.

      To clear your cache in Google Chrome, click on the three-dot menu icon in the upper-right corner, and then click on Settings. Under the Privacy and security section, select Clear browsing data.

      Options for clearing user data and cache in Google Chrome.

      In the pop-up, make sure only Cached images and files is selected, and then click on Clear data. If you don’t use Chrome or want further guidance, you can refer to our guide on clearing your browser cache.

      Step 2: Deactivate All of Your WordPress Plugins

      Next, you can check if a plugin might be causing the issue. The best way to do this is to deactivate all your plugins (except for the Classic Editor), check to see if the problem is resolved, and then re-enable them one by one until the error returns.

      At that point, you’ll have isolated the problematic plugin. Then you can check for updates, look for alternatives, or simply leave it deactivated if it’s one you don’t depend on.

      To deactivate your WordPress plugins, head to the dashboard and navigate to Plugins > Installed Plugins.

      Check the box next to all of the plugins except for the Classic Editor. In the Bulk actions box, you can choose Deactivate and click on Apply. Then reload the WordPress editor and verify that everything is working properly.

      If deactivating your plugins resolved the error, your next step is to isolate the plugin that was causing it. You can go down the list one by one and click on the Activate button under the plugin’s name. After each one is reactivated, check to see if the error has reappeared. If not, you can move on until you find the problematic plugin.

      Step 3: Replace the TinyMCE Folder

      TinyMCE is the technical name for the WordPress Classic Editor. It’s an open-source editor that’s used by quite a few platforms, in addition to WordPress.

      An issue with the TinyMCE files can cause the editor’s buttons to disappear. To fix this, you can replace the folder with a fresh copy.

      First, download the version of WordPress your site is using. You can find the current version number by checking the bottom-right corner of any page in your WordPress dashboard.

      The WordPress version in use on a website.

      Open up the WordPress zip file and move the TinyMCE folder somewhere else, such as your desktop. It’s located at wp-includes/js/tinymce.

      Finally, you’ll need to access your WordPress site’s file system and replace the old folder with the new one. Head to your DreamPress account (see Step 1 for instructions). Under the Details section, click on Manage Files to open the DreamHost file browser.

      The DreamHost file manager.

      If you’re not a DreamHost customer, you can also access your site via Secure File Transfer Protocol (SFTP). Navigate to wp-includes/js and upload the new copy of the TinyMCE folder using the “up arrow” button in the bottom left. Then you can refresh your WordPress dashboard and check the editor again.

      Step 4: Modify the wp-config.php File

      If the above fixes haven’t worked, you can try modifying your wp-config.php file to force WordPress to load scripts individually. To do so, start by opening up your WordPress site in the DreamHost file manager or via SFTP, as outlined above.

      The wp-config.php file is located in the root directory of your site. Simply add the following line of code to the top of the file, right after the opening <php> tag:

      define(‘CONCATENATE_SCRIPTS’,false);

      Here’s what your code should look like:

      The wp-config.php file, showing the location of the opening <php> tag.

      When you’re done, save the file, refresh your site, and then try to load the visual editor again. If you’re still seeing the error message, proceed to the last step.

      Step 5: Install the Advanced Editor Tools Plugin

      Previously known as TinyMCE Advanced, the Advanced Editor Tools plugin is a version of the TinyMCE script that offers additional features.

      The Advanced Editor Tools plugin.

      Essentially, it provides you with a hybrid of the TinyMCE editor and the Block Editor. Also, it’s free to download and use.

      After you install and activate it, you can locate the settings by navigating to Settings > Advanced Editor Tools.

      The Advanced Editor Tools plugin settings.

      Once it’s activated and you’ve configured the settings to your liking, refresh your WordPress site. Now, when you go to a new WordPress post or page, you should see that the previously-missing buttons appear in your visual editor.

      Additional WordPress Issue Resources

      Want to learn more about fixing common WordPress errors? We’ve put together several guides to help you.

      Website Management Made Easy

      Let us handle the backend — we’ll manage and monitor your website so it’s safe, secure, and always up.

      WordPress Visual Editor Problem, Solved

      If your WordPress editor is experiencing problems, such as unreadable white text or disappearing buttons, don’t worry. Like many WordPress errors, this one is relatively simple to fix, and there are multiple methods you can try.

      As we’ve discussed, you can follow these five steps to resolve the white text and missing buttons error in the WordPress editor:

      1. Clear your browser cache.
      2. Deactivate your WordPress plugins.
      3. Replace the TinyMCE folder with a fresh copy.
      4. Modify your wp-config.php file.
      5. Install the Advanced Editor Tools plugin.

      If you want to make troubleshooting easier, consider using DreamPress, our managed WordPress hosting solution. With DreamPress, we take care of problems for you, so you can focus on what matters.



      Source link

      How To Set Up Your CSS and HTML Practice Project With a Code Editor



      Part of the Series:
      How To Build a Website With CSS

      This tutorial is part of a series on creating and customizing this website with CSS, a stylesheet language used to control the presentation of websites. You may follow the entire series to recreate the demonstration website and gain familiarity with CSS or use the methods described here for other CSS website projects.

      Before proceeding, we recommend that you have some knowledge of HTML, the standard markup language used to display documents in a web browser. If you don’t have familiarity with HTML, you can follow the first ten tutorials of our series How To Build a Website With HTML before starting this series.

      Introduction

      In this tutorial, you will set up the folders and files necessary for exploring CSS and building a website. Using a code editor, you will create a project directory for our website, a folder and file for our CSS code, a file for our HTML code, and a folder for images. This tutorial series uses Visual Studio Code, a code editor freely-available for Mac, Windows, or Linux, but you may use whichever code editor you prefer. Note that certain instructions may need to be slightly modified if you use a different editor.

      How To Create HTML and CSS Files and Folders

      After opening your preferred text editor, open up a new project folder and name it css-practice. You’ll use this folder to store all of the files and folders you create in the course of this tutorial series.

      To create a new project folder in Visual Studio Code, navigate to the “File” menu item in the top menu and select “Add Folder to Workspace.” In the new window, click the “New Folder” button and create a new folder called css-practice:

      Gif of process of adding a project folder in Visual Studio Code

      Next, create a new folder inside css-practice and name it css. Inside this folder, open up a new file in your project directory and save it as styles.css—this is the file you’ll use to store our CSS style rules. If you are using Visual Studio Code, you can create a new folder by using Right Click(on Windows) or CTRL + Left Click (on Mac) on the css-practice folder, selecting “New Folder” and creating the css folder. Then, click Right Click(on Windows) or CTRL + Left Click (on Mac) on the new css folder, select “New File”, and create the file styles.css as illustrated in the gif below:

      Gif of how to add CSS folder and file

      Save the file and leave it open.

      You also need to create a file to add our HTML content—the text, images, and HTML elements that will be rendered in the browser. In the project directory css-practice, open an additional new file and save it as index.html in the same way you created the styles.css file above. Make sure to save this index.html file in the css-practice folder and not in the css folder.

      Next, you need to add a line of code in the index.html document that instructs the browser to use the styles.css file as our style sheet. To do this, you’ll use the HTML <link> tag and link to the styles.css file. Add the following code snippet to your HTML document:

      index.html

      <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/css/styles.css">
      

      This code snippet tells the browser to interpret the HTML code according to the stylesheet located at css/styles.css. Make sure you don’t erase this line while adding or deleting content to your index.html file throughout this tutorial series. Save your index.html file and keep it open.

      Finally, create an additional folder inside css-practice and name it images in the same way that you created the css folder above. This folder will be where you save any images you use in this tutorial series.

      You should now have a project folder named css-practice that contains the folders and files necessary for exploring CSS in this tutorial series:

      • A folder named css that contains the file styles.css
      • An empty folder named images
      • A file named index.html

      If you are using Visual Studio Code, your editor should now display the following file tree and the open files:

      Visual Studio Code Editor with file tree displayed

      Notice that the file names include extensions (.html and .css) that refer to the type of content they contain. You will add content to these files in our hands-on exercises in the tutorials that follow.

      Debugging and Troubleshooting CSS and HTML

      Precision is important when working with HTML and CSS. Even an extra space or mistyped character can keep your code from working as expected.

      If your HTML or CSS code is not rendering in the browser as intended, make sure you have written the code exactly as written in the tutorial. Though we encourage you to manually write out the code for the purpose of learning, copy and pasting can be helpful at times to ensure that your code matches the examples.

      HTML and CSS errors can be caused by a number of things. Check your markup and CSS rules for extra or missing spaces, missing or misspelled tags, and missing or incorrect punctuation or characters. You should also make sure that you don’t accidentally use “curly” or “smart” quotation marks like and " that are often used by word processors. Curly quotes are designed for human-readable text and will cause an error in your code as they are not recognized as quotation marks by browsers. By typing quotation marks directly into your code editor, you can make sure you are using the right kind.

      Also, each time you change your code, make sure to save your file before reloading it in the browser to check your results.

      A Quick Note on Automatic HTML Support Features

      Some code editors—such as the Visual Studio Code editor we’re using in this series—provide automatic support for writing HTML code. For Visual Studio Code, that support includes smart suggestions and auto completions. While this support is often useful, be aware that you might generate extra code that will create errors if you’re not used to working with these support features. If you find these features distracting, you can turn them off in the code editor’s preferences.

      Conclusion

      You are now ready to proceed with the tutorial series. In the next tutorial, you’ll begin exploring how CSS rules are used to control the style and layout of HTML content on a webpage.



      Source link