Canvas网络教学平台安装RCE富文本编辑插件（Rich Content Editor）

2022-04-24 14:41:02 浏览数 (1)

Rich Content Editor

Canvas includes a new rich content editor component to support a consistent editor experience across multiple applications in the Canvas ecosystem. To make use of this component you need to run a supporting API server. See the Canvas RCE API Documentation for information on running the service and configuring Canvas to make use of it. Starting July 14, 2018, the stable branch of canvas-lms will require this service to be running and configured for full rich content editing functionality.

目前最新版的Canvas LMS已经要求必须装RCE增强工具了，但是官网的文档，渣渣都不如。。。

设置里说明：

富内容编辑器侧栏增强 hidden 启用功能：富内容编辑器侧栏增强 在任何地方使用新的带有增强侧栏的富内容编辑器

原始效果图：

安装RCE插件后：

不开启增强工具是这样，开启之后看最后一个图，样式还是很大差距的。

安装：

网址：https://github.com/instructure/canvas-rce-api

0. 克隆代码

代码语言：javascript复制
cd /var
git clone https://github.com/instructure/canvas-rce-api.git

1. 安装依赖

代码语言：javascript复制
cd canvas-rce-api
npm install --production

如果提示无权限Permission denied，加了sudo也没用的话，执行下一句安装

代码语言：javascript复制
npm install --unsafe-perm=true --allow-root

2. 添加配置文件

复制配置文件：cp .env.example .env 修改配置文件：vi .env

代码语言：javascript复制
PORT=3000
NODE_ENV=production
STATSD_HOST=127.0.0.1
STATSD_PORT=8125
ECOSYSTEM_SECRET="astringthatisactually32byteslong"
ECOSYSTEM_KEY="astringthatisactually32byteslong"
#CIPHER_PASSWORD=TEMP_PASSWORD

其中，port代表api服务使用的端口，访问即为localhost:port。 ECOSYSTEM_SECRET和ECOSYSTEM_KEY即为Canvas配置文件中dynamic_settings.yml配置的。 需配置dynamic_settings.yml中rich-content-service下的app-host。（貌似需要用域名，因为是前端访问的，不是主机访问，故不能使用localhost或内网ip地址）

代码语言：javascript复制
production:
  config:
    canvas:
      canvas:
        encryption-secret: "astringthatisactually32byteslong"
        signing-secret: "astringthatisactually32byteslong"
      rich-content-service:
        app-host: "https://你的域名/rce"

参数数明：

代码语言：javascript复制
Configuration options are set via the following environment variables:

ECOSYSTEM_KEY: Required The encryption secret shared with Canvas.
ECOSYSTEM_SECRET: Required The signing secret shared with Canvas.
FLICKR_API_KEY: Required to support Flickr image search.
YOUTUBE_API_KEY: Required for querying titles of YouTube embeds.
NODE_ENV: This should always be set to production when running in production.
PORT: Defaults to port 3000. This is not used when running with Docker since Node Passenger monkey patches node http to control the port each node process is listening on.
STATSD_HOST: If you would like to collect metrics with statsd, this should be set to the host of your statsd server.
STATSD_PORT: If you would like to collect metrics with statsd, this should be set to the port of your statsd server.

3. 启动

代码语言：javascript复制
cd canvas-rce-api
npm run start:dev

4. 修改APache配置文件

在/etc/apache2/sites-available/canvas.conf中80和443节点，末尾添加转发。

代码语言：javascript复制
ProxyPass /rce/ http://127.0.0.1:3000/

就是可以通过https://域名/rce访问到这个插件。 然后执行这几个命令。（不知道什么用，但貌似很重要）

代码语言：javascript复制
sudo a2enmod proxy
sudo a2enmod proxy_http
sudo a2enmod proxy_balancer
sudo a2enmod lbmethod_byrequests
sudo service apache2 restart

/etc/apache2/apache2.conf末尾增加ServerName localhost

5. Canvas后台开启

设置，功能选项，富内容编辑器侧栏增强，打开

canvas api https 网络安全

0 人点赞