update file structure again
This commit is contained in:
Joshua Haines
+2
-1
@@ -1,5 +1,6 @@
|
||||
exclude: [tinymce-documentation.sublime-project, tinymce-documentation.sublime-workspace]
|
||||
exclude: [Gemfile, Gemfile.lock]
|
||||
permalink: pretty
|
||||
baseurl: /docs
|
||||
|
||||
gems:
|
||||
- jekyll-redirect-from
|
||||
+19
-2
@@ -6,12 +6,29 @@
|
||||
|
||||
- title: Configuration
|
||||
pages:
|
||||
- title: General
|
||||
pages:
|
||||
- title: selector
|
||||
- title: auto_focus
|
||||
- title: br_in_pre
|
||||
- title: directionality
|
||||
- title: Cleanup & Output
|
||||
pages:
|
||||
- title: Allow Conditional Comments
|
||||
- title: Allow HTML in Named Anchor
|
||||
- title: allow_conditional_comments
|
||||
- title: allow_html_in_named_anchor
|
||||
|
||||
- title: Using TinyMCE
|
||||
pages:
|
||||
- title: Advanced Configuration
|
||||
- title: Creating a Plugin
|
||||
- title: Creating a Skin
|
||||
- title: Creating Custom Dialogs
|
||||
- title: Handling Asynchronoush Image Uploads
|
||||
- title: Migration Guide From 3x
|
||||
- title: TinyMCE in a Bootstrap Dialog
|
||||
- title: TinyMCE in a jQuery UI Dialog
|
||||
- title: Using CDN
|
||||
- title: Using the Gzip Compressors
|
||||
|
||||
- title: JavaScript API
|
||||
|
||||
|
||||
+1
-8
@@ -1,23 +1,16 @@
|
||||
<ul class="nav nav-stacked">
|
||||
{% for item in include.pages %}
|
||||
|
||||
{% assign slug = item.title | downcase | replace: ' ', '-' | replace:'-&-','-' %}
|
||||
|
||||
{% capture endslashslug %}{{ slug }}/{% endcapture %}
|
||||
{% capture bothslashslug %}/{{ slug }}/{% endcapture %}
|
||||
|
||||
{% if page.url contains bothslashslug %}
|
||||
{% assign active = 'active' %}
|
||||
{% else %}
|
||||
{% assign active = nil %}
|
||||
{% endif %}
|
||||
|
||||
{% capture address %}{{ include.precedingaddress }}{{ endslashslug }}{% endcapture %}
|
||||
|
||||
<li class="{{ active }}">
|
||||
<a href="{{ site.baseurl }}{{ address }}">
|
||||
{{ item.title }}
|
||||
</a>
|
||||
<a href="{{ site.baseurl }}{{ address }}">{{ item.title }}</a>
|
||||
</li>
|
||||
{% if item.pages %}
|
||||
{% include nav.html pages=item.pages precedingaddress=address%}
|
||||
|
||||
@@ -5,11 +5,11 @@
|
||||
<title>TinyMCE - {{ page.title }}</title>
|
||||
<meta name="author" content="Joshua Haines" />
|
||||
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
|
||||
<link href="/assets/css/theme.css" rel="stylesheet">
|
||||
<link href="/docs/assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Bootstrap -->
|
||||
<link href="/assets/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/docs/assets/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Optional theme -->
|
||||
<link href="/assets/bootstrap-3.3.5-dist/css/bootstrap-theme.min.css" rel="stylesheet" >
|
||||
<link href="/docs/assets/bootstrap-3.3.5-dist/css/bootstrap-theme.min.css" rel="stylesheet" >
|
||||
</head>
|
||||
<body role="document">
|
||||
<!-- Fixed navbar -->
|
||||
@@ -36,6 +36,7 @@
|
||||
<div class="container theme-showcase" role="main">
|
||||
|
||||
<div class="col-xs-9">
|
||||
<h1>{{ page.title }}</h1>
|
||||
{{ content }}
|
||||
</div>
|
||||
<div class="col-xs-3">
|
||||
@@ -46,6 +47,6 @@
|
||||
</div>
|
||||
|
||||
<!-- Include all compiled plugins (below), or include individual files as needed -->
|
||||
<script src="/assets/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
|
||||
<script src="/docs/assets/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+1
-2
@@ -1,9 +1,8 @@
|
||||
---
|
||||
layout: default
|
||||
title: Allow Conditional Comments
|
||||
title: allow_conditional_comments
|
||||
redirect_from:
|
||||
- "/configuration/cleanup-output/"
|
||||
- "/configuration/"
|
||||
---
|
||||
|
||||
<p>This option allows you to specify whether the editor should parse and keep conditional comments.</p>
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
---
|
||||
layout: default
|
||||
title: Allow HTML in Named Anchor
|
||||
title: allow_html_in_named_anchor
|
||||
---
|
||||
|
||||
<p>This option allows you to specify whether the editor should parse and keep html within named anchor tags.</p>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
layout: default
|
||||
title: auto_focus
|
||||
---
|
||||
|
||||
<p>This option enables you to auto focus an editor instance. The value of this option should be an editor instance id. The editor instance id is the id for the original textarea or div element that got replaced.</p>
|
||||
<p>Example of usage of the auto_focus option:</p>
|
||||
<pre class="js">tinymce.init({<br /> ...<br /> auto_focus: "elm1"<br />});</pre>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
layout: default
|
||||
title: br_in_pre
|
||||
---
|
||||
|
||||
<p>This option allows you to disable TinyMCE's default behaviour when pressing enter within a PRE tag. Pressing enter within a PRE tag will produce a BR tag and will only split PRE tags upon pressing shift+enter when this setting is enabled.</p>
|
||||
<p>An example that disables this setting is as follows:</p>
|
||||
<pre class="js">tinymce.init({<br /> br_in_pre: false<br />});</pre>
|
||||
@@ -0,0 +1,15 @@
|
||||
---
|
||||
layout: default
|
||||
title: directionality
|
||||
---
|
||||
|
||||
<p>This option allows you to set the base direction of directionally neutral text (i.e., text that doesn't have inherent directionality as defined in Unicode) within the editor. This is similar to the use of the "dir" attribute when using content editable elements by themself.</p>
|
||||
<p>The allowed values for this configuration option are:</p>
|
||||
<ul>
|
||||
<ul>
|
||||
<li>"ltr"</li>
|
||||
<li>"rtl"</li>
|
||||
</ul>
|
||||
</ul>
|
||||
<p>An example of this setting is as follows:</p>
|
||||
<pre class="js">tinymce.init({<br /> ...<br /> directionality : 'ltr',<br /> ...<br />});</pre>
|
||||
@@ -0,0 +1,18 @@
|
||||
---
|
||||
layout: default
|
||||
title: selector
|
||||
redirect_from:
|
||||
- "/configuration/general/"
|
||||
- "/configuration/"
|
||||
---
|
||||
|
||||
<p>This option allows you to specify a CSS selector for the areas that TinyMCE should make editable.</p>
|
||||
<p>When using this option in TinyMCE's regular editing mode, the element will be replaced with an iframe that TinyMCE will perform all operations within.</p>
|
||||
<p>An example of this setting that will replace all textarea elements on the page is as follows:</p>
|
||||
<pre class="js">tinymce.init({<br /> ...<br /> selector: "textarea",<br /> ...<br />});</pre>
|
||||
<p>An example of this setting that will replace a textarea element with id "editable" on the page is as follows:</p>
|
||||
<pre class="js">tinymce.init({<br /> ...<br /> selector: "textarea#editable",<br /> ...<br />});</pre>
|
||||
<p>When using this option in TinyMCE's inline editing mode, the selector can be used on any block element and will edit the content in place instead of replacing the element with an iframe.</p>
|
||||
<p>An example of this setting being used in inline editing mode on a div element with id "editable" is as follows:</p>
|
||||
<pre class="js">tinymce.init({<br /> ...<br /> selector: "div#editable",<br /> inline: true,<br /> ...<br />});</pre>
|
||||
<p>For more information on the differences between regular and inline editing modes please see this page <a href="/wiki.php/Inline">here</a>.</p>
|
||||
@@ -1,7 +1,9 @@
|
||||
---
|
||||
layout: default
|
||||
title: Installation
|
||||
redirect_from: "/getting-started/"
|
||||
redirect_from:
|
||||
- "/getting-started/"
|
||||
- "/"
|
||||
---
|
||||
|
||||
<p>Getting started with TinyMCE is really easy. In this guide you will initialize TinyMCE on a <textarea> as part of an HTML <form>. When the <form> is submitted, the contents of the TinyMCE editor will be submitted as part of the <form> POST. </p>
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
layout: default
|
||||
title: Other Versions
|
||||
---
|
||||
|
||||
<p>A list of links to go here. We'll be able to link off to other parts of the site, which will be built from the other branches in git.</p>
|
||||
<p>If we're using tags for the documentation, we could even have a drop down list for every version of the docs to correspond to every version of the TinyMCE source.</p>
|
||||
@@ -1,8 +0,0 @@
|
||||
{
|
||||
"folders":
|
||||
[
|
||||
{
|
||||
"path": "."
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,674 +0,0 @@
|
||||
{
|
||||
"auto_complete":
|
||||
{
|
||||
"selected_items":
|
||||
[
|
||||
[
|
||||
"prevent",
|
||||
"preventDefault"
|
||||
],
|
||||
[
|
||||
"native",
|
||||
"nativeEvent"
|
||||
],
|
||||
[
|
||||
"flash",
|
||||
"flashBinTargetNode"
|
||||
],
|
||||
[
|
||||
"help",
|
||||
"helpCopyNode"
|
||||
],
|
||||
[
|
||||
"dialog",
|
||||
"dialogDelayed"
|
||||
],
|
||||
[
|
||||
"update",
|
||||
"updateBinNode"
|
||||
],
|
||||
[
|
||||
"sera",
|
||||
"serializedStyles"
|
||||
],
|
||||
[
|
||||
"merge",
|
||||
"mergeStyles"
|
||||
],
|
||||
[
|
||||
"back",
|
||||
"backgroundColor"
|
||||
],
|
||||
[
|
||||
"tiny",
|
||||
"tinyMCE"
|
||||
],
|
||||
[
|
||||
"setAtt",
|
||||
"setAttrib"
|
||||
],
|
||||
[
|
||||
"style",
|
||||
"style_table_by_css"
|
||||
],
|
||||
[
|
||||
"document",
|
||||
"document_base_url"
|
||||
],
|
||||
[
|
||||
"docu",
|
||||
"document_base_url"
|
||||
],
|
||||
[
|
||||
"edit",
|
||||
"editor"
|
||||
],
|
||||
[
|
||||
"this",
|
||||
"thisURL"
|
||||
],
|
||||
[
|
||||
"get",
|
||||
"getBody"
|
||||
],
|
||||
[
|
||||
"ed",
|
||||
"editor"
|
||||
]
|
||||
]
|
||||
},
|
||||
"buffers":
|
||||
[
|
||||
{
|
||||
"file": "_layouts/default.html",
|
||||
"settings":
|
||||
{
|
||||
"buffer_size": 634,
|
||||
"line_ending": "Unix"
|
||||
}
|
||||
},
|
||||
{
|
||||
"file": "_config.yml",
|
||||
"settings":
|
||||
{
|
||||
"buffer_size": 89,
|
||||
"line_ending": "Unix"
|
||||
}
|
||||
}
|
||||
],
|
||||
"build_system": "",
|
||||
"build_system_choices":
|
||||
[
|
||||
],
|
||||
"build_varint": "",
|
||||
"command_palette":
|
||||
{
|
||||
"height": 392.0,
|
||||
"last_filter": "",
|
||||
"selected_items":
|
||||
[
|
||||
[
|
||||
"find",
|
||||
"FindKeyConflicts: All Conflicts"
|
||||
],
|
||||
[
|
||||
"Package Control: ",
|
||||
"Package Control: Install Package"
|
||||
],
|
||||
[
|
||||
"insta",
|
||||
"Package Control: Install Package"
|
||||
],
|
||||
[
|
||||
"UPDA",
|
||||
"Package Control: Upgrade/Overwrite All Packages"
|
||||
]
|
||||
],
|
||||
"width": 476.0
|
||||
},
|
||||
"console":
|
||||
{
|
||||
"height": 126.0,
|
||||
"history":
|
||||
[
|
||||
"import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)"
|
||||
]
|
||||
},
|
||||
"distraction_free":
|
||||
{
|
||||
"menu_visible": true,
|
||||
"show_minimap": false,
|
||||
"show_open_files": false,
|
||||
"show_tabs": false,
|
||||
"side_bar_visible": false,
|
||||
"status_bar_visible": false
|
||||
},
|
||||
"expanded_folders":
|
||||
[
|
||||
"/work/jekyll/tinymce-documentation",
|
||||
"/work/jekyll/tinymce-documentation/_includes",
|
||||
"/work/jekyll/tinymce-documentation/_layouts",
|
||||
"/work/jekyll/tinymce-documentation/_posts",
|
||||
"/work/jekyll/tinymce-documentation/_site",
|
||||
"/work/jekyll/tinymce-documentation/_site/js",
|
||||
"/work/jekyll/tinymce-documentation/css"
|
||||
],
|
||||
"file_history":
|
||||
[
|
||||
"/work/jekyll/tinymce-documentation/2015-09-01-configuration-auto-focus.html",
|
||||
"/work/jekyll/tinymce-documentation/_posts/configuration/2015-09-01-auto-focus.html",
|
||||
"/work/jekyll/tinymce-documentation/_config.yml",
|
||||
"/work/jekyll/tinymce-documentation/.gitignore",
|
||||
"/home/josh/work/cement/src/main/js/ephox/cement/flash/Flash.js",
|
||||
"/work/cement/dist/deploy/module/ephox.cement.pastiche.Pastiche.js",
|
||||
"/work/cement/src/main/js/ephox/cement/images/ImagePaste.js",
|
||||
"/home/josh/work/cement/src/main/js/ephox/cement/flash/Flashbin.js",
|
||||
"/work/cement/src/main/js/ephox/cement/api/Cement.js",
|
||||
"/work/cement/src/main/js/ephox/cement/flash/Flashbin.js",
|
||||
"/work/cement/src/main/js/ephox/cement/html/HtmlPaste.js",
|
||||
"/work/cement/src/main/js/ephox/cement/smartpaste/MergeSettings.js",
|
||||
"/work/cement/src/main/js/ephox/cement/pastiche/Pastiche.js",
|
||||
"/work/cement/src/main/js/ephox/cement/smartpaste/PasteHandlers.js",
|
||||
"/work/cement/src/main/js/ephox/cement/flash/FlashDialog.js",
|
||||
"/work/cement/src/main/flash/textboxpaste.as",
|
||||
"/work/cement/src/demo/js/ephox/cement/demo/Demo.js",
|
||||
"/home/josh/work/cement/src/main/js/ephox/cement/pastiche/IeBlob.js",
|
||||
"/home/josh/work/cement/src/main/js/ephox/cement/flash/FlashDialog.js",
|
||||
"/work/cement/src/main/js/ephox/cement/flash/Flash.js",
|
||||
"/home/josh/work/cement/src/main/js/ephox/cement/pastiche/Pastiche.js",
|
||||
"/work/cement/src/main/js/ephox/cement/flash/FlashInfo.js",
|
||||
"/work/cement/src/main/js/ephox/cement/flash/Correlation.js",
|
||||
"/home/josh/work/cement/src/main/js/ephox/cement/html/HtmlPaste.js",
|
||||
"/work/cement/src/main/js/ephox/cement/smartpaste/PasteBroker.js",
|
||||
"/home/josh/work/cement/src/main/js/ephox/cement/api/Cement.js",
|
||||
"/home/josh/work/cement/node_modules/jshint/node_modules/htmlparser2/node_modules/readable-stream/node_modules/isarray/build/build.js",
|
||||
"/home/josh/work/cement/node_modules/jshint/node_modules/htmlparser2/.travis.yml",
|
||||
"/home/josh/work/cement/src/demo/js/ephox/cement/demo/Demo.js",
|
||||
"/work/cement/lib/run/depend/ephox.pastiche.engine.Pipeless.js",
|
||||
"/home/josh/work/cement/lib/run/depend/ephox.numerosity.api.URL.js",
|
||||
"/home/josh/work/cement/lib/run/depend/ephox.numerosity.api.Blob.js",
|
||||
"/home/josh/work/cement/lib/run/depend/ephox.numerosity.api.HTMLElement.js",
|
||||
"/home/josh/work/cement/lib/run/depend/ephox.numerosity.api.FormData.js",
|
||||
"/home/josh/work/cement/node_modules/jshint/LICENSE",
|
||||
"/home/josh/work/cement/node_modules/jshint/node_modules/cli/index.js",
|
||||
"/home/josh/work/cement/node_modules/jshint/node_modules/htmlparser2/test/Events/11-script_in_script.json",
|
||||
"/home/josh/work/cement/node_modules/jshint/node_modules/cli/node_modules/glob/node_modules/inherits/inherits_browser.js",
|
||||
"/home/josh/work/cement/node_modules/jshint/node_modules/shelljs/scripts/run-tests.js",
|
||||
"/home/josh/work/cement/node_modules/jshint/node_modules/htmlparser2/node_modules/readable-stream/lib/_stream_transform.js",
|
||||
"/home/josh/work/cement/node_modules/jshint/node_modules/htmlparser2/node_modules/domutils/node_modules/dom-serializer/node_modules/entities/.travis.yml",
|
||||
"/home/josh/work/cement/Makefile",
|
||||
"/home/josh/work/cement/lib/run/depend/ephox.numerosity.api.Uint8Array.js",
|
||||
"/home/josh/work/cement/lib/run/depend/ephox.numerosity.api.XMLHttpRequest.js",
|
||||
"/home/josh/work/cement/lib/run/depend/ephox.numerosity.api.FileReader.js",
|
||||
"/home/josh/work/cement/node_modules/jshint/node_modules/htmlparser2/node_modules/readable-stream/passthrough.js",
|
||||
"/home/josh/work/cement/node_modules/jshint/package.json",
|
||||
"/home/josh/work/cement/config/bolt/prod.js",
|
||||
"/home/josh/work/cement/src/main/js/ephox/cement/images/ImagePaste.js",
|
||||
"/home/josh/work/cement/config/dent/depend.js",
|
||||
"/work/cement/src/main/js/ephox/cement/flash/HelpCopy.js",
|
||||
"/home/josh/work/cement/src/main/js/ephox/cement/smartpaste/PasteBroker.js",
|
||||
"/home/josh/work/cement/lib/run/depend/ephox.sugar.api.Class.js",
|
||||
"/home/josh/work/cement/src/main/flash/textboxpaste.as",
|
||||
"/home/josh/work/cement/node_modules/jshint/src/cli.js",
|
||||
"/home/josh/work/cement/src/main/js/ephox/cement/flash/HelpCopy.js",
|
||||
"/home/josh/work/cement/lib/run/depend/ephox.plumber.tap.wrap.Tapped.js",
|
||||
"/home/josh/work/cement/src/main/js/ephox/cement/flash/FlashInfo.js",
|
||||
"/home/josh/work/cement/src/main/js/ephox/cement/smartpaste/MergeSettings.js",
|
||||
"/home/josh/work/cement/src/demo/html/demo.html",
|
||||
"/home/josh/work/cement/lib/run/depend/ephox.fussy.api.Point.js",
|
||||
"/work/cement/src/demo/html/cement.css",
|
||||
"/work/cement/src/main/js/ephox/cement/api/CementConstants.js",
|
||||
"/home/josh/work/tinymce/tiny4.html",
|
||||
"/work/index.html",
|
||||
"/work/tinymce/powerpaste/test.js",
|
||||
"/work/cement/cement.sublime-project",
|
||||
"/work/sudopaste/config/bolt/bootstrap-demo.js",
|
||||
"/work/sudopaste/config/bolt/bootstrap-browser.js",
|
||||
"/work/sudopaste/src/test/qunit/Paste.test.js",
|
||||
"/work/sudopaste/sudoPaste.sublime-project",
|
||||
"/work/sudopaste/package.json",
|
||||
"/work/Cement/src/main/js/ephox/cement/pastiche/Pastiche.js",
|
||||
"/home/josh/.config/sublime-text-3/Packages/Default/Default (Linux).sublime-keymap",
|
||||
"/work/Cement/src/demo/html/cement.css",
|
||||
"/work/Cement/cement.sublime-project",
|
||||
"/work/Bolt/gen/image/bolt-local/bin/jsc",
|
||||
"/work/Bolt/gen/image/bolt-local/bin/bolt",
|
||||
"/home/josh/Downloads/quickstart/demo/html/demo.html",
|
||||
"/work/tinymce/tiny4/js/tinymce/tinymce.jquery.js",
|
||||
"/work/tinymce/tiny4/js/tinymce/classes/ui/Window.js",
|
||||
"/work/tinymce/tiny4/js/tinymce/plugins/wordcount/plugin.js",
|
||||
"/work/tinymce/tiny4/js/tinymce/plugins/searchreplace/plugin.js",
|
||||
"/work/tinymce/tiny4/js/tinymce/plugins/link/plugin.js",
|
||||
"/work/tinymce/sudopaste/lib/test/tinymce/plugins/link/plugin.js",
|
||||
"/work/tinymce/tiny4/js/tinymce/plugins/hr/plugin.js",
|
||||
"/work/tinymce/sudopaste/dependency/tinymce-enterprise/tinymce/classes/html/Schema.js",
|
||||
"/work/tinymce/sudopaste/dependency/tinymce-enterprise/tinymce/classes/html/Entities.js",
|
||||
"/work/tinymce/tiny4.html",
|
||||
"/work/tinymce/sudopaste/dependency/tinymce-enterprise/tinymce/plugins/link/plugin.js",
|
||||
"/work/tinymce/tiny4/js/tinymce/plugins/pagebreak/plugin.js",
|
||||
"/work/tinymce/tiny4/tests/plugins/table.js",
|
||||
"/work/tinymce/tiny4/js/tinymce/classes/Editor.js",
|
||||
"/work/tinymce/tiny4/js/tinymce/plugins/table/classes/Dialogs.js",
|
||||
"/work/tinymce/tiny4/js/tinymce/classes/dom/DOMUtils.js",
|
||||
"/work/tinymce/tiny4/js/tinymce/classes/html/Styles.js",
|
||||
"/work/tinymce/tiny3/changelog.txt.save",
|
||||
"/work/tinymce/tiny4/.eslintrc",
|
||||
"/work/tinymce/tiny4/js/tinymce/plugins/image/plugin.js",
|
||||
"/work/tinymce/tiny4/js/tinymce/classes/html/Serializer.js",
|
||||
"/work/tinymce/tiny4/js/tinymce/classes/html/Writer.js",
|
||||
"/work/tinymce/tiny4/js/tinymce/classes/Formatter.js",
|
||||
"/work/tinymce/tiny4/js/tinymce/plugins/table/plugin.js",
|
||||
"/work/tinymce/tiny4/js/tinymce/plugins/autoresize/plugin.js",
|
||||
"/work/tinymce/tiny4/tests/js/utils.js",
|
||||
"/work/tinymce/tiny4/tests/tinymce/EditorCommands.js",
|
||||
"/work/tinymce/tiny4/tests/tinymce/util/EventDispatcher.js",
|
||||
"/work/tinymce/tiny3/jscripts/tiny_mce/plugins/table/js/table.js",
|
||||
"/work/tinymce/tiny3/jscripts/tiny_mce/plugins/table/js/cell.js",
|
||||
"/work/tinymce/tiny3/jscripts/tiny_mce/plugins/table/table.htm",
|
||||
"/home/josh/.config/sublime-text-3/Packages/User/Default (Linux).sublime-keymap",
|
||||
"/work/tinymce/tiny4/node_modules/grunt/node_modules/underscore.string/test/strings.js",
|
||||
"/work/tinymce/sudopaste/node_modules/grunt/node_modules/underscore.string/test/strings.js",
|
||||
"/work/tinymce/sudopaste/node_modules/grunt-jsbeautifier/.idea/scopes/scope_settings.xml",
|
||||
"/work/tinymce/sudopaste/node_modules/jasmine-core/setup.py",
|
||||
"/work/tinymce/tiny3/jscripts/tiny_mce/themes/advanced/source_editor.htm",
|
||||
"/work/tinymce/tiny3/examples/simple.html",
|
||||
"/work/tinymce/tiny4/js/tinymce/classes/html/Schema.js",
|
||||
"/work/tinymce/tiny4/tests/tinymce/EnterKey.js",
|
||||
"/work/tinymce/tiny4/tests/tinymce/html/Schema.js",
|
||||
"/work/tinymce/tiny4/js/tinymce/classes/html/DomParser.js",
|
||||
"/work/tinymce/tiny4/js/tinymce/classes/EnterKey.js",
|
||||
"/work/tinymce/tiny4/js/tinymce/classes/EditorCommands.js",
|
||||
"/home/josh/.config/sublime-text-3/Packages/FindKeyConflicts/README.md",
|
||||
"/home/josh/.config/sublime-text-3/Packages/HTML-CSS-JS Prettify/Default (Linux).sublime-keymap",
|
||||
"/home/josh/.config/sublime-text-3/Packages/SideBarEnhancements/Default (Linux).sublime-keymap",
|
||||
"/work/tinymce/tiny4/tests/tinymce/Editor.js",
|
||||
"/work/tinymce/sudopaste/dependency/exhibition/exhibition.js"
|
||||
],
|
||||
"find":
|
||||
{
|
||||
"height": 25.0
|
||||
},
|
||||
"find_in_files":
|
||||
{
|
||||
"height": 93.0,
|
||||
"where_history":
|
||||
[
|
||||
"/work/cement/",
|
||||
"/work/cement/src",
|
||||
"/work/cement/",
|
||||
"/work/cement/src/",
|
||||
"/work/cement/",
|
||||
"/work/cement/src/",
|
||||
"/work/cement/",
|
||||
"/work/cement/src/",
|
||||
"/work/cement/",
|
||||
"/work/cement/src/",
|
||||
"/work/cement/",
|
||||
"/work/cement/src",
|
||||
"/work/cement",
|
||||
"/work/sudopaste",
|
||||
"/work/tinymce/tiny4/",
|
||||
"/work/tinymce/tiny4/classes/",
|
||||
"/work/tinymce/tiny4/classes",
|
||||
"/work/tinymce/",
|
||||
"/work/tinymce/tiny4/tests/",
|
||||
"/work/tinymce/tiny4/",
|
||||
"/work/tinymce/tiny4/tests/",
|
||||
"/work/tinymce/tiny4/",
|
||||
"/work/tinymce/tiny3/",
|
||||
"/work/tinymce/tiny3/js/",
|
||||
"/work/tinymce/tiny4/js/",
|
||||
"/work/tinymce/tiny4/js/tinymce/plugins/table/classes",
|
||||
"/work/tinymce/tiny4/js/",
|
||||
"/work/tinymce/tiny4/tests/",
|
||||
"/work/tinymce/tiny4/js/",
|
||||
"/work/tinymce/tiny4/tests/",
|
||||
"/work/tinymce/tiny4/js/",
|
||||
"/work/tinymce/tiny4/tests/",
|
||||
"/work/tinymce/tiny4/",
|
||||
"/work/tinymce/tiny4/tests",
|
||||
"/work/tinymce/tiny4",
|
||||
"/work/tinymce/tiny4/tests"
|
||||
]
|
||||
},
|
||||
"find_state":
|
||||
{
|
||||
"case_sensitive": false,
|
||||
"find_history":
|
||||
[
|
||||
"mergeinlinestyles",
|
||||
"mergeInlineStyles",
|
||||
"png",
|
||||
"jpg",
|
||||
"bowerbird",
|
||||
"bowerbir",
|
||||
"ephox.bowerbird.api.Rtf",
|
||||
"ephox.bowerbird.core.Rtf",
|
||||
"firefox",
|
||||
"proxypaste.events",
|
||||
"ephox.sloth.api.ProxyPaste",
|
||||
"ephox.sloth.api.Offscreen",
|
||||
"offscreen",
|
||||
".play",
|
||||
"cleaner =",
|
||||
"event.assets",
|
||||
"paste.bind",
|
||||
"assets",
|
||||
"blob",
|
||||
"assets =",
|
||||
"assets",
|
||||
"imageextract",
|
||||
"assets",
|
||||
"cancel",
|
||||
"destroy",
|
||||
"flash dialog",
|
||||
"rtf",
|
||||
"keurig",
|
||||
"flash.clipboard.no.rtf",
|
||||
".handler",
|
||||
"pastiche.handler",
|
||||
"raw",
|
||||
"ieblob",
|
||||
"onload",
|
||||
"waiting",
|
||||
"waitforflash",
|
||||
"waiting",
|
||||
"smartpaste-eph-bin",
|
||||
"errors.",
|
||||
"transla",
|
||||
"translate",
|
||||
"errors.",
|
||||
"error",
|
||||
"safari.imagepaste",
|
||||
"safari-imagepaste",
|
||||
"flash.clipboard.no.rtf",
|
||||
"safari.imagepaste",
|
||||
"safari",
|
||||
"support",
|
||||
"error",
|
||||
"process",
|
||||
"response",
|
||||
"pastecallback",
|
||||
"clipboard",
|
||||
"hide",
|
||||
"insert",
|
||||
"clean",
|
||||
"prompt",
|
||||
"default",
|
||||
"1000",
|
||||
"-1000",
|
||||
"compass",
|
||||
"prepastefilter",
|
||||
"allowlocalimages",
|
||||
".get",
|
||||
"result",
|
||||
"'unwrappin'",
|
||||
"unwrappin",
|
||||
"console",
|
||||
"trim",
|
||||
"class",
|
||||
"selector",
|
||||
"selectors.is",
|
||||
"selector",
|
||||
"fallback",
|
||||
"selector",
|
||||
"ephox.sugar.api.css",
|
||||
"global",
|
||||
"globalat",
|
||||
"globalator",
|
||||
"class.",
|
||||
"sugar.api.class",
|
||||
"imagepaste",
|
||||
"fallback",
|
||||
"pastiche",
|
||||
"selector",
|
||||
"sugar.api.class",
|
||||
"global",
|
||||
"close",
|
||||
"trigger('close",
|
||||
"isblocked",
|
||||
"tord",
|
||||
"insert",
|
||||
"prePasteFilter",
|
||||
"pre",
|
||||
"preprocess",
|
||||
"process",
|
||||
"prePasteFilter",
|
||||
"pre",
|
||||
"process",
|
||||
"preprocess",
|
||||
"paste",
|
||||
"result",
|
||||
"paste",
|
||||
"captured",
|
||||
"createhandler",
|
||||
"paste",
|
||||
"prePasteFilter",
|
||||
"pastebroker",
|
||||
"mergesettings",
|
||||
"callback",
|
||||
"result",
|
||||
"error",
|
||||
"errorcallback",
|
||||
"globaliser",
|
||||
"setfocus",
|
||||
"spinCallback",
|
||||
"flow",
|
||||
"focus",
|
||||
"pasteTap",
|
||||
"gwt",
|
||||
"pasteListener",
|
||||
"pastecallback",
|
||||
"bin",
|
||||
"blocktap",
|
||||
"pastetap",
|
||||
"paste",
|
||||
"pastebroker"
|
||||
],
|
||||
"highlight": true,
|
||||
"in_selection": false,
|
||||
"preserve_case": false,
|
||||
"regex": false,
|
||||
"replace_history":
|
||||
[
|
||||
],
|
||||
"reverse": false,
|
||||
"show_context": true,
|
||||
"use_buffer2": true,
|
||||
"whole_word": false,
|
||||
"wrap": true
|
||||
},
|
||||
"groups":
|
||||
[
|
||||
{
|
||||
"selected": 1,
|
||||
"sheets":
|
||||
[
|
||||
{
|
||||
"buffer": 0,
|
||||
"file": "_layouts/default.html",
|
||||
"semi_transient": false,
|
||||
"settings":
|
||||
{
|
||||
"buffer_size": 634,
|
||||
"regions":
|
||||
{
|
||||
},
|
||||
"selection":
|
||||
[
|
||||
[
|
||||
0,
|
||||
0
|
||||
]
|
||||
],
|
||||
"settings":
|
||||
{
|
||||
"syntax": "Packages/HTML/HTML.tmLanguage",
|
||||
"tab_size": 2,
|
||||
"translate_tabs_to_spaces": false
|
||||
},
|
||||
"translation.x": 0.0,
|
||||
"translation.y": 0.0,
|
||||
"zoom_level": 1.0
|
||||
},
|
||||
"stack_index": 1,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"buffer": 1,
|
||||
"file": "_config.yml",
|
||||
"semi_transient": false,
|
||||
"settings":
|
||||
{
|
||||
"buffer_size": 89,
|
||||
"regions":
|
||||
{
|
||||
},
|
||||
"selection":
|
||||
[
|
||||
[
|
||||
89,
|
||||
89
|
||||
]
|
||||
],
|
||||
"settings":
|
||||
{
|
||||
"syntax": "Packages/YAML/YAML.tmLanguage"
|
||||
},
|
||||
"translation.x": 0.0,
|
||||
"translation.y": 0.0,
|
||||
"zoom_level": 1.0
|
||||
},
|
||||
"stack_index": 0,
|
||||
"type": "text"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"incremental_find":
|
||||
{
|
||||
"height": 25.0
|
||||
},
|
||||
"input":
|
||||
{
|
||||
"height": 31.0
|
||||
},
|
||||
"layout":
|
||||
{
|
||||
"cells":
|
||||
[
|
||||
[
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
1
|
||||
]
|
||||
],
|
||||
"cols":
|
||||
[
|
||||
0.0,
|
||||
1.0
|
||||
],
|
||||
"rows":
|
||||
[
|
||||
0.0,
|
||||
1.0
|
||||
]
|
||||
},
|
||||
"menu_visible": true,
|
||||
"output.find_results":
|
||||
{
|
||||
"height": 0.0
|
||||
},
|
||||
"pinned_build_system": "",
|
||||
"project": "tinymce-documentation.sublime-project",
|
||||
"replace":
|
||||
{
|
||||
"height": 46.0
|
||||
},
|
||||
"save_all_on_build": true,
|
||||
"select_file":
|
||||
{
|
||||
"height": 0.0,
|
||||
"last_filter": "",
|
||||
"selected_items":
|
||||
[
|
||||
[
|
||||
"pastiche",
|
||||
"src/main/js/ephox/cement/pastiche/Pastiche.js"
|
||||
],
|
||||
[
|
||||
"class",
|
||||
"lib/run/depend/ephox.sugar.api.Class.js"
|
||||
],
|
||||
[
|
||||
"paste.js",
|
||||
"src/main/js/ephox/sudoPaste/api/iePaste.js"
|
||||
],
|
||||
[
|
||||
"cement",
|
||||
"src/main/js/ephox/cement/api/Cement.js"
|
||||
],
|
||||
[
|
||||
"edit",
|
||||
"tiny4/js/tinymce/classes/Editor.js"
|
||||
],
|
||||
[
|
||||
"editorcom",
|
||||
"tiny4/tests/tinymce/EditorCommands.js"
|
||||
],
|
||||
[
|
||||
"field",
|
||||
"tiny4/js/tinymce/classes/ui/FieldSet.js"
|
||||
],
|
||||
[
|
||||
"combobox",
|
||||
"tiny4/js/tinymce/classes/ui/ComboBox.js"
|
||||
],
|
||||
[
|
||||
"filepicker",
|
||||
"tiny4/js/tinymce/classes/ui/FilePicker.js"
|
||||
],
|
||||
[
|
||||
"uri",
|
||||
"tiny3/jscripts/tiny_mce/classes/util/URI.js"
|
||||
],
|
||||
[
|
||||
"filepic",
|
||||
"tiny4/js/tinymce/classes/ui/FilePicker.js"
|
||||
]
|
||||
],
|
||||
"width": 0.0
|
||||
},
|
||||
"select_project":
|
||||
{
|
||||
"height": 0.0,
|
||||
"last_filter": "",
|
||||
"selected_items":
|
||||
[
|
||||
],
|
||||
"width": 0.0
|
||||
},
|
||||
"select_symbol":
|
||||
{
|
||||
"height": 0.0,
|
||||
"last_filter": "",
|
||||
"selected_items":
|
||||
[
|
||||
],
|
||||
"width": 0.0
|
||||
},
|
||||
"selected_group": 0,
|
||||
"settings":
|
||||
{
|
||||
},
|
||||
"show_minimap": true,
|
||||
"show_open_files": false,
|
||||
"show_tabs": true,
|
||||
"side_bar_visible": true,
|
||||
"side_bar_width": 375.0,
|
||||
"status_bar_visible": true,
|
||||
"template_settings":
|
||||
{
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
---
|
||||
layout: default
|
||||
title: Advanced Configuration
|
||||
redirect_from:
|
||||
- "/using-tinymce/"
|
||||
---
|
||||
|
||||
<p>Some advanced installation configurations are shown here.</p>
|
||||
<pre class="js"><!-- place in header of your html document --><br /><script><br />tinymce.init({<br /> selector: "textarea#elm1",<br /> theme: "modern",<br /> width: 300,<br /> height: 300,<br /> plugins: [<br /> "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",<br /> "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",<br /> "save table contextmenu directionality emoticons template paste textcolor"<br /> ],<br /> content_css: "css/content.css",<br /> toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l ink image | print preview media fullpage | forecolor backcolor emoticons", <br /> style_formats: [<br /> {title: 'Bold text', inline: 'b'},<br /> {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},<br /> {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},<br /> {title: 'Example 1', inline: 'span', classes: 'example1'},<br /> {title: 'Example 2', inline: 'span', classes: 'example2'},<br /> {title: 'Table styles'},<br /> {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}<br /> ]<br /> }); <br /></script><br /><br /><!-- place in body of your html document --><br /><textarea id="elm1" name="area"></textarea></pre>
|
||||
<h3>Example breakdown</h3>
|
||||
<pre class="js">selector: "textarea#elm1",</pre>
|
||||
<p>Select only the textarea with ID elm1</p>
|
||||
<pre class="js">theme: "modern",</pre>
|
||||
<p>Set the modern theme (default, not needed).</p>
|
||||
<pre class="js">width: 300,</pre>
|
||||
<p>Width of editor in pixels, integer value.</p>
|
||||
<pre class="js">height: 300,</pre>
|
||||
<p>Height of editor in pixels, integer value.</p>
|
||||
<pre class="js">plugins: [<br /> "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",<br /> "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",<br /> "save table contextmenu directionality emoticons template paste textcolor"<br />],</pre>
|
||||
<p>A list of plugins that should be included on load.</p>
|
||||
<pre class="js">content_css: "css/content.css",</pre>
|
||||
<p>Set a css to use inside the editor window, should be a stripped down version of your website CSS, with things such as styles for headers (H1-H6), table layouts, margins, paddings around elements (images, paragraphs etc).</p>
|
||||
<pre class="js">toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l <br />ink image | print preview media fullpage | forecolor backcolor emoticons",</pre>
|
||||
<p>Select what buttons you might want in your toolbar, you can use comma or space as a seperator.</p>
|
||||
<pre class="js"> style_formats: [<br /> {title: 'Bold text', inline: 'b'},<br /> {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},<br /> {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},<br /> {title: 'Example 1', inline: 'span', classes: 'example1'},<br /> {title: 'Example 2', inline: 'span', classes: 'example2'},<br /> {title: 'Table styles'},<br /> {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}<br /> ],</pre>
|
||||
<p>Very powerfull styles configuration, for example, "Bold text" simply makes a <b> tag, "Red Text" makes a span with a style coloring it RED.</p>
|
||||
<p>The "Table row" can only be applied to a table row (tr).</p>
|
||||
<p>Check out the formats options for more information on how to bend these options to your will.</p>
|
||||
@@ -0,0 +1,67 @@
|
||||
---
|
||||
layout: default
|
||||
title: Creating a Plugin
|
||||
---
|
||||
|
||||
<p>Creating plugins in TinyMCE is pretty simple this tutorial tries to outline some of the basic concepts of creating a plugin. For more details consult the API documentation and check the existing plugins we ship with the core.</p>
|
||||
<h2>File Structure</h2>
|
||||
<p>To create a plugin you need to create a directory in the tinymce plugins directory. TinyMCE will load the plugin.js file if you use the tinymce.js file in your page. If you use the tinymce.min.js file it will load the plugin.min.js file. It's recommended to use the tinymce.js file while developing then have a build script minifying the plugin.js into plugin.min.js for production usage.</p>
|
||||
<p>The build scripts that comes with the dev package of TinyMCE will automatically build all plugins including your custom ones.</p>
|
||||
<h3>Example of the plugin file structure</h3>
|
||||
<pre class="js">/tinymce/plugins/example/plugin.js<br />/tinymce/plugins/example/plugin.min.js</pre>
|
||||
<p>This new example plugin can now be loaded using the tinymce.init plugins option.</p>
|
||||
<pre class="js">tinymce.init({<br /> selector: 'textarea',<br /> plugins: 'example'<br />});</pre>
|
||||
<p>You can also have the plugin in any location you want by loading the plugin.js/plugin.min.js files directrly after the tinymce.js/tinymce.min.js.</p>
|
||||
<h3>Example of loading the plugin from another url</h3>
|
||||
<pre class="js"><script src="/tinymce/js/tinymce.min.js"></script><br /><script src="/scripts/my.tinymce.plugin.js"></script><br /><script><br />tinymce.init({..});<br /></script></pre>
|
||||
<h2>Example plugin</h2>
|
||||
<p>Here is an <a href="http://fiddle.tinymce.com/ngdaab/0">example</a> plugin showing how you add a simple toolbar button and menu item. The button opens a dialog that lets you type in a title that gets inserted into the editor. The menu item will open the tinymce site in a dialog.</p>
|
||||
<pre class="js">tinymce.PluginManager.add('example', function(editor, url) {
|
||||
// Add a button that opens a window
|
||||
editor.addButton('example', {
|
||||
text: 'My button',
|
||||
icon: false,
|
||||
onclick: function() {
|
||||
// Open window
|
||||
editor.windowManager.open({
|
||||
title: 'Example plugin',
|
||||
body: [
|
||||
{type: 'textbox', name: 'title', label: 'Title'}
|
||||
],
|
||||
onsubmit: function(e) {
|
||||
// Insert content when the window form is submitted
|
||||
editor.insertContent('Title: ' + e.data.title);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Adds a menu item to the tools menu
|
||||
editor.addMenuItem('example', {
|
||||
text: 'Example plugin',
|
||||
context: 'tools',
|
||||
onclick: function() {
|
||||
// Open window with a specific url
|
||||
editor.windowManager.open({
|
||||
title: 'TinyMCE site',
|
||||
url: 'http://www.tinymce.com',
|
||||
width: 800,
|
||||
height: 600,
|
||||
buttons: [{
|
||||
text: 'Close',
|
||||
onclick: 'close'
|
||||
}]
|
||||
});
|
||||
}
|
||||
});
|
||||
});</pre>
|
||||
<h2>Example init</h2>
|
||||
<p>Here is a example on how to use the new toolbar button.</p>
|
||||
<pre class="js">tinymce.init({<br /> selector: 'textarea',<br /> plugins: 'example',<br /> toolbar: 'example'<br />});</pre>
|
||||
<h2>Internationalization</h2>
|
||||
<p>If you want to have custom translations for your plugin you need to create a "langs" directory in your plugin directory. TinyMCE will then try to load language files based on the specified language core for example if the language is "sv_SE" it will try to load "<your plugin>/langs/sv_SE.js".</p>
|
||||
<p>This file is similar to .po files it has the English string on the left side and the translated string on the right side.</p>
|
||||
<h3>Example of a Swedish translation for the dialog title</h3>
|
||||
<pre class="js">tinymce.addI18n('sv_SE', {<br /> "Example plugin": "Exempel plugin"<br />});</pre>
|
||||
<p>Some times you don't have all the translations that the full TinyMCE package has this would result in a 404 error while loading the non existing file. This can be avoided by adding this line to the top of your plugin file.</p>
|
||||
<pre class="js">tinymce.PluginManager.requireLangPack('example', 'sv_SE,de_AT');</pre>
|
||||
@@ -0,0 +1,18 @@
|
||||
---
|
||||
layout: default
|
||||
title: Creating a Skin
|
||||
---
|
||||
|
||||
<p>There are two ways of creating skins for TinyMCE one of them using the <a href="http://skin.tinymce.com">TinyMCE Skin Creator</a> tool the other one is to manually modify less files and build them using the node js build process. Since the skin creator is pretty self explanatory we will focus on the manual process in this tutorial.</p>
|
||||
<h3>Preparation</h3>
|
||||
<p>In order to manually build the less files you will have to download the <a href="/download/download.php">TinyMCE development package</a>. This package contains the source code for the whole TinyMCE project and the less files needed to skin the editor. You will also need to install node js and the NPM node module dependencies needed for the build process. This <a href="https://github.com/tinymce/tinymce/blob/master/readme.md">readme.md</a> file explains how to manually build tinymce.</p>
|
||||
<h3>Building skin.min.css from less files</h3>
|
||||
<p>Start of by making a copy of the default skin "lightgray" to for example "myskin" place that copy inside the skins directory next to the "lightgray" skin.</p>
|
||||
<p>Then go to the root directory of tinymce in a console and invoke "jake less" this command will automatically build css files out of the less files contained in the skins directories.</p>
|
||||
<p>The build process will produce four css files: skin.min.css, skin.ie7.min.css, content.min.css, content.inline.min.css. The ones prefixed with content are the ones used for the content inside the editor these files contain CSS for normalizing editing behavior and the look for things like video placeholders. The skin.min.css is used for the UI and the skin.ie7.min.css is used for IE7 users. This is a spearate file since this will be removed when we drop IE 7 support in the future.</p>
|
||||
<h3>Modifying the less files</h3>
|
||||
<p>Most of the things can be modified by altering the Variables.less file it contains variables for font size, font familiy, colors, borders and so on. But you might need to modify other files if you are going to do a radically different skin. The skin only changes the visual presentation of the UI not the placement of elements. Placement of elements is done by the TinyMCE UI framework and this is what makes it possible to do really complex UI layouts on all browsers without touching any CSS when you create plugins.</p>
|
||||
<h3>Modifying the icons</h3>
|
||||
<p>The icons we ship with default skin is created by <a href="http://icomoon.io/">IcoMoon</a> project. And are embedded as web fonts, this makes them retina ready and easy to skin. If you need more icons or other icons I suggest checking that service out.</p>
|
||||
<p>You can import the existing TinyMCE icons by uploading the "icomoon.dev.svg" file and then add more icons or change the ones we use. Adding more icons requires you to alter the Icons.less file and Icons.ie7.less file.</p>
|
||||
<p>There are a few images that are used for placeholders within the contents of the editor.</p>
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
layout: default
|
||||
title: Creating Custom Dialogs
|
||||
---
|
||||
|
||||
<h3>Dialogs as HTML pages</h3>
|
||||
<p>In TinyMCE 3.x all dialogs where HTML pages that got loaded into a iframe or window. This was changed in TinyMCE 4 to make it easier to make plugins and fully support CDN:s. But you can still load HTML based pages into TinyMCE dialogs by using the WindowManager.</p>
|
||||
<pre class="js">// Opens a HTML page inside a TinyMCE dialog<br />editor.windowManager.open({<br /> title: "My html dialog",<br /> url: 'mydialog.html',<br /> width: 700,<br /> height: 600<br />});</pre>
|
||||
<p>You can also pass in parameters to the dialog just as you could in 3.x by using the second parameter of the WindowManager.open.</p>
|
||||
<pre class="js">// Opens a HTML page inside a TinyMCE dialog and pass in two parameters<br />editor.windowManager.open({<br /> title: "My html dialog",<br /> url: 'mydialog.html',<br /> width: 700,<br /> height: 600<br />}, {<br /> arg1: 42,<br /> arg2: "Hello world"<br />});</pre>
|
||||
<p>You can access these parameters from your mydialog.html page by using this code:</p>
|
||||
<pre class="js">// Get the parameters passed into the window from the top frame<br />var args = top.tinymce.activeEditor.windowManager.getParams();<br />console.log(args.arg1, args.arg2);</pre>
|
||||
<p>You can also close the current window by calling:</p>
|
||||
<pre class="js">// Close the front most window (mydialog.html)<br />top.tinymce.activeEditor.windowManager.close();</pre>
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
layout: default
|
||||
title: Handling Asynchronoush Image Uploads
|
||||
---
|
||||
|
||||
<p>With the release of version 4.2, TinyMCE can now upload local images directly to an image handler of your choice. </p>
|
||||
<p>The image uploader is designed to complement the new image editing functionality of TinyMCE 4.2. Images that are edited within TinyMCE can be uploaded using this function. Local images that are added through other means - for example drag and drop when using the <a href="/wiki.php/Configuration:paste_data_images">paste_data_images</a> configuration property or using Ephox's Power Paste Plugin - can also be uploaded using this functionality.</p>
|
||||
<p>Once uploaded, TinyMCE will automatically update the <image> src attribute with the new path to the remote image. </p>
|
||||
<p>Local images can be uploaded to TinyMCE through the use of the new editor.uploadImages() function. This functionality is handled asynchronously, meaning that it is possible for users to save their content before all images have completed uploading. If this occurs, no server path to the remote image will be available and the images will be stored as Base64.</p>
|
||||
<p>To avoid this situation, it is recommended that the editor.uploadImages() function be executed prior to submitting the editor contents to the server. Once all images have been uploaded, a success callback can be utilized to execute code. This success callback can be used to save the editor's content to the server through a POST, again helping to prevent the above situation.</p>
|
||||
<p>Examples of this function are below:</p>
|
||||
<h5>Using uploadImages With jQuery</h5>
|
||||
<pre class="js">tinymce.activeEditor.uploadImages(function(success) {<br /> $.post("ajax/post.php", tinymce.activeEditor.getContent()).done(function() {<br /> console.log("Uploaded images and posted content as an ajax request.");<br /> });<br />});</pre>
|
||||
<h5>Using uploadImages and Then Posting a Form</h5>
|
||||
<pre class="js">tinymce.activeEditor.uploadImages(function(success) {<br /> document.forms[0].submit();<br />});</pre>
|
||||
<h3>Image Uploader Requirements</h3>
|
||||
<p>In order to upload local images to the remote server, you will need a server-side upload handler script that accepts the images on the server, stores them appropriately, and returns a JSON object containing the location that they were uploaded to.</p>
|
||||
<p>An example PHP upload handler implementation is available <a href="/wiki.php/PHP_Upload_Handler">here</a>.</p>
|
||||
<p>This server-side upload handler must return a JSON object that contains a "location" property. This property should represent the remote location or filename of the newly uploaded image.</p>
|
||||
<pre class="js">{ location : '/uploaded/image/path/image.png' } </pre>
|
||||
<h3>Image Uploader Options</h3>
|
||||
<p>There are multiple configuration options that will affect the operation of this feature. These options are detailed below.</p>
|
||||
<p><strong>Please note, for image uploads to function correctly, either the images_upload_url or images_upload_handler options must be set.</strong></p>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Image Upload Handling Option</strong></td>
|
||||
<td><strong>Description</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="/wiki.php/Configuration:images_upload_url">images_upload_url</a></td>
|
||||
<td>This option lets you specify a URL to where you want images to be uploaded when you call editor.uploadImages.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="/wiki.php/Configuration:images_upload_base_path">images_upload_base_path</a></td>
|
||||
<td>This option lets you specify a basepath to prepend to urls returned from the configured images_upload_url page.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="/wiki.php/Configuration:images_upload_credentials">images_upload_credentials</a></td>
|
||||
<td>This option lets you specify if calls to the configured images_upload_url should pass along credentials like cookies etc cross domain. This is disabled by default.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="/wiki.php/Configuration:images_upload_handler">images_upload_handler</a></td>
|
||||
<td>This option lets you replace TinyMCE's default javascript upload handler function with custom logic. The upload handler function takes three arguments, blobInfo, a success callback and a failure callback. When this option is not set, TinyMCE utilizes an XMLHttpRequest to upload images one at a time to the server, and calls the success callback with the location of the remote image.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>An example of a typical setup is below:</p>
|
||||
<pre class="js">tinymce.init({<br /> ...<br /> images_upload_url: "postAcceptor.php",<br /> images_upload_base_path: "/some/basepath",<br /> images_upload_credentials: true<br />});
|
||||
</pre>
|
||||
<h3>Rolling Your Own Image Handler</h3>
|
||||
<p>If the default behaviour of TinyMCE's image upload logic is not right for you, you may set your own behaviour by using the images_upload_handler configuration property.</p>
|
||||
<p>Please note that while using this option, no other image uploader options are necessary. Additionally, if you would like TinyMCE to replace the <image> tag's src attribute with the remote location, please use the success callback defined in the image_upload_handler function with the returned JSON object's location property.</p>
|
||||
<p>An example of this setup is below:</p>
|
||||
<pre class="js">tinymce.init({<br /> ...<br /> images_upload_handler: function (blobInfo, success, failure) {<br /> var xhr, formData;<br /><br /> xhr = new XMLHttpRequest();<br /> xhr.withCredentials = false;<br /> xhr.open('POST', "postAcceptor.php");<br /><br /> xhr.onload = function() {<br /> var json;<br /><br /> if (xhr.status != 200) {<br /> failure("HTTP Error: " + xhr.status);<br /> return;<br /> }<br /><br /> json = JSON.parse(xhr.responseText);<br /><br /> if (!json || typeof json.location != "string") {<br /> failure("Invalid JSON: " + xhr.responseText);<br /> return;<br /> }<br /><br /> success(json.location);<br /> };<br /><br /> formData = new FormData();<br /> formData.append('file', blobInfo.blob(), fileName(blobInfo));<br /><br /> xhr.send(formData);<br /> }<br />});</pre>
|
||||
<h3>CORS Considerations</h3>
|
||||
<p>You may choose for your web application to upload image data to a separate domain. If so, you will need to configure <a href="http://en.wikipedia.org/wiki/Cross-origin_resource_sharing">Cross-origin resource sharing (CORS)</a> for your application to comply with JavaScript "same origin" restrictions.</p>
|
||||
<p>CORS has very strict rules about what constitutes a cross-origin request. The browser can require CORS headers when uploading to the same server the editor is hosted on, for example:</p>
|
||||
<ul>
|
||||
<li>A different port on the same domain name</li>
|
||||
<li>Using the host IP address instead of the domain name</li>
|
||||
<li>Swapping between HTTP and HTTPS for the page and the upload script</li>
|
||||
</ul>
|
||||
<p>The upload script URL origin must <em>exactly</em> match the origin of the URL in the address bar, or the browser will require CORS headers to access it. A good way to guarantee this is to use a relative URL to specify the script address, instead of an absolute one.</p>
|
||||
<p>All supported browsers will print a message to the JavaScript console if there is a CORS error.</p>
|
||||
<p>The <a href="/wiki.php/PHP_Upload_Handler">PHP Upload Handler Script</a> provided here configures CORS in the $accepted_origins variable. You may choose to configure CORS at the <a href="http://www.w3.org/wiki/CORS_Enabled#At_the_Web_Application_level...">web application layer</a> or the <a href="http://www.w3.org/wiki/CORS_Enabled#At_the_HTTP_Server_level...">HTTP server layer</a>. </p>
|
||||
<p><strong>Further Reading on CORS</strong></p>
|
||||
<ul>
|
||||
<li><a href="http://www.w3.org/wiki/CORS_Enabled">W3C Wiki - CORS Enabled</a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS">MDN - HTTP access control (CORS)</a></li>
|
||||
<li><a href="http://www.w3.org/TR/cors/">W3C - Cross-Origin Resource Sharing </a><a href="http://www.w3.org/TR/cors/">Specification</a></li>
|
||||
</ul>
|
||||
@@ -0,0 +1,34 @@
|
||||
---
|
||||
layout: default
|
||||
title: Migration Guide From 3x
|
||||
---
|
||||
|
||||
<h4>File structure</h4>
|
||||
<p>The file structure was changed in the 4.0 release to more closely match other JavaScript projects. All minified files are suffixed with ".min.js" and "editor_plugin" and "editor_theme" was replaced with "plugin" and "theme".</p>
|
||||
<pre class="js">/tiny_mce/tiny_mce.js -> /tinymce/tinymce.min.js <br />/tiny_mce/tiny_mce_src.js -> /tinymce/tinymce.js <br />/tiny_mce/plugins/<plugin>/editor_plugin.js -> /tinymce/plugins/<plugin>/plugin.min.js <br />/tiny_mce/plugins/<plugin>/editor_plugin_src.js -> /tinymce/plugins/<plugin>/plugin.js <br />/tiny_mce/theme/<plugin>/editor_template.js -> /tinymce/plugins/<plugin>/theme.min.js <br />/tiny_mce/theme/<plugin>/editor_template_src.js -> /tinymce/plugins/<plugin>/theme.js </pre>
|
||||
<h4>Removed plugins</h4>
|
||||
<p>These plugins where removed in 4.0: <a href="/wiki.php/Plugin3x:advhr">advhr</a>, <a href="/wiki.php/Plugin3x:advimage">advimage</a>, <a href="/wiki.php/Plugin3x:advlink">advlink</a>, <a href="/wiki.php/Plugin3x:iespell">iespell</a>, <a href="/wiki.php/Plugin3x:inlinepopups">inlinepopups</a>, <a href="/wiki.php/Plugin3x:style">style</a>, <a href="/wiki.php/Plugin3x:emotions">emotions</a> and <a href="/wiki.php/Plugin3x:xhtmlxtras">xhtmlxtras</a>.</p>
|
||||
<h4>New plugins</h4>
|
||||
<p>These are the new plugins in 4.0: <a href="/wiki.php/Plugin:anchor">anchor</a>, <a href="/wiki.php/Plugin:charmap">charmap</a>, <a href="/wiki.php/Plugin:compat3x">compat3x</a>, <a href="/wiki.php/Plugin:hr">hr</a>, <a href="/wiki.php/Plugin:image">image</a>, <a href="/wiki.php/Plugin:link">link</a>, <a href="/wiki.php/Plugin:emoticons">emoticons</a>, <a href="/wiki.php/Plugin:code">code</a> and <a href="/wiki.php/Plugin:textcolor">textcolor</a>.</p>
|
||||
<h4>Removed themes</h4>
|
||||
<p>The "simple" and "advanced" themes where removed in 4.0.</p>
|
||||
<h4>New themes</h4>
|
||||
<p>The new "modern" theme was introduced in 4.0. More themes will be added in the future.</p>
|
||||
<h4>Event handling</h4>
|
||||
<p>TinyMCE 4.0 has a new way of binding events. Instead of the old dispatcher method it uses the more common "on" and "off" like for example jQuery. It also allows you to bind multiple events and cancel events using the more common preventDefault and stopPropagation. Check the <a href="/wiki.php/api4:class.tinymce.Editor">API documentation</a> for a full list of events.</p>
|
||||
<pre class="js">// Old event<br />editor.onInit(editor, args) {<br /> // Custom logic<br />});<br /><br />// New event<br />editor.on('init', function(args) {<br /> // Custom logic<br />});</pre>
|
||||
<h4>User interface</h4>
|
||||
<p>The user interface logic has been changed compleatly in 4.0. Though the more easier methods of adding buttons and windows are the same more complex controls or dialogs needs to be written in the new API style.</p>
|
||||
<h3>Control states</h3>
|
||||
<p>Each control in TinyMCE 4 is supposed to be an self contained unit. This enables controls to be created at multiple locations in the UI. So the old controlManager with fixed names has been removed.</p>
|
||||
<pre class="js">// This is how control states used to function in the 3.x UI API<br />editor.onNodeChange.add(function(editor, controlManager, node) {<br /> controlManager.setActive('SomeButton', node.nodeName == 'A');<br />});</pre>
|
||||
<pre class="js">// In TinyMCE 4 you can use the simpler stateSelector setting<br />editor.addButton('SomeButton', {<br /> text: 'My button',<br /> stateSelector: 'a'<br />});<br /><br />// Or you can use custom logic using the "nodechange" event<br />editor.addButton('SomeButton', {<br /> text: 'My button',<br /> onPostRender: function() {<br /> var ctrl = this;<br /> <br /> ed.on('NodeChange', function(e) {<br /> ctrl.active(e.element.nodeName == 'A');<br /> });<br /> }<br />});</pre>
|
||||
<h3>Dialogs/Windows</h3>
|
||||
<p>In TinyMCE 3.x all dialogs where HTML files loaded in iframes or separate windows. In 4.x all windows are DIV elements placed onto the same page as the editor. You can however still load pages into iframe based windows.</p>
|
||||
<pre class="js">// Open URL based window<br />editor.windowManager.open({<br /> title: "My dialog",<br /> width: 500,<br /> height: 400,<br /> url: "somepage.html"<br />}, {<br /> someArg: "someValue"<br />});</pre>
|
||||
<p>Here are some examples on how to extract parameters passed to windows and closing windows inside your "somepage.html" code.</p>
|
||||
<pre class="js">// Get someArg value inside iframe dialog<br />var someArg = top.tinymce.activeEditor.windowManager.getParams().someArg;<br /><br />// Close the top most window<br />top.tinymce.activeEditor.windowManager.close();</pre>
|
||||
<h4>HTML5 output</h4>
|
||||
<p>TinyMCE produces HTML5 loose output as of 4.0. This means it can handle all new HTML5 elements and also allow the deprecated HTML4 attributes and elements. If you want to use html4 or html5-strict output check the <a href="/wiki.php/Configuration:schema">schema</a> option for details.</p>
|
||||
<h4>Using the compat3x plugin</h4>
|
||||
<p>As a last resort one can use the <a href="/wiki.php/Plugin:compat3x">compat3x plugin</a> it mimic parts of the 3.x API contains a few files removed from 4.x. We only recommend this as a last resort and it won't work for all plugins. But most plugins should work right out of the box we tested it with some of our own old 3.x plugins.</p>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
layout: default
|
||||
title: TinyMCE in a Bootstrap Dialog
|
||||
---
|
||||
|
||||
<p>You need to override the built in block on focusin in bootstrap dialogs when using TinyMCE inside it. See this <a href="http://fiddle.tinymce.com/oxdaab">working example</a> for details.</p>
|
||||
<p>Bootstrap blocks all focus events on contents within the dialog. Add this script to your page and it will allow users to click inside the editor.</p>
|
||||
<pre class="js">// Prevent bootstrap dialog from blocking focusin<br />$(document).on('focusin', function(e) {<br /> if ($(e.target).closest(".mce-window").length) {<br /> e.stopImmediatePropagation();<br /> }<br />});</pre>
|
||||
@@ -0,0 +1,6 @@
|
||||
---
|
||||
layout: default
|
||||
title: TinyMCE in a jQuery UI Dialog
|
||||
---
|
||||
|
||||
<p>You need to add some custom logic when rendering TinyMCE instances inside jQuery UI dialogs since it blocks all focus in calls of elements outside the dialog. Check this <a href="http://fiddle.tinymce.com/rsdaab">fiddle</a> out for a working example.</p>
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
layout: default
|
||||
title: Using CDN
|
||||
---
|
||||
|
||||
<p>Cachefly is sponsoring the CDN hosting of TinyMCE, to use it, simply include this line of code into your HTML page.</p>
|
||||
<pre class="js"><script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script></pre>
|
||||
<p>There are a few special things you need to take in consideration when using the CDN version, first of all, if you wish to use any local plugins (Like <a href="http://www.moxiemanager.com">MoxieManager</a> for example) you need to load them using the new option called:</p>
|
||||
<p><a href="/wiki.php/Configuration:external_plugins">external_plugins</a></p>
|
||||
<p>Also, if you wish to use a custom language, you need to enter the location of the language file into the new option called:</p>
|
||||
<p><a href="/wiki.php/Configuration:language_url">language_url</a></p>
|
||||
<p>For a list of possible versions, check this text document:</p>
|
||||
<p><a href="http://tinymce.cachefly.net/index.txt">http://tinymce.cachefly.net/index.txt</a></p>
|
||||
<p>If you haven't tried CacheFly, now is the perfect time. Try CacheFly's risk-free 2TB 14-Day trial—no credit card required. Use promo code: TINYMCE and get exclusive Pay-As-You-Go pricing. Sign up at <a href="http://www.cachefly.com">www.cachefly.com</a>.</p>
|
||||
@@ -0,0 +1,10 @@
|
||||
---
|
||||
layout: default
|
||||
title: Using the GZip Compressors
|
||||
---
|
||||
|
||||
<p>The <a href="/download/compressors.php">TinyMCE gzip compressors</a> helps you to dynamically combine and compress the different parts of TinyMCE to reduce the loading time. These compressors are very easy to use as of 4.x just drop the script into the tinymce folder change the path to the script from tinymce.min.js to tinymce.gzip.js and it will compress for you automatically when you call tinymce.init to create editor instances.</p>
|
||||
<h3>Example using the tinymce.gzip.js</h3>
|
||||
<pre class="js"><script src="/js/tinymce/tinymce.gzip.js"></script><br /><script><br />tinymce.init({<br /> selector: 'textarea',<br /> plugins: 'image link'<br />});<br /></script></pre>
|
||||
<h3>Example using the jQuery plugin</h3>
|
||||
<pre class="js"><script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><br /><script src="js/tinymce/jquery.tinymce.min.js"></script><br /><script><br /> $(function() {<br /> $('textarea.tinymce').tinymce({<br /> script_url: 'js/tinymce/tinymce.gzip.php',<br /> plugins: 'media,code'<br /> });<br /> });<br /></script></pre>
|
||||
Reference in New Issue
Block a user