让代码更简单

当前位置:代码狗 > 经验教程 > 实用教程 > 正文

可视化前端编辑插件ContentTools所见即所得

重要:本文最后更新于2019-12-09 08:36:11,某些文章具有时效性,若有错误或已失效,请在下方留言或联系代码狗

今天在头条上看到推送的这个ContentTools文章,一眼就相中了它。可视化前端编辑插件ContentTools所见即所得,看起来是我想要的效果,下面一起看看这款JavaScript插件是怎么使用的吧!

可视化前端编辑插件ContentTools所见即所得

可视化前端编辑插件ContentTools所见即所得

首先下载插件资源,这是开源项目,源码在GitHub上,地址是:https://github.com/GetmeUK/ContentTools

下载后我们找到压缩包中build目录,里面的资源是我们需要的。

下面新建项目,结构如下:

/site
    /assets
        /images
            - ce-drop-above.png
            - ce-drop-below.png
            - ce-drop-left.png
            - ce-drop-right.png
            - video.png
        - content-tools.min.js
        - content-tools.min.css
        - icons.woff

准备HTML

 <div data-editable data-name="main-content">
        <blockquote>
            Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.
        </blockquote>
        <p>John F. Woods</p>
    </div>
    <h1 data-editable data-name="heading">Content</h1>
    <div data-editable data-name=heading>
        <h1>Content</h1>
    </div>

js初始化

var  editor = ContentTools.EditorApp.get();
editor.init('*[data-editable]', 'data-name');

JavaScript将根据选择器选择的元素初始化编辑区域,以便编辑器编辑。

还可以为编辑器添加保存或取消事件。

editor.addEventListener('saved', function (ev) {
    var name, payload, regions, xhr;
    // Check that something changed
    regions = ev.detail().regions;
    if (Object.keys(regions).length == 0) {
        return;
    }
    // Set the editor as busy while we save our changes
    this.busy(true);
    // Collect the contents of each region into a FormData instance
    payload = new FormData();
    for (name in regions) {
        if (regions.hasOwnProperty(name)) {
            payload.append(name, regions[name]);
        }
    }
    // Send the update content to the server to be saved
    function onStateChange(ev) {
        // Check if the request is finished
        if (ev.target.readyState == 4) {
            editor.busy(false);
            if (ev.target.status == '200') {
                // Save was successful, notify the user with a flash
                new ContentTools.FlashUI('ok');
            } else {
                // Save failed, notify the user with a flash
                new ContentTools.FlashUI('no');
            }
        }
    };
    xhr = new XMLHttpRequest();
    xhr.addEventListener('readystatechange', onStateChange);
    xhr.open('POST', '/save-my-page');
    xhr.send(payload);
});

当用户保存页面时,我们使用Ajax将每个区域的内容发送到服务器,当然你可以不保存到服务器。

感觉很棒!可以赞赏支持我哟~

赞(0) 打赏

评论 1

  1. #1

    路过路过,看不懂……

    缙哥哥1个月前 (12-09)回复
×

请作者吃根烤肠!

支付宝