在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:nytimes/ice开源软件地址:https://github.com/nytimes/ice开源编程语言:JavaScript 91.3%开源软件介绍:ice.jsIce is a track changes implementation, built in javascript, for anything that is DemoDownloadFeatures
Get StartedContenteditable initialization - If you are comfortable with maintaining your own text editing utilities, then you can initialize ice on any block element: var tracker = new ice.InlineChangeEditor({
// element to track - ice will make it contenteditable
element: document.getElementById('mytextelement'),
// tell ice to setup/handle events on the `element`
handleEvents: true,
// set a user object to associate with each change
currentUser: { id: 1, name: 'Miss T' }
});
// setup and start event handling for track changes
tracker.startTracking(); Additional options: var tracker = new ice.InlineChangeEditor({
element: document.getElementById('mytextelement'),
handleEvents: true,
currentUser: { id: 1, name: 'Miss T' },
// optional plugins
plugins: [
// Add title attributes to changes for hover info
'IceAddTitlePlugin',
// Two successively typed dashes get converted into an em-dash
'IceEmdashPlugin',
// Track content that is cut and pasted
{
name: 'IceCopyPastePlugin',
settings: {
// List of tags and attributes to preserve when cleaning a paste
preserve: 'p,a[href],span[id,class]em,strong'
}
}
]
}).startTracking(); Useful utilities in the API: acceptChange, rejectChange // Accept/Reject the change at the current range/cursor position or at the given `optionalNode`
tracker.acceptChange(optionalNode);
tracker.rejectChange(optionalNode); acceptAll, rejectAll // Accept/Reject all of the changes in the editable region.
tracker.acceptAll();
tracker.rejectAll(); getCleanContent // Returns a clean version, without tracking tags, of the content in the editable element or
// out of the optional `body` param. After cleaning, the `optionalCallback` param is called
// which should further modify and return the body.
tracker.getCleanContent(optionalBody, optionalCallback); setCurrentUser // Set the desired user to track. A user object has the following properties: { `id`, `name` }.
tracker.setCurrentUser({id: 2, name: 'Miss T'}); getChanges // Get the internal list of change objects which are modeled from all of the change tracking
// nodes in the DOM. This might be useful to add a more sophisticated change tracking UI/UX.
// The list is key'ed with the unique change ids (`cid attribute`) and points to an object
// with metadata for a change: [changeid] => {`type`, `time`, `userid`, `username`}
var changes = tracker.getChanges(); Tinymce initialization - Add the ice plugin to your tinymce plugins directory and include the following in your tinymce init: tinymce.init({
plugins: 'ice',
theme_advanced_buttons1: 'ice_togglechanges,ice_toggleshowchanges,iceacceptall,icerejectall,iceaccept,icereject',
ice: {
user: { name: 'Miss T', id: 1},
preserveOnPaste: 'p,a[href],i,em,strong',
// Optional param - defaults to the css found in the plugin directory
css: 'http://example.com/custom.css'
},
...
}); Limitations/Dependencies
ChangelogMaster
0.5.0
License |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论