Skip to content

Commit

Permalink
Item14288: added tinymce_native engien
Browse files Browse the repository at this point in the history
- make lists work
- make content_css work
- auto-downgrade to engine tinymce_native if NOWYSIWYG is off
- added switchToWYSIWYG event to tinymce plugin
- generate legacy output by default -> SMELL: this is not HTML5 compatible
  • Loading branch information
MichaelDaum committed Mar 27, 2017
1 parent fd9adbe commit 1908535
Show file tree
Hide file tree
Showing 10 changed files with 308 additions and 105 deletions.
1 change: 1 addition & 0 deletions NatEditPlugin/.gitignore
Expand Up @@ -15,3 +15,4 @@ pub/System/NatEditPlugin/engine/codemirror/engine.js
pub/System/NatEditPlugin/engine/prosemirror/engine.js
pub/System/NatEditPlugin/engine/raw/engine.js
pub/System/NatEditPlugin/engine/tinymce/engine.js
pub/System/NatEditPlugin/engine/tinymce_native/engine.js
20 changes: 20 additions & 0 deletions NatEditPlugin/lib/Foswiki/Plugins/NatEditPlugin/NATEDIT.pm
Expand Up @@ -89,12 +89,16 @@ sub init {
|| $Foswiki::cfg{NatEditPlugin}{DefaultEngine}
|| 'raw';

# force into raw as it is the only engine compatible with TinyMCEPlugin loading TinyMCE on its own
$engine = 'tinymce_native' if _isTinyMCEEnabled();

Foswiki::Func::addToZone(
"script", "NATEDIT::PREFERENCES",
<<"HERE", "JQUERYPLUGIN::FOSWIKI::PREFERENCES" );
<script class='\$zone \$id foswikiPreferences' type='text/json'>{
"NatEditPlugin": {
"Engine": "$engine",
"ContentCSS": ["%PUBURLPATH%/%SYSTEMWEB%/TinyMCEPlugin/wysiwyg.css","%PUBURLPATH%/%SYSTEMWEB%/SkinTemplates/base.css","%FOSWIKI_STYLE_URL%","%FOSWIKI_COLORS_URL%"],
"MathEnabled": %IF{"context MathModePluginEnabled or context MathJaxPluginEnabled" then="true" else="false"}%,
"ImagePluginEnabled": %IF{"context ImagePluginEnabled" then="true" else="false"}%,
"TopicInteractionPluginEnabled": %IF{"context TopicInteractionPluginEnabled" then="true" else="false"}%,
Expand All @@ -104,4 +108,20 @@ sub init {
HERE
}

# SMELL: see for Foswiki::Plugins::TinyMCEPLugin::_notAvailable
sub _isTinyMCEEnabled {
for my $c (qw(TINYMCEPLUGIN_DISABLE NOWYSIWYG)) {
return 0 if Foswiki::Func::getPreferencesFlag($c);
}

my $skin = Foswiki::Func::getPreferencesValue('WYSIWYGPLUGIN_WYSIWYGSKIN');
return 0 if $skin && Foswiki::Func::getSkin() =~ m/\b$skin\b/;

my $query = Foswiki::Func::getCgiQuery();
return 0 unless $query;
return 0 if $query->param('nowysiwyg');

return 1;
}

1;
3 changes: 2 additions & 1 deletion NatEditPlugin/pub/System/NatEditPlugin/engine/Makefile
Expand Up @@ -4,7 +4,8 @@ SUBDIRS=\
raw \
codemirror \
prosemirror \
tinymce
tinymce \
tinymce_native

-include $(FOSWIKI_ROOT)/pub/System/JQueryPlugin/Makefile.include

Expand Up @@ -29,10 +29,11 @@ window.BaseEngine = function BaseEngine() {
* init this engine
*/
BaseEngine.prototype.init = function() {
//var self = this;
var self = this;

//self.log("BaseEngine::init");
// return dfd.promise();

return $.Deferred().resolve(self).promise();
};

/*************************************************************************
Expand All @@ -42,6 +43,15 @@ BaseEngine.prototype.initGui = function() {
// nop
};

/*************************************************************************
* get the DOM element that holds the editor engine
*/
BaseEngine.prototype.getWrapperElement = function() {
var self = this;

return $(self.shell.txtarea);
};

/*************************************************************************
* register events to editor engine
*/
Expand All @@ -68,6 +78,15 @@ BaseEngine.prototype.setSize = function(width, height) {
}
};

/*************************************************************************
* called during save process
*/
BaseEngine.prototype.beforeSubmit = function(action) {
var self = this;

return $.Deferred().resolve().promise();
};

/*************************************************************************
* set the value of the editor
*/
Expand Down
Expand Up @@ -31,6 +31,7 @@ function TinyMCEEngine(shell, opts) {
self.opts = $.extend({}, TinyMCEEngine.defaults, self.shell.opts.tinymce, opts);
self.opts.tinymce.selector = "#"+self.shell.id+" textarea";
self.opts.natedit.signatureMarkup = ['-- ', '<a href="'+wikiUserNameUrl+'">'+foswiki.getPreference("WIKINAME")+'</a>', ' - '+foswiki.getPreference("SERVERTIME")];
self.opts.tinymce.content_css = foswiki.getPreference("NatEditPlugin").ContentCSS;

$.extend(self.shell.opts, self.opts.natedit);
}
Expand All @@ -57,7 +58,10 @@ TinyMCEEngine.prototype.init = function() {
//self.log("tinymce instance", editor);

self.editor = editor;
//window.editor = editor; // playground

if (self.opts.debug) {
window.editor = editor; // playground
}

self.tml2html($(self.shell.txtarea).val())
.done(function(data) {
Expand Down Expand Up @@ -118,13 +122,31 @@ TinyMCEEngine.prototype.initGui = function() {
// highlight buttons on toolbar when the cursor moves into a format
$.each(self.opts.tinymce.formats, function(formatName) {
self.editor.formatter.formatChanged(formatName, function(state, args) {

$.each(self.editor.formatter.get(formatName), function(i, format) {
if (state) {
self.shell.toolbar.find(format.toolbar).addClass("ui-natedit-active");
} else {
self.shell.toolbar.find(format.toolbar).removeClass("ui-natedit-active");
}
});

// lists
self.shell.toolbar.find(".ui-natedit-numbered").removeClass("ui-natedit-active");
self.shell.toolbar.find(".ui-natedit-bullet").removeClass("ui-natedit-active");

$.each(args.parents, function(i, prt) {
var node = $(prt), parentNode = $(args.parents[i+1]);

if (node.is('li')) {
if (parentNode.is("ol")) {
self.shell.toolbar.find(".ui-natedit-numbered").addClass("ui-natedit-active");
} else {
self.shell.toolbar.find(".ui-natedit-bullet").addClass("ui-natedit-active");
}
}
});

});
});

Expand Down Expand Up @@ -174,13 +196,27 @@ TinyMCEEngine.prototype.on = function(eventName, func) {
TinyMCEEngine.prototype.handleToolbarAction = function(ui) {
var self = this,
data = $.extend({}, ui.data()),
format = data.markup;
markup = data.markup;


if (typeof(markup) !== 'undefined') {
if (markup === 'numberedListMarkup') {
self.shell.toolbar.find(".ui-natedit-numbered").addClass("ui-natedit-active");
self.shell.toolbar.find(".ui-natedit-bullet").removeClass("ui-natedit-active");
self.editor.execCommand("InsertOrderedList");
return;
}

if (markup === 'bulletListMarkup') {
self.shell.toolbar.find(".ui-natedit-numbered").removeClass("ui-natedit-active");
self.shell.toolbar.find(".ui-natedit-bullet").addClass("ui-natedit-active");
self.editor.execCommand("InsertUnorderedList");
return;
}

// TODO: for now only handle markup buttons
if (typeof(format) !== 'undefined') {
if (self.editor.formatter.get(format)) {
if (self.editor.formatter.get(markup)) {
delete data.markup;
self.editor.formatter.toggle(format);
self.editor.formatter.toggle(markup);
}
}

Expand Down Expand Up @@ -413,8 +449,9 @@ TinyMCEEngine.prototype.setSize = function(width, height) {
* editor defaults
*/
TinyMCEEngine.defaults = {
debug: false,
debug: true,
natedit: {
numberedListMarkup: [' foo ','enumerated item',''],
},
tinymce: {
selector: 'textarea#topic',
Expand All @@ -423,7 +460,7 @@ TinyMCEEngine.defaults = {
statusbar: false,
plugins: 'contextmenu table searchreplace paste lists link anchor hr legacyoutput image', // save autosave fullscreen anchor charmap code textcolor colorpicker
paste_data_images: true,
content_css: ["/pub/System/TinyMCEPlugin/wysiwyg.css", "/pub/System/SkinTemplates/base.css"],
content_css: [],
formats: {
h1Markup: { block: "h1", toolbar: ".ui-natedit-h1" },
h2Markup: { block: "h2", toolbar: ".ui-natedit-h2" },
Expand All @@ -434,16 +471,16 @@ TinyMCEEngine.defaults = {
normalMarkup: { block: "p", toolbar: ".ui-natedit-normal"},
quoteMarkup: { block: "blockquote", toolbar: ".ui-natedit-quoted"},
boldMarkup: { inline: "b", toolbar: ".ui-natedit-bold" },
italicMarkup: { inline: "em", toolbar: ".ui-natedit-italic" },
italicMarkup: { inline: "i", toolbar: ".ui-natedit-italic" },
monoMarkup: { inline: "code", toolbar: ".ui-natedit-mono" },
underlineMarkup: { inline: "span", styles: { "text-decoration": "underline" }, toolbar: ".ui-natedit-underline" },
strikeMarkup: { inline: "span", styles: { "text-decoration": "line-through" }, toolbar: ".ui-natedit-strike" },
superscriptMarkup: { inline: "sup", toolbar: ".ui-natedit-super" },
subscriptMarkup: { inline: "sub", toolbar: ".ui-natedit-sub" },
leftMarkup: { block: "p", styles: { "text-align": "left" }, toolbar: ".ui-natedit-left" },
rightMarkup: { block: "p", styles: { "text-align": "right" }, toolbar: ".ui-natedit-right" },
centerMarkup: { block: "p", styles: { "text-align": "center" }, toolbar: ".ui-natedit-center" },
justifyMarkup: { block: "p", styles: { "text-align": "justify" }, toolbar: ".ui-natedit-justify" },
leftMarkup: { block: "p", attributes: { "align": "left" }, toolbar: ".ui-natedit-left" },
rightMarkup: { block: "p", attributes: { "align": "right" }, toolbar: ".ui-natedit-right" },
centerMarkup: { block: "p", attributes: { "align": "center" }, toolbar: ".ui-natedit-center" },
justifyMarkup: { block: "p", attributes: { "align": "justify" }, toolbar: ".ui-natedit-justify" },
verbatimMarkup: { block: "pre", classes: "TMLverbatim", toolbar: ".ui-natedit-verbatim" }
}
}
Expand Down
@@ -0,0 +1,4 @@
FOSWIKI_ROOT?=~/foswiki/core
TARGET= engine.js

-include $(FOSWIKI_ROOT)/pub/System/JQueryPlugin/Makefile.include
@@ -0,0 +1,102 @@
/*
* jQuery NatEdit: tinymce native engine
*
* Copyright (c) 2017 Michael Daum http://michaeldaumconsulting.com
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/

/*global BaseEngine:false tinymce:false*/

"use strict";
(function($) {

/*****************************************************************************
* constructor
*/

TinyMCENativeEngine.prototype = new BaseEngine();
TinyMCENativeEngine.prototype.constructor = TinyMCENativeEngine;
TinyMCENativeEngine.prototype.parent = BaseEngine.prototype;

function TinyMCENativeEngine(shell, opts) {
var self = this;

self.shell = shell;
self.opts = $.extend({}, TinyMCENativeEngine.defaults, opts);
self.opts.natedit.showToolbar = false;
self.editor = tinymce.editors[0];

$.extend(self.shell.opts, self.opts.natedit);
}

/*************************************************************************
* init gui
*/
TinyMCENativeEngine.prototype.initGui = function() {
var self = this, $txtarea = $(self.shell.txtarea);

$txtarea.on("fwSwitchToRaw", function(/*ev, editor*/) {
self.shell.showToolbar().then(function() {
self.shell.toolbar.find(".ui-natedit-switch-to-wysiwyg").show();
});
}).on("fwSwitchToWYSIWYG", function() {
self.shell.hideToolbar();
$(document).trigger("resize");
});
};

/*************************************************************************
*/
TinyMCENativeEngine.prototype.switchToWYSIWYG = function(ev) {
var self = this;

self.editor.execCommand("fwSwitchToWYSIWYG");
};

/*************************************************************************
* get the DOM element that holds the editor engine
*/
TinyMCENativeEngine.prototype.getWrapperElement = function() {
var self = this;

return self.editor?$(self.editor.contentAreaContainer).children("iframe"):null;
};

/*************************************************************************
* set the size of editor
*/
TinyMCENativeEngine.prototype.setSize = function(width, height) {
var self = this,
elem = self.getWrapperElement();

width = width || 'auto';
height = height || 'auto';

if (elem) {
elem.height(height);
}
};

/***************************************************************************
* editor defaults
*/
TinyMCENativeEngine.defaults = {
debug: true,
natedit: {
}
};

/*************************************************************************
* register engine to NatEditor shell
*/
$.NatEditor.engines.tinymce_native = {
createEngine: function(shell) {
return (new TinyMCENativeEngine(shell)).init();
}
};

})(jQuery);

0 comments on commit 1908535

Please sign in to comment.