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