update text styles in tiny mce

Author: movie4

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/__tinymce-4.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/css/__tinymce-4.css.map

@@ -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/css/list.css

@@ -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');
 }