diff --git a/.gitignore b/.gitignore index 040254cb..e8221471 100644 --- a/.gitignore +++ b/.gitignore @@ -8,3 +8,4 @@ build .DS_Store .project node_modules +.idea diff --git a/README.md b/README.md index e60b71ee..52d15a3e 100644 --- a/README.md +++ b/README.md @@ -95,7 +95,7 @@ Additional options: ``` *** -**_Tinymce initialization_** - Add the ice plugin to your tinymce plugins directory and include the following in your tinymce init: +**_Tinymce 3 initialization_** - Add the ice plugin to your tinymce plugins directory and include the following in your tinymce init: ```javascript tinymce.init({ plugins: 'ice', @@ -111,6 +111,22 @@ Additional options: ``` *** +**_Tinymce 4 initialization_** - Add the ice plugin to your tinymce plugins directory and include the following in your tinymce init: +```javascript + tinymce.init({ + plugins: 'ice', + toolbar: '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 - ice needs to be initialized after the DOM ready event fires. diff --git a/demo/demo.css b/demo_tinymce3/demo.css similarity index 100% rename from demo/demo.css rename to demo_tinymce3/demo.css diff --git a/demo/index.html b/demo_tinymce3/index.html similarity index 99% rename from demo/index.html rename to demo_tinymce3/index.html index f92e02da..55584bb0 100644 --- a/demo/index.html +++ b/demo_tinymce3/index.html @@ -17,7 +17,7 @@ - + diff --git a/demo_tinymce4/demo.css b/demo_tinymce4/demo.css new file mode 100644 index 00000000..1ecc0d51 --- /dev/null +++ b/demo_tinymce4/demo.css @@ -0,0 +1,148 @@ +body { + font-size: 16px; + line-height: 24px; + background: #EFEFEF; + height: 100%; + color: #6F6F6F; + font-family: Helvetica Neue,Helvetica,Arial; +} +div.container { + width: 720px; + margin: 0 auto; +} +.editor { + box-shadow: rgba(0, 0, 0, 0.4) 0 1px 3px 0; + -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 3px 0; + -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 3px 0; + margin-bottom: 30px; + padding: 10px; + width: 700px; + height: 455px; +} +h1, h3 { + color: #7F7F7F; + text-shadow: 0 1px 0 white; +} +.control { font: 12px Arial; padding: 5px; display: inline-block; margin-bottom: 5px; } +.control button { margin-right: 5px; } +#content { color: #333333; font: 14px; } +#content, #tinymce-wrapper { height: 300px; } +#text-wrapper { + width: 620px; + background: #CFCFCF; + min-height: 300px; + max-height: 300px; + overflow: auto; + padding: 40px; + border: 1px solid #BFBFBF; + font-size: 15px; + line-height: 24px; +} +#textbody { + margin: 0 auto; + border: solid 2px #BFBFBF; + background: white; + padding: 15px 30px 30px; + outline: none; +} +a.mceButton16 img.mceIcon { width: 16px; height: 16px; padding: 2px;} + +.CT-hide .del, .CT-hide .del { + display: none; +} + +.CT-hide .ins, .CT-hide .ins { + color: #333333; + background: none !important; + border: none !important; + text-decoration: none; +} + +.del { + text-decoration: line-through; +} +.ins { + text-decoration: underline; +} + +.cts-1 { + color: green; +} +.del.cts-1 img { + border-color: green; +} +.ins.cts-1 img { + background-color: green; +} +.cts-2 { + color: #C02000; +} +.del.cts-2 img { + border-color: #C02000; +} +.ins.cts-2 img { + background-color: #C02000; +} +.cts-3 { + color: #004090; +} +.del.cts-3 img { + border-color: #004090; +} +.ins.cts-3 img { + background-color: #004090; +} +.cts-4 { + color: #F06000; +} +.del.cts-4 img { + border-color: #F06000; +} +.ins.cts-4 img { + background-color: #F06000; +} +.cts-5 { + color: purple; +} +.del.cts-5 img { + border-color: purple; +} +.ins.cts-5 img { + background-color: purple; +} +.cts-6 { + color: #801080; +} +.del.cts-6 img { + border-color: #801080; +} +.ins.cts-6 img { + background-color: #801080; +} +.cts-7 { + color: #1080B0; +} +.del.cts-7 img { + border-color: #1080B0; +} +.ins.cts-7 img { + background-color: #1080B0; +} + +.ice-avoid { + color: red; +} + +.del img { + border-top-style: dotted; + border-bottom-style: dotted; + border-width: 4px; +} + +.ins img { + padding: 3px; +} + +.ins .del img { + padding: 0px 3px; +} diff --git a/demo_tinymce4/index.html b/demo_tinymce4/index.html new file mode 100644 index 00000000..e11f2658 --- /dev/null +++ b/demo_tinymce4/index.html @@ -0,0 +1,80 @@ + + + +
+ + + + + + + + + + + + + + + + + + + + + +