阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.PrettyTextDiff 中文API文档

      插件 jQuery.PrettyTextDiff 中文API文档 https://github.com/arnab/jquery.PrettyTextDiff jQuery.PrettyTextDiff

      A wrapper around Google’s diff_match_patch library. Google’s library is awesome and can be fine-tuned in multiple ways, but their API is a bit awkward, probably cause they support the same API in 8 different languages.

      Also, the library does not provide any beautification of the diff-ed output. They provide a reference implementation (look for diff_prettyHtml in the API docs ) but recommend developers to write their own - and the given method is not customizable .

      This library is an alternative to embedding 30+ lines of cryptic JS in your code. In short, it tries to bridge the gap between the awesome diff_match_patch library and a simple user-experience.

      This blog post explains things in a bit more detail.

      Demo

      jsfiddle demo

      Download

      From npm.js.

      Usage

      First, include the libraries

      • include jquery.js, diff_match_patch.js and jquery.pretty-text-diff.js in your page, something like:
      <script src="/path/to/jquery.min.js" type="text/javascript"></script>
      <script src="/path/to/diff_match_patch.js" type="text/javascript"></script>
      <script src="/path/to/deal_override_requests.min.js" type="text/javascript"></script>
      

      Next sprinkle a bit of JS

      • something like:
        $(selector).prettyTextDiff({
          // options
        });
      

      Check out the customizable options below.

      Optionally, style the diff

      • Style <ins> and <del> as much as you want. A simple example is in the jsfiddle demo.

      Customizable options

      • Either mark up your HTML to use the default selectors, or use these options:
      optiondefaultexplanation
      originalContainer.originalCSS-selector for the element that holds the original text. $(elem).text() will be used to extract the text.
      changedContainer.changedCSS-selector for the element that holds the changed text. $(elem).text() will be used to extract the text.
      diffContainer.diffCSS-selector for the element where the diff will be put.
      cleanuptrueWhether diff_match_patch's diff_cleanupSemantic() will be used or not. true will produce a human-redable diff, whereas false will be more to the liking of machines. See the demo for the effect.
      debugfalsesee some debug output in your browser's console
      originalContentv1.0.4+NonePass the original content as a parameter in your JS file, instead of creating an element in your HTML code to extract this content.
      changedContentv1.0.4+NonePass the changed content as a parameter in your JS file, instead of creating an element in your HTML code to extract this content.

      Development

      • Install node and npm (comes with node now)
      • Install coffeescript and uglify: npm install -g coffee-script uglify-js
      • cake build to produce the output JS (minified)
      • Increment the version in the coffeescript (and compiled/minified) javascript source and the package.json file.
      • git tag x.y.z
      • Push: git push && git push --tags && npm publish

      Contributing

      • Fork this repo
      • create a feature/bugfix branch: git checkout -b branch_name
      • Develop
        • Just change the coffeescript source. When your PR is merged, I will generate the JS flavors and update the versioning.
      • Push to your repo: git push origin branch_name
      • Submit a PR

      License

      Copyright (c) 2013 Arnab Deka. Licensed under MIT LICENSE for details.

      目录
      目录