ckeditor/plugins/crossreference/README.md
author indvd00m (gotoindvdum[at]gmail[dot]com)
Sat, 17 Dec 2016 03:14:48 +0300
changeset 2 467e24fbc60e
parent 0 44d330dccc59
child 5 c925ae656709
permissions -rw-r--r--
Fix using git repo
     1 CrossReference Plugin for CKEditor 4
     2 =================================
     3 
     4 Adds cross references links with optional auto-numeration for chapters, images, tables and references. Other types of references can be defined in config.
     5 
     6 ## Online demo
     7 
     8 Try the plugin demo at <http://indvd00m.com/crossreference/>.
     9 
    10 ## Description
    11 
    12 Two main conceptions - anchor and link to anchor. There are 4 type of references defined by default: chapter, image, table, reference. Example of anchor of type `image` in raw html:
    13 ```html
    14 <a 
    15 	class="cross-reference cross-anchor" 
    16 	cross-reference="image" 
    17 	cross-anchor="" 
    18 	cross-guid="7d24373b-0756-481d-bf97-5a17ffdf3a28" 
    19 	cross-name="Experimental result" 
    20 	cross-number="1" 
    21 	name="image-7d24373b-0756-481d-bf97-5a17ffdf3a28"
    22 	>
    23 		Fig. 1. Experimental result.
    24 </a>
    25 ```
    26 Example of link to this anchor in raw html:
    27 ```html
    28 <a 
    29 	class="cross-reference cross-link" 
    30 	cross-reference="image" 
    31 	cross-link="" 
    32 	cross-guid="7d24373b-0756-481d-bf97-5a17ffdf3a28" 
    33 	cross-name="Experimental result" 
    34 	cross-number="1" 
    35 	href="#image-7d24373b-0756-481d-bf97-5a17ffdf3a28" 
    36 	title="Fig. 1. Experimental result."
    37 	>
    38 		1
    39 </a>
    40 ```
    41 After every inserting of anchor or links to anchor all references will be updated to be a concerted. Or you can manually update cross-references by selecting option in menu (for example after deleting of anchors).
    42 
    43 ## Configuration
    44 
    45 You can switch which types is active by config option `config.crossreference.activeTypes = ['type1', 'type2']`. You can define other types also.
    46 
    47 ### Default config:
    48 
    49 ```javascript
    50 {
    51 	activeTypes: ['chapter', 'image', 'table', 'reference'],
    52 	overrideTypes: false,
    53 	types: {
    54 		chapter: {
    55 			name: 'Chapter',
    56 			anchorTextTemplate: '${number}. ${name}.',
    57 			linkTextTemplate: '${number}',
    58 			numeration: {
    59 				enabled: true,
    60 				firstNumber: '1',
    61 				increase: function(number) {
    62 					var n = parseInt(number);
    63 					return ++n;
    64 				}
    65 			},
    66 			anchorsProvider: 'default',
    67 			allowCreateAnchors: true,
    68 			groupAnchors: false
    69 		},
    70 		image: {
    71 			name: 'Figure',
    72 			anchorTextTemplate: 'Fig. ${number}. ${name}.',
    73 			linkTextTemplate: '${number}',
    74 			numeration: {
    75 				enabled: true,
    76 				firstNumber: '1',
    77 				increase: function(number) {
    78 					var n = parseInt(number);
    79 					return ++n;
    80 				}
    81 			},
    82 			anchorsProvider: 'default',
    83 			allowCreateAnchors: true,
    84 			groupAnchors: false
    85 		},
    86 		table: {
    87 			name: 'Table',
    88 			anchorTextTemplate: 'Table ${number}. ${name}.',
    89 			linkTextTemplate: '${number}',
    90 			numeration: {
    91 				enabled: true,
    92 				firstNumber: '1',
    93 				increase: function(number) {
    94 					var n = parseInt(number);
    95 					return ++n;
    96 				}
    97 			},
    98 			anchorsProvider: 'default',
    99 			allowCreateAnchors: true,
   100 			groupAnchors: false
   101 		},
   102 		reference: {
   103 			name: 'Reference',
   104 			anchorTextTemplate: '[${number}] ${name}.',
   105 			linkTextTemplate: '[${number}]',
   106 			numeration: {
   107 				enabled: true,
   108 				firstNumber: '1',
   109 				increase: function(number) {
   110 					var n = parseInt(number);
   111 					return ++n;
   112 				}
   113 			},
   114 			anchorsProvider: 'default',
   115 			allowCreateAnchors: true,
   116 			groupAnchors: false
   117 		}
   118 	}
   119 }
   120 ```
   121 | Property | Description | Type | Default value |
   122 | --- | --- | --- | --- |
   123 | `activeTypes` | Which type of anchors would be activated. | Array | `['chapter', 'image', 'table', 'reference']` |
   124 | `overrideTypes` | If you define your own types, enabling this option lead to mixing of your types with types from default config which not yet defined in your config. | Boolean | false |
   125 | `types` | Types definition. | Object | see [Default config](https://github.com/indvd00m/crossreference#default-config) section|
   126 
   127 ### Example of type definition
   128 
   129 ```javascript
   130 image: {
   131 	name: 'Figure',
   132 	anchorTextTemplate: 'Fig. ${number}. ${name}.',
   133 	linkTextTemplate: '${number}',
   134 	numeration: {
   135 		enabled: true,
   136 		firstNumber: '1',
   137 		increase: function(number) {
   138 			var n = parseInt(number);
   139 			return ++n;
   140 		}
   141 	},
   142 	anchorsProvider: 'default',
   143 	allowCreateAnchors: true,
   144 	groupAnchors: false
   145 }
   146 ```
   147 | Property | Description | Type | Required |
   148 | --- | --- | --- | --- |
   149 | `name` | Type name. | String | Yes |
   150 | `anchorTextTemplate` | Template for anchor text. This text will be put in `a` tag. You can use variables in format `${variableName}`. Variables is a properties of an anchor object (see [Example of an anchor object](https://github.com/indvd00m/crossreference#example-of-an-anchor-object) section). | String | No |
   151 | `linkTextTemplate` | Template for link text. This text will be put in `a` tag. You can use variables in format `${variableName}`. Variables is a properties of an anchor object (see [Example of an anchor object](https://github.com/indvd00m/crossreference#example-of-an-anchor-object) section). | String | No |
   152 | `numeration` | Definition of type numeration. See [Example of a numeration definition](https://github.com/indvd00m/crossreference#example-of-a-numeration-definition) section. | Object | No |
   153 | `anchorsProvider` | See [Example of type with anchors provider](https://github.com/indvd00m/crossreference#example-of-type-with-anchors-provider) section. | String 'default' or function | No |
   154 | `allowCreateAnchors` | Can user create anchors of this type in anchors dialog. | Boolean | No |
   155 | `groupAnchors` | If `true`, anchors can be filtered by group in link dialog. | Boolean | No |
   156 
   157 ### Example of a numeration definition
   158 
   159 ```javascript
   160 numeration: {
   161 	enabled: true,
   162 	firstNumber: '1',
   163 	increase: function(number) {
   164 		var n = parseInt(number);
   165 		return ++n;
   166 	}
   167 }
   168 ```
   169 | Property | Description | Type |
   170 | --- | --- | --- |
   171 | `enabled` | Enabling/disabling numeration of anchors. | Boolean |
   172 | `firstNumber` | First number. For example you may define `firstNumber` as `I` for Roman numerals. | String |
   173 | `increase` | Function which must return number (as string) which is next after `number` argument (string). | Function |
   174 
   175 ### Example of an anchor object
   176 
   177 JSON object:
   178 
   179 ```javascript
   180 {
   181 	type: 'image',
   182 	guid: '7d24373b-0756-481d-bf97-5a17ffdf3a28',
   183 	name: 'Experimental result',
   184 	number: '1',
   185 	text: 'Fig. 1. Experimental result.',
   186 	groupName: 'Group name',
   187 	groupGuid: '6c848dff-cde3-421f-b926-695c8de37d80'
   188 }
   189 ```
   190 | Property | Description | Type | Required |
   191 | --- | --- | --- | --- |
   192 | `type` | Type name of this anchor (`config.types.typeName`). | String | Yes |
   193 | `guid` | Unique guid of this anchor. | String | Yes |
   194 | `name` | Name of this anchor. | String | Yes |
   195 | `number` | Number of this anchor (if type contains numeration definition). | String | Depends of type |
   196 | `text` | Text of this anchor. Optional property because of text will generated by `type.anchorTextTemplate` template. | String | No |
   197 | `groupName` | Name of anchor group. | String | No |
   198 | `groupGuid` | Unique guid of anchor group. | String | No |
   199 
   200 ### Example of type with anchors provider
   201 
   202 You can define your own anchors provider. By default plugin search anchors in content of editor and use this anchors for links. But if you want refer to anchors outside of editor you can define another type of anchor with `anchorsProvider` function.
   203 
   204 ```javascript
   205 myType: {
   206 	name: 'My type',
   207 	anchorTextTemplate: '${name}',
   208 	linkTextTemplate: '${name}',
   209 	anchorsProvider: function(callback, editorAnchors, type, editor) {
   210 		var anchors = [];
   211 		anchors.push({
   212 			type: 'myType',
   213 			guid: '7d24373b-0756-481d-bf97-5a17ffdf3a28',
   214 			name: 'Anchor name',
   215 			number: '1'
   216 		});
   217 		callback(anchors);
   218 	},
   219 	allowCreateAnchors: false,
   220 	groupAnchors: false
   221 },
   222 ```
   223 
   224 `anchorsProvider` method attributes:
   225 
   226 | Name | Description | Type |
   227 | --- | --- | --- |
   228 | `callback` | Callback method which must be called with arrays of anchors as argument. | Function |
   229 | `editorAnchors` | Anchors of this type (`myType` in this case) which already contains in editor. You can merge this anchors with your own anchors if need. | Array |
   230 | `type` | Type definition (Object `myType` in this case). | Object |
   231 | `editor` | Instance of ckeditor. | Object |
   232 
   233 
   234 ## Requirements
   235 
   236 CrossReference Plugin require CKEditor 4.5+ version and dependent from plugins: dialog, notification.
   237 
   238 ## Installation
   239 
   240  1. Download the plugin: https://github.com/indvd00m/crossreference/releases.
   241  
   242  2. Extract (decompress) the downloaded file into the plugins folder of your
   243 	CKEditor installation.
   244 	Example: http://example.com/ckeditor/plugins/crossreference
   245 	
   246  3. Enable the plugin by using the extraPlugins configuration setting.
   247 	Example: CKEDITOR.config.extraPlugins = 'crossreference';
   248 
   249 ## Roadmap
   250 
   251 See https://github.com/indvd00m/crossreference/issues.
   252 
   253 ## Icons:
   254 
   255 https://icons8.com/web-app/21792/unicast
   256 
   257 https://icons8.com/web-app/15117/anchor
   258 
   259 https://icons8.com/web-app/38051/link
   260 
   261 https://icons8.com/web-app/21100/refresh
   262 
   263 ## License & Author
   264 
   265 CrossReference Plugin is distributed under GPL/LGPL/MPL. For license terms, see LICENSE.md.
   266 
   267 CrossReference Plugin is written by David E. Veliev.