update text styles in tiny mce

CHANGELOG.rst

@@ -1,9 +1,13 @@
 Changelog
 =========
 
-0.0.19 (development)
+0.0.20 (development)
 --------------------
 
+0.0.19
+------
+* Update tinymce4 to 4.7.1
+* Add 'image_class_list'
 
 0.0.18
 ------

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "django-tinymce-4",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "homepage": "https://github.com/ITCase-django/django-tinymce-4",
   "authors": [
     "ITCase <[email protected]>"
@@ -15,6 +15,6 @@
     "tests"
   ],
   "dependencies": {
-    "tinymce": "~4.4.3"
+    "tinymce": "~4.7.1"
   }
 }

gulpfile.js

@@ -3,11 +3,11 @@
 const gulp = require('gulp')
 const plugins = require('gulp-load-plugins')({ pattern: ['gulp-*', 'gulp.*'] })
 
-const argv = require('yargs').argv;
+const argv = require('yargs').argv
 const map = require('vinyl-map')
 
 const TARGET_CSS = '__tinymce-4.css'
-const TARGET_CSS_PATH ='./tinymce_4/static/tinymce_4/css/'
+const TARGET_CSS_PATH = './tinymce_4/static/tinymce_4/css/'
 const CSS_FILES = [
   './tinymce_4/static/tinymce_4/css/*.css',
   './tinymce_4/static/tinymce_4/css/**/*.css',
@@ -95,7 +95,7 @@ gulp.task('css', () => {
 })
 
 gulp.task('watch', () => {
-  plugins.watch(paths.CSS_FILES, { verbose: true },
+  plugins.watch(CSS_FILES, { verbose: true },
     plugins.batch((cb) => {
       gulp.series('css')()
       cb()

package.json

@@ -2,7 +2,7 @@
   "name": "django-tinymce-4",
   "title": "Integrate TinyMCE4 in Django projects",
   "description": "",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "homepage": "http://www.github.com/ITCase-django/django-tinymce-4/",
   "author": "ITCase <[email protected]> (http://www.itcase.pro/)",
   "repository": {

tinymce_4/__init__.py

@@ -1,3 +1,3 @@
 # -*- coding: utf-8 -*-
 
-__version__ = '0.0.18'
+__version__ = '0.0.19'

tinymce_4/static/tinymce_4/css/list.css

@@ -2,7 +2,7 @@
 
 ol {
   counter-reset: list1;
-  padding: 0 0 1em 1em;
+  padding: 0 0 15px 15px;
   & li {
     position: relative;
     display: block;
@@ -20,7 +20,7 @@ ol {
       top: 0;
     }
     & * ol {
-      margin: 1.5em 0 0 0;
+      margin: 20px 0 0 0;
       padding-bottom: 0;
       & li:last-child {
         padding-bottom: 0;
@@ -44,10 +44,10 @@ ul {
     }
     &::before {
       content: '\2014\a0';
-      padding: 0 0.5em 0 0;
+      padding: 0 8px 0 0;
     }
     & * ul {
-      margin: 1.5em 0 0 0;
+      margin: 24px 0 0 0;
       padding-bottom: 0;
       & li:last-child {
         padding-bottom: 0;

tinymce_4/static/tinymce_4/plugins/insertZoomImage.js

@@ -0,0 +1,50 @@
+/* global tinymce */
+
+tinymce.PluginManager.add('insertzoomimage', function (editor, url) {
+  function openDialog () {
+    const selfData = tinymce.activeEditor.selection.getNode()
+    editor.windowManager.open({
+      title: 'Insert Zoomable Image',
+      body: [
+        {
+          name: 'src',
+          type: 'filepicker',
+          filetype: 'image',
+          label: 'Image',
+          autofocus: true,
+          value: selfData.getAttribute('data-mce-src') || null
+        },
+        {
+          name: 'zoomableSrc',
+          type: 'filepicker',
+          filetype: 'image',
+          label: 'Zoomable Image',
+          value: selfData.getAttribute('data-image-path') || null
+        }
+      ],
+      onSubmit: (e) => {
+        editor.insertContent(
+          '<img src="' + e.data.src + '"' + 'data-image-path="' + e.data.zoomableSrc + '"' + 'class="image_action_open-popup" />'
+        )
+      }
+    })
+  }
+
+  editor.addMenuItem('insertzoomimage', {
+    text: 'Insert zoomable image',
+    context: 'insert',
+    icon: 'browse',
+    onClick: () => {
+      openDialog()
+    }
+  })
+
+  editor.addButton('insertzoomimage', {
+    icon: 'browse',
+    tooltip: 'Insert zoomable image',
+    stateSelector: 'img',
+    onClick: () => {
+      openDialog()
+    }
+  })
+})

tinymce_4/static/tinymce_4/settings/full.js

@@ -14,6 +14,12 @@ if (typeof tinySettings === 'object') {
   if (typeof externalPlugins === 'object') {
     tinySettings.external_plugins = externalPlugins;
   }
+  if (typeof imageClassList === 'object') {
+    tinySettings.image_class_list = imageClassList;
+  }
+  if (typeof languageUrl === 'string') {
+    tinySettings.language_url = languageUrl
+  }
   if (typeof styleFormats === 'object') {
     tinySettings.style_formats = styleFormats.concat(customStyleFormats);
   }
@@ -22,5 +28,5 @@ if (typeof tinySettings === 'object') {
   }
   tinymce.init(tinySettings);
 } else {
-  console.warn('tinySettings is not exists');
+  console.warn('tinyMCE 4 Settings is not exists');
 }

tinymce_4/static/tinymce_4/settings/full/custom_style_formats.js

@@ -1,8 +1,8 @@
 var customStyleFormats = [
-  {
-    title: 'Custom Title',
-    items: [
-      { title: 'Custom Style', selector: 'table' }
-    ]
-  }
+  // {
+  //   title: 'Custom Title',
+  //   items: [
+  //     { title: 'Custom Style', selector: 'table' }
+  //   ]
+  // }
 ]

tinymce_4/static/tinymce_4/settings/full/external_plugins.js

@@ -1,3 +1,3 @@
 var externalPlugins = {
-  //'testing': 'http://www.testing.com/plugin.min.js',
+  'insertzoomimage': '/static/tinymce_4/plugins/insertZoomImage.js'
 }

tinymce_4/static/tinymce_4/settings/full/image_class_list.js

@@ -0,0 +1,8 @@
+var imageClassList = [
+  {
+    title: 'None', value: ''
+  }, {
+    title: 'Open in modal window',
+    value: 'image_action_open-popup'
+  }
+]

tinymce_4/static/tinymce_4/settings/full/language_url.js

@@ -0,0 +1,2 @@
+var languageUrl = ''
+// '/static/tinymce_4/langs/ru.js'

tinymce_4/static/tinymce_4/settings/full/menu.js

@@ -18,5 +18,9 @@ var menu = {
   table: {
     title: 'Table',
     items: 'inserttable tableprops deletetable | cell row column'
+  },
+  plugins: {
+    title: 'Plugins',
+    items: 'insertzoomimage'
   }
 }

tinymce_4/static/tinymce_4/settings/full/plugins.js

@@ -1,5 +1,5 @@
 var plugins = [
-  'advlist anchor autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
+  'insertzoomimage advlist anchor autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
   'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
   'save table contextmenu directionality emoticons template paste textcolor'
 ]