ContentBlocks

Create simple editable CMS content blocks in node.js. Wrapper for Create.js CMS framework.

ContentBlocks is a wrapper for the Create.js CMS interface. It allows you to define CMS editable content blocks within your web pages by including HTML5 tags around your content. After adding the markup, simply click Edit in the Create.js toolbar to edit your content in-line on the page. Click Save to persist the data to your CMS back-end web service.

ContentBlocks includes a node.js module to pre-render CMS content upon page-load. It also includes pre-defined routes and REST web service integration for saving content back to the CMS. In short, ContentBlocks makes it easy to use the Create.js CMS framework in node.js

Demo http://contentblocks.herokuapp.com

Demo Source https://github.com/primaryobjects/contentblocks-demo

$ npm install contentblocks

About Create.js

From the Create.js web site @ http://createjs.org "Create.js is a comprehensive web editing interface for Content Management Systems. It is designed to provide a modern, fully browser-based HTML5 environment for managing content. Create can be adapted to work on almost any content management backend."

Usage

app.js

var app = express();
var contentBlocks = require('contentblocks')({ app: app, host: 'red-ant.herokuapp.com', port: 80, pathFind: '/v1/nest/find?q={"@subject":"[id]"}', pathPost: '/v1/nest', pathPut: '/v1/nest/[id]', pathDelete: '/v1/nest/[id]' });

app.use(contentBlocks.render); // Place this line in your app.use() section, so it can pre-render content.

web site

Copy the contents of node_modules/contentblocks/scripts into your web site javascript folder. These contain the CMS user interface controls.

Copy the contents of node_modules/contentblocks/css into your web site css folder. These contain the CMS user interface styles.

In your web site footer view (footer.jade, etc), include the scripts and css:

script(src='http://code.jquery.com/ui/1.9.2/jquery-ui.js')
script(src='/scripts/underscore-min.js')
script(src='/scripts/backbone-min.js')
script(src='/scripts/vie-min.js')
script(src='/scripts/jquery.tagsinput.min.js')
script(src='/scripts/jquery.rdfquery.min.js')
script(src='/scripts/annotate-min.js')
script(src='/scripts/rangy-core-1.2.3.js')
script(src='/scripts/hallo-min.js')
script(src='/scripts/aloha/lib/require.js')
script(src='/scripts/aloha/lib/aloha-full.min.js', data-aloha-plugins='common/ui,common/format,common/link,common/image,extra/sourceview')
script(src='/scripts/create-min.js')
script(src='/scripts/contentblocks.js')

link(rel='stylesheet', href='/css/aloha/css/aloha.css')
link(rel='stylesheet', href='/css/aloha/css/aloha-common-extra.css')
link(rel='stylesheet', href='/css/aloha/css/aloha-core.css')
link(rel='stylesheet', href='/css/aloha/css/aloha-reset.css')
link(rel='stylesheet', href='/css/aloha/css/aloha-sidebar.css')
link(rel='stylesheet', href='/css/create-ui/css/create-ui.css')
link(rel='stylesheet', href='/css/midgard-notifications/midgardnotif.css')

Configuration

Two changes need to be made to point to your own REST web service url for persisting the CMS content:

  1. Replace the host and paths in the require('contentBlocks')({ ... }) statement, with your own CMS REST urls. ContentBlocks and Create.js are compatible with any CMS backend system that provides a REST interface (GET/POST/PUT/DELETE) for managing content.

  2. Replace the value for "restUrl" in /scripts/contentblocks.js to point to your web service "find" method.

For step 1, the paths should be specified as shown below. Use [id] as a placeholder in the url for where the actual content block id will be inserted automatically:

pathFind: web service path to Find method, example: '/v1/nest/find?q={"@subject":"[id]"}'

pathPost: web service path to Insert (POST) method, example: '/v1/nest'

pathPut: web service path to Update (PUT) method, example: '/v1/nest/[id]'

pathDelete: web service path to Delete (DELETE) method, example: '/v1/nest/[id]'

Configuration for localhost REST Service

If you are not using a remote REST service to store your CMS data, you can instead have contentblocks post back to your local app to load and save content blocks. For a working example, see the ContentBlocks Demo on localhost.

To do this, make the following changes:

  1. In scripts/contentblocks.js, set the value for "restUrl" to point to localhost, For example:
var restUrl = 'http://localhost:3000/cms/find?q={"@subject": "[id]"}';
  1. In scripts/contentblocks.js line 84, change the dataType from "jsonp" to "json":
dataType: 'json',
  1. In your app.js, set the contentBlocks initialization line to point to localhost. For example:
var contentBlocks = require('contentblocks')({ app: app, host: 'localhost', port: 3000, pathFind: '/cms/find?q={"@subject":"[id]"}', pathPost: '/cms', pathPut: '/cms/[id]', pathDelete: '/cms/[id]' });
  1. In app.js, at the top of the file, add a line to include your routes code:
var cms = require('./routes/cms');
  1. In app.js, add routes for the CMS calls:
// REST API routes.
app.get('/cms/find', cms.find);
app.get('/cms/:itemId', cms.get);
app.put('/cms/:itemId', cms.update);
app.delete('/cms/:itemId', cms.delete);
app.post('/cms', cms.insert);
  1. Create a folder under /routes/cms, with a file index.js, that will contain your route controller code. These methods will respond to the get, post, put, delete to load data from your database. See the ContentBlocks Demo localhost for a complete working example.

Creating a CMS Content Block

The following Jade (HTML, etc) markup may be used to indicate editable CMS content blocks:

    #myContentBlock(style='font-size:16px; color:#00000;', about='MyContentBlock')
        div(property='content')
            if typeof(MyContentBlock_content) !== 'undefined'
                != MyContentBlock_content
            else
                | [edit here]

For more details on available markup, see http://createjs.org/guide/#rdfa

Showing the Controls to Administrator Users Only

To restrict editing of the CMS content to specific users, you can use a url parameter to enable and disable the CMS controls. For example, the following url (containing the parameter admin=1) could allow editing of the CMS blocks on the page:

http://localhost:3000/?admin=1

To do this, first wrap your script and css references in an if/then block, as shown below. This could be placed in your footer.jade file:

if isAdmin
    script(src='http://code.jquery.com/ui/1.9.2/jquery-ui.js')
    script(src='/scripts/underscore-min.js')
    script(src='/scripts/backbone-min.js')
    script(src='/scripts/vie-min.js')
    script(src='/scripts/jquery.tagsinput.min.js')
    script(src='/scripts/jquery.rdfquery.min.js')
    script(src='/scripts/annotate-min.js')
    script(src='/scripts/rangy-core-1.2.3.js')
    script(src='/scripts/hallo-min.js')
    script(src='/scripts/aloha/lib/require.js')
    script(src='/scripts/aloha/lib/aloha-full.min.js', data-aloha-plugins='common/ui,common/format,common/link,common/image,extra/sourceview')
    script(src='/scripts/create-min.js')
    script(src='/scripts/contentblocks.js')

    link(rel='stylesheet', href='/css/aloha/css/aloha.css')
    link(rel='stylesheet', href='/css/aloha/css/aloha-common-extra.css')
    link(rel='stylesheet', href='/css/aloha/css/aloha-core.css')
    link(rel='stylesheet', href='/css/aloha/css/aloha-reset.css')
    link(rel='stylesheet', href='/css/aloha/css/aloha-sidebar.css')
    link(rel='stylesheet', href='/css/create-ui/css/create-ui.css')
    link(rel='stylesheet', href='/css/midgard-notifications/midgardnotif.css')

Next, in the route for your view, include a value for isAdmin, indicating if the current user should be able to edit the CMS blocks, as follows:

var remoteip = require('remoteip');

exports.index = function (req, res) {
    res.render('index', { isAdmin: isCurrentUserAdministrator(req) });
};

function isCurrentUserAdministrator(req) {
    var adminIp = remoteip.get(req);
    return ((adminIp == '123.456.789.012' || adminIp == '127.0.0.1') && req.query['admin'] == '1');
}

That's it! If you load the page without the url parameter, you should not see the CMS controls. If you add the parameter admin=1 to the url, you should see the controls displayed.

Notes

After setup, refresh your web page and you should see the Create.js toolbar along the top of the page. Click Edit to begin editing the content and click Save to save the content to the CMS. Upon clicking Save, the ContentBlocks module will call the REST web service url that you defined in the setup in order to persist the content to the CMS database.

You are welcome to use the demo REST web service url (red-ant.herokuapp.com, which loads and saves JSON objects to mongodb via REST). However, there is no gaurantee that the web service will remain active. It is recommended to point to your own REST web service, mongodb interface, or CMS.

Author

Kory Becker http://www.primaryobjects.com

View @ GitHub https://github.com/primaryobjects/contentblocks



ContentBlocks

在node.js中创建简单的可编辑CMS内容块。 Wrapper for Create.js CMS框架。

ContentBlocks是Create.js CMS界面的包装器。它允许您通过在您的内容周围包含HTML5标签来定义网页中的CMS可编辑内容块。添加标记后,只需在Create.js工具栏中单击编辑即可在页面上进行在线编辑。单击保存将数据保存到CMS后端Web服务。

ContentBlocks包含一个node.js模块,用于在页面加载时预渲染CMS内容。它还包括预定义的路由和REST Web服务集成,以将内容保存回CMS。简而言之,ContentBlocks可以轻松地使用node.js中的Create.js CMS框架

演示 http://contentblocks.herokuapp.com

演示源 https://github.com/primaryobjects/contentblocks-demo

$ npm install contentblocks

关于Create.js

从Create.js网站@ http://createjs.org Create.js是一个面向内容管理系统的综合网页编辑界面,旨在提供一个基于浏览器的现代HTML5环境,用于管理内容。创建可以适应几乎任何内容管理后端的工作。

用法

app.js

var app = express();
var contentBlocks = require('contentblocks')({ app: app, host: 'red-ant.herokuapp.com', port: 80, pathFind: '/v1/nest/find?q={"@subject":"[id]"}', pathPost: '/v1/nest', pathPut: '/v1/nest/[id]', pathDelete: '/v1/nest/[id]' });

app.use(contentBlocks.render); // Place this line in your app.use() section, so it can pre-render content.

网站

将node_modules / contentblocks / scripts的内容复制到您的网站javascript文件夹中。这些包含CMS用户界面控件。

将node_modules / contentblocks / css的内容复制到您的网站css文件夹中。这些包含CMS用户界面样式。

在您的网站页脚视图(footer.jade等)中,包含脚本和css:

script(src='http://code.jquery.com/ui/1.9.2/jquery-ui.js')
script(src='/scripts/underscore-min.js')
script(src='/scripts/backbone-min.js')
script(src='/scripts/vie-min.js')
script(src='/scripts/jquery.tagsinput.min.js')
script(src='/scripts/jquery.rdfquery.min.js')
script(src='/scripts/annotate-min.js')
script(src='/scripts/rangy-core-1.2.3.js')
script(src='/scripts/hallo-min.js')
script(src='/scripts/aloha/lib/require.js')
script(src='/scripts/aloha/lib/aloha-full.min.js', data-aloha-plugins='common/ui,common/format,common/link,common/image,extra/sourceview')
script(src='/scripts/create-min.js')
script(src='/scripts/contentblocks.js')

link(rel='stylesheet', href='/css/aloha/css/aloha.css') link(rel='stylesheet', href='/css/aloha/css/aloha-common-extra.css') link(rel='stylesheet', href='/css/aloha/css/aloha-core.css') link(rel='stylesheet', href='/css/aloha/css/aloha-reset.css') link(rel='stylesheet', href='/css/aloha/css/aloha-sidebar.css') link(rel='stylesheet', href='/css/create-ui/css/create-ui.css') link(rel='stylesheet', href='/css/midgard-notifications/midgardnotif.css')

配置

需要进行两次更改才能指向您自己的REST Web服务网址来保持CMS内容:

  1. Replace the host and paths in the require('contentBlocks')({ … }) statement, with your own CMS REST urls. ContentBlocks and Create.js are compatible with any CMS backend system that provides a REST interface (GET/POST/PUT/DELETE) for managing content.

  2. Replace the value for "restUrl" in /scripts/contentblocks.js to point to your web service "find" method.

对于步骤1,路径应如下所示指定。在URL中使用[id]作为占位符,以便自动插入实际的内容块ID:

pathFind:查找方法的Web服务路径,示例:’/ v1 / nest / find?q = {@ subject:[id]}’

pathPost:插入(POST)方法的Web服务路径,例如:’/ v1 / nest’

pathPut:更新(PUT)方法的Web服务路径,例如:’/ v1 / nest / [id]’

pathDelete:删除(DELETE)方法的Web服务路径,例如:’/ v1 / nest / [id]’

localhost REST服务的配置

如果您没有使用远程REST服务来存储CMS数据,则可以将contentblocks发回到本地应用程序来加载和保存内容块。有关工作示例,请参阅 localhost 上的ContentBlocks演示。

为此,进行以下更改:

  1. In scripts/contentblocks.js, set the value for "restUrl" to point to localhost, For example:
var restUrl = 'http://localhost:3000/cms/find?q={"@subject": "[id]"}';
  1. In scripts/contentblocks.js line 84, change the dataType from "jsonp" to "json":
dataType: 'json',
  1. In your app.js, set the contentBlocks initialization line to point to localhost. For example:
var contentBlocks = require('contentblocks')({ app: app, host: 'localhost', port: 3000, pathFind: '/cms/find?q={"@subject":"[id]"}', pathPost: '/cms', pathPut: '/cms/[id]', pathDelete: '/cms/[id]' });
  1. In app.js, at the top of the file, add a line to include your routes code:
var cms = require('./routes/cms');
  1. In app.js, add routes for the CMS calls:
// REST API routes.
app.get('/cms/find', cms.find);
app.get('/cms/:itemId', cms.get);
app.put('/cms/:itemId', cms.update);
app.delete('/cms/:itemId', cms.delete);
app.post('/cms', cms.insert);
  1. Create a folder under /routes/cms, with a file index.js, that will contain your route controller code. These methods will respond to the get, post, put, delete to load data from your database. See the ContentBlocks Demo localhost for a complete working example.

创建CMS内容块

以下翡翠(HTML等)标记可用于指示可编辑的CMS内容块:

    #myContentBlock(style='font-size:16px; color:#00000;', about='MyContentBlock')
        div(property='content')
            if typeof(MyContentBlock_content) !== 'undefined'
                != MyContentBlock_content
            else
                | [edit here]

有关可用标记的更多详细信息,请参阅 http://createjs.org/guide/#rdfa

仅向管理员用户显示控件

要限制将CMS内容编辑为特定用户,您可以使用url参数来启用和禁用CMS控件。例如,以下url(包含参数admin = 1)可以允许编辑页面上的CMS块:

http://localhost:3000/?admin=1
为了做到这一点,首先将你的脚本和CSS引用包装在if / then块中,如下所示。这可以放在你的footer.jade文件中:

if isAdmin
    script(src='http://code.jquery.com/ui/1.9.2/jquery-ui.js')
    script(src='/scripts/underscore-min.js')
    script(src='/scripts/backbone-min.js')
    script(src='/scripts/vie-min.js')
    script(src='/scripts/jquery.tagsinput.min.js')
    script(src='/scripts/jquery.rdfquery.min.js')
    script(src='/scripts/annotate-min.js')
    script(src='/scripts/rangy-core-1.2.3.js')
    script(src='/scripts/hallo-min.js')
    script(src='/scripts/aloha/lib/require.js')
    script(src='/scripts/aloha/lib/aloha-full.min.js', data-aloha-plugins='common/ui,common/format,common/link,common/image,extra/sourceview')
    script(src='/scripts/create-min.js')
    script(src='/scripts/contentblocks.js')

link(rel='stylesheet', href='/css/aloha/css/aloha.css')
link(rel='stylesheet', href='/css/aloha/css/aloha-common-extra.css')
link(rel='stylesheet', href='/css/aloha/css/aloha-core.css')
link(rel='stylesheet', href='/css/aloha/css/aloha-reset.css')
link(rel='stylesheet', href='/css/aloha/css/aloha-sidebar.css')
link(rel='stylesheet', href='/css/create-ui/css/create-ui.css')
link(rel='stylesheet', href='/css/midgard-notifications/midgardnotif.css')

接下来,在您的视图的路由中,包含isAdmin的值,指示当前用户是否应该能够编辑CMS块,如下所示:

var remoteip = require('remoteip');

exports.index = function (req, res) { res.render('index', { isAdmin: isCurrentUserAdministrator(req) }); };

function isCurrentUserAdministrator(req) { var adminIp = remoteip.get(req); return ((adminIp == '123.456.789.012' || adminIp == '127.0.0.1') && req.query['admin'] == '1'); }

就是这样!如果您加载没有url参数的页面,则不应该看到CMS控件。如果你添加参数admin = 1到url,你应该看到控件显示。

注意

安装完成后,刷新您的网页,您应该会看到页面顶部的Create.js工具栏。单击编辑开始编辑内容,然后单击保存将内容保存到CMS。点击保存后,ContentBlocks模块将调用您在安装程序中定义的REST Web服务网址,以便将内容保留到CMS数据库。

欢迎您使用演示REST Web服务网址(red-ant.herokuapp.com,它通过REST加载和保存JSON对象到mongodb)。但是,网络服务不会保持活动状态。建议您指向自己的REST Web服务,mongodb界面或CMS。

作者

Kory Becker http://www.primaryobjects.com

查看@ GitHub https://github.com/primaryobjects/contentblocks




相关问题推荐