wysihtml5: fix inserting image via update to fresh lib, fixes #81
This commit is contained in:
vitalets
parent
f28819e4c5
commit
2d0a819e73
CHANGELOG.txt
src/inputs-ext/wysihtml5
@ -5,6 +5,7 @@ X-editable changelog
|
||||
|
||||
Version 1.4.2 wip
|
||||
----------------------------
|
||||
[bug #81] wysihtml5: fix inserting image (vitalets)
|
||||
[bug] remove $.browser from wysihtml5 input to support jQuery 1.9 (vitalets)
|
||||
[bug #142] editable poshytip jquery 1.9+ compatibility (spiderpug)
|
||||
[enh #126] Update bootstrap datepicker library and add minViewMode to options (kev360)
|
||||
|
||||
@ -1,111 +1,129 @@
|
||||
!function($, wysi) {
|
||||
"use strict";
|
||||
|
||||
var templates = function(key, locale) {
|
||||
var tpl = {
|
||||
"font-styles": function(locale, options) {
|
||||
var size = (options && options.size) ? ' btn-'+options.size : '';
|
||||
return "<li class='dropdown'>" +
|
||||
"<a class='btn dropdown-toggle" + size + "' data-toggle='dropdown' href='#'>" +
|
||||
"<i class='icon-font'></i> <span class='current-font'>" + locale.font_styles.normal + "</span> <b class='caret'></b>" +
|
||||
"</a>" +
|
||||
"<ul class='dropdown-menu'>" +
|
||||
"<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='div' tabindex='-1'>" + locale.font_styles.normal + "</a></li>" +
|
||||
"<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='h1' tabindex='-1'>" + locale.font_styles.h1 + "</a></li>" +
|
||||
"<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='h2' tabindex='-1'>" + locale.font_styles.h2 + "</a></li>" +
|
||||
"<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='h3' tabindex='-1'>" + locale.font_styles.h3 + "</a></li>" +
|
||||
"</ul>" +
|
||||
"</li>";
|
||||
},
|
||||
|
||||
var tpl = {
|
||||
"font-styles":
|
||||
"<li class='dropdown'>" +
|
||||
"<a class='btn dropdown-toggle' data-toggle='dropdown' href='#'>" +
|
||||
"<i class='icon-font'></i> <span class='current-font'>" + locale.font_styles.normal + "</span> <b class='caret'></b>" +
|
||||
"</a>" +
|
||||
"<ul class='dropdown-menu'>" +
|
||||
"<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='div'>" + locale.font_styles.normal + "</a></li>" +
|
||||
"<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='h1'>" + locale.font_styles.h1 + "</a></li>" +
|
||||
"<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='h2'>" + locale.font_styles.h2 + "</a></li>" +
|
||||
"<li><a data-wysihtml5-command='formatBlock' data-wysihtml5-command-value='h3'>" + locale.font_styles.h3 + "</a></li>" +
|
||||
"</ul>" +
|
||||
"</li>",
|
||||
"emphasis": function(locale, options) {
|
||||
var size = (options && options.size) ? ' btn-'+options.size : '';
|
||||
return "<li>" +
|
||||
"<div class='btn-group'>" +
|
||||
"<a class='btn" + size + "' data-wysihtml5-command='bold' title='CTRL+B' tabindex='-1'>" + locale.emphasis.bold + "</a>" +
|
||||
"<a class='btn" + size + "' data-wysihtml5-command='italic' title='CTRL+I' tabindex='-1'>" + locale.emphasis.italic + "</a>" +
|
||||
"<a class='btn" + size + "' data-wysihtml5-command='underline' title='CTRL+U' tabindex='-1'>" + locale.emphasis.underline + "</a>" +
|
||||
"</div>" +
|
||||
"</li>";
|
||||
},
|
||||
|
||||
"emphasis":
|
||||
"<li>" +
|
||||
"<div class='btn-group'>" +
|
||||
"<a class='btn' data-wysihtml5-command='bold' title='CTRL+B'>" + locale.emphasis.bold + "</a>" +
|
||||
"<a class='btn' data-wysihtml5-command='italic' title='CTRL+I'>" + locale.emphasis.italic + "</a>" +
|
||||
"<a class='btn' data-wysihtml5-command='underline' title='CTRL+U'>" + locale.emphasis.underline + "</a>" +
|
||||
"</div>" +
|
||||
"</li>",
|
||||
"lists": function(locale, options) {
|
||||
var size = (options && options.size) ? ' btn-'+options.size : '';
|
||||
return "<li>" +
|
||||
"<div class='btn-group'>" +
|
||||
"<a class='btn" + size + "' data-wysihtml5-command='insertUnorderedList' title='" + locale.lists.unordered + "' tabindex='-1'><i class='icon-list'></i></a>" +
|
||||
"<a class='btn" + size + "' data-wysihtml5-command='insertOrderedList' title='" + locale.lists.ordered + "' tabindex='-1'><i class='icon-th-list'></i></a>" +
|
||||
"<a class='btn" + size + "' data-wysihtml5-command='Outdent' title='" + locale.lists.outdent + "' tabindex='-1'><i class='icon-indent-right'></i></a>" +
|
||||
"<a class='btn" + size + "' data-wysihtml5-command='Indent' title='" + locale.lists.indent + "' tabindex='-1'><i class='icon-indent-left'></i></a>" +
|
||||
"</div>" +
|
||||
"</li>";
|
||||
},
|
||||
|
||||
"lists":
|
||||
"<li>" +
|
||||
"<div class='btn-group'>" +
|
||||
"<a class='btn' data-wysihtml5-command='insertUnorderedList' title='" + locale.lists.unordered + "'><i class='icon-list'></i></a>" +
|
||||
"<a class='btn' data-wysihtml5-command='insertOrderedList' title='" + locale.lists.ordered + "'><i class='icon-th-list'></i></a>" +
|
||||
"<a class='btn' data-wysihtml5-command='Outdent' title='" + locale.lists.outdent + "'><i class='icon-indent-right'></i></a>" +
|
||||
"<a class='btn' data-wysihtml5-command='Indent' title='" + locale.lists.indent + "'><i class='icon-indent-left'></i></a>" +
|
||||
"</div>" +
|
||||
"</li>",
|
||||
"link": function(locale, options) {
|
||||
var size = (options && options.size) ? ' btn-'+options.size : '';
|
||||
return "<li>" +
|
||||
"<div class='bootstrap-wysihtml5-insert-link-modal modal hide fade'>" +
|
||||
"<div class='modal-header'>" +
|
||||
"<a class='close' data-dismiss='modal'>×</a>" +
|
||||
"<h3>" + locale.link.insert + "</h3>" +
|
||||
"</div>" +
|
||||
"<div class='modal-body'>" +
|
||||
"<input value='http://' class='bootstrap-wysihtml5-insert-link-url input-xlarge'>" +
|
||||
"</div>" +
|
||||
"<div class='modal-footer'>" +
|
||||
"<a href='#' class='btn' data-dismiss='modal'>" + locale.link.cancel + "</a>" +
|
||||
"<a href='#' class='btn btn-primary' data-dismiss='modal'>" + locale.link.insert + "</a>" +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"<a class='btn" + size + "' data-wysihtml5-command='createLink' title='" + locale.link.insert + "' tabindex='-1'><i class='icon-share'></i></a>" +
|
||||
"</li>";
|
||||
},
|
||||
|
||||
"link":
|
||||
"<li>" +
|
||||
"<div class='bootstrap-wysihtml5-insert-link-modal modal hide fade'>" +
|
||||
"<div class='modal-header'>" +
|
||||
"<a class='close' data-dismiss='modal'>×</a>" +
|
||||
"<h3>" + locale.link.insert + "</h3>" +
|
||||
"</div>" +
|
||||
"<div class='modal-body'>" +
|
||||
"<input value='http://' class='bootstrap-wysihtml5-insert-link-url input-xlarge'>" +
|
||||
"</div>" +
|
||||
"<div class='modal-footer'>" +
|
||||
"<a href='#' class='btn' data-dismiss='modal'>" + locale.link.cancel + "</a>" +
|
||||
"<a href='#' class='btn btn-primary' data-dismiss='modal'>" + locale.link.insert + "</a>" +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"<a class='btn' data-wysihtml5-command='createLink' title='" + locale.link.insert + "'><i class='icon-share'></i></a>" +
|
||||
"</li>",
|
||||
"image": function(locale, options) {
|
||||
var size = (options && options.size) ? ' btn-'+options.size : '';
|
||||
return "<li>" +
|
||||
"<div class='bootstrap-wysihtml5-insert-image-modal modal hide fade'>" +
|
||||
"<div class='modal-header'>" +
|
||||
"<a class='close' data-dismiss='modal'>×</a>" +
|
||||
"<h3>" + locale.image.insert + "</h3>" +
|
||||
"</div>" +
|
||||
"<div class='modal-body'>" +
|
||||
"<input value='http://' class='bootstrap-wysihtml5-insert-image-url input-xlarge'>" +
|
||||
"</div>" +
|
||||
"<div class='modal-footer'>" +
|
||||
"<a href='#' class='btn' data-dismiss='modal'>" + locale.image.cancel + "</a>" +
|
||||
"<a href='#' class='btn btn-primary' data-dismiss='modal'>" + locale.image.insert + "</a>" +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"<a class='btn" + size + "' data-wysihtml5-command='insertImage' title='" + locale.image.insert + "' tabindex='-1'><i class='icon-picture'></i></a>" +
|
||||
"</li>";
|
||||
},
|
||||
|
||||
"image":
|
||||
"<li>" +
|
||||
"<div class='bootstrap-wysihtml5-insert-image-modal modal hide fade'>" +
|
||||
"<div class='modal-header'>" +
|
||||
"<a class='close' data-dismiss='modal'>×</a>" +
|
||||
"<h3>" + locale.image.insert + "</h3>" +
|
||||
"</div>" +
|
||||
"<div class='modal-body'>" +
|
||||
"<input value='http://' class='bootstrap-wysihtml5-insert-image-url input-xlarge'>" +
|
||||
"</div>" +
|
||||
"<div class='modal-footer'>" +
|
||||
"<a href='#' class='btn' data-dismiss='modal'>" + locale.image.cancel + "</a>" +
|
||||
"<a href='#' class='btn btn-primary' data-dismiss='modal'>" + locale.image.insert + "</a>" +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"<a class='btn' data-wysihtml5-command='insertImage' title='" + locale.image.insert + "'><i class='icon-picture'></i></a>" +
|
||||
"</li>",
|
||||
"html": function(locale, options) {
|
||||
var size = (options && options.size) ? ' btn-'+options.size : '';
|
||||
return "<li>" +
|
||||
"<div class='btn-group'>" +
|
||||
"<a class='btn" + size + "' data-wysihtml5-action='change_view' title='" + locale.html.edit + "' tabindex='-1'><i class='icon-pencil'></i></a>" +
|
||||
"</div>" +
|
||||
"</li>";
|
||||
},
|
||||
|
||||
"html":
|
||||
"<li>" +
|
||||
"<div class='btn-group'>" +
|
||||
"<a class='btn' data-wysihtml5-action='change_view' title='" + locale.html.edit + "'><i class='icon-pencil'></i></a>" +
|
||||
"</div>" +
|
||||
"</li>",
|
||||
"color": function(locale, options) {
|
||||
var size = (options && options.size) ? ' btn-'+options.size : '';
|
||||
return "<li class='dropdown'>" +
|
||||
"<a class='btn dropdown-toggle" + size + "' data-toggle='dropdown' href='#' tabindex='-1'>" +
|
||||
"<span class='current-color'>" + locale.colours.black + "</span> <b class='caret'></b>" +
|
||||
"</a>" +
|
||||
"<ul class='dropdown-menu'>" +
|
||||
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='black'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='black'>" + locale.colours.black + "</a></li>" +
|
||||
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='silver'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='silver'>" + locale.colours.silver + "</a></li>" +
|
||||
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='gray'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='gray'>" + locale.colours.gray + "</a></li>" +
|
||||
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='maroon'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='maroon'>" + locale.colours.maroon + "</a></li>" +
|
||||
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='red'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='red'>" + locale.colours.red + "</a></li>" +
|
||||
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='purple'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='purple'>" + locale.colours.purple + "</a></li>" +
|
||||
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='green'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='green'>" + locale.colours.green + "</a></li>" +
|
||||
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='olive'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='olive'>" + locale.colours.olive + "</a></li>" +
|
||||
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='navy'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='navy'>" + locale.colours.navy + "</a></li>" +
|
||||
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='blue'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='blue'>" + locale.colours.blue + "</a></li>" +
|
||||
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='orange'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='orange'>" + locale.colours.orange + "</a></li>" +
|
||||
"</ul>" +
|
||||
"</li>";
|
||||
}
|
||||
};
|
||||
|
||||
"color":
|
||||
"<li class='dropdown'>" +
|
||||
"<a class='btn dropdown-toggle' data-toggle='dropdown' href='#'>" +
|
||||
"<span class='current-color'>" + locale.colours.black + "</span> <b class='caret'></b>" +
|
||||
"</a>" +
|
||||
"<ul class='dropdown-menu'>" +
|
||||
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='black'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='black'>" + locale.colours.black + "</a></li>" +
|
||||
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='silver'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='silver'>" + locale.colours.silver + "</a></li>" +
|
||||
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='gray'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='gray'>" + locale.colours.gray + "</a></li>" +
|
||||
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='maroon'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='maroon'>" + locale.colours.maroon + "</a></li>" +
|
||||
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='red'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='red'>" + locale.colours.red + "</a></li>" +
|
||||
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='purple'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='purple'>" + locale.colours.purple + "</a></li>" +
|
||||
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='green'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='green'>" + locale.colours.green + "</a></li>" +
|
||||
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='olive'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='olive'>" + locale.colours.olive + "</a></li>" +
|
||||
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='navy'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='navy'>" + locale.colours.navy + "</a></li>" +
|
||||
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='blue'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='blue'>" + locale.colours.blue + "</a></li>" +
|
||||
"<li><div class='wysihtml5-colors' data-wysihtml5-command-value='orange'></div><a class='wysihtml5-colors-title' data-wysihtml5-command='foreColor' data-wysihtml5-command-value='orange'>" + locale.colours.orange + "</a></li>" +
|
||||
"</ul>" +
|
||||
"</li>"
|
||||
};
|
||||
return tpl[key];
|
||||
var templates = function(key, locale, options) {
|
||||
return tpl[key](locale, options);
|
||||
};
|
||||
|
||||
|
||||
var Wysihtml5 = function(el, options) {
|
||||
this.el = el;
|
||||
this.toolbar = this.createToolbar(el, options || defaultOptions);
|
||||
var toolbarOpts = options || defaultOptions;
|
||||
for(var t in toolbarOpts.customTemplates) {
|
||||
tpl[t] = toolbarOpts.customTemplates[t];
|
||||
}
|
||||
this.toolbar = this.createToolbar(el, toolbarOpts);
|
||||
this.editor = this.createEditor(options);
|
||||
|
||||
window.editor = this.editor;
|
||||
@ -125,6 +143,10 @@
|
||||
|
||||
createEditor: function(options) {
|
||||
options = options || {};
|
||||
|
||||
// Add the toolbar to a clone of the options object so multiple instances
|
||||
// of the WYISYWG don't break because "toolbar" is already defined
|
||||
options = $.extend(true, {}, options);
|
||||
options.toolbar = this.toolbar[0];
|
||||
|
||||
var editor = new wysi.Editor(this.el[0], options);
|
||||
@ -156,7 +178,7 @@
|
||||
}
|
||||
|
||||
if(value === true) {
|
||||
toolbar.append(templates(key, locale[culture]));
|
||||
toolbar.append(templates(key, locale[culture], options));
|
||||
|
||||
if(key === "html") {
|
||||
this.initHtml(toolbar);
|
||||
@ -208,10 +230,16 @@
|
||||
var urlInput = insertImageModal.find('.bootstrap-wysihtml5-insert-image-url');
|
||||
var insertButton = insertImageModal.find('a.btn-primary');
|
||||
var initialValue = urlInput.val();
|
||||
var caretBookmark;
|
||||
|
||||
var insertImage = function() {
|
||||
var url = urlInput.val();
|
||||
urlInput.val(initialValue);
|
||||
self.editor.currentView.element.focus();
|
||||
if (caretBookmark) {
|
||||
self.editor.composer.selection.setBookmark(caretBookmark);
|
||||
caretBookmark = null;
|
||||
}
|
||||
self.editor.composer.commands.exec("insertImage", url);
|
||||
};
|
||||
|
||||
@ -236,7 +264,9 @@
|
||||
var activeButton = $(this).hasClass("wysihtml5-command-active");
|
||||
|
||||
if (!activeButton) {
|
||||
insertImageModal.modal('show');
|
||||
self.editor.currentView.element.focus(false);
|
||||
caretBookmark = self.editor.composer.selection.getBookmark();
|
||||
insertImageModal.appendTo('body').modal('show');
|
||||
insertImageModal.on('click.dismiss.modal', '[data-dismiss="modal"]', function(e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
@ -254,10 +284,16 @@
|
||||
var urlInput = insertLinkModal.find('.bootstrap-wysihtml5-insert-link-url');
|
||||
var insertButton = insertLinkModal.find('a.btn-primary');
|
||||
var initialValue = urlInput.val();
|
||||
var caretBookmark;
|
||||
|
||||
var insertLink = function() {
|
||||
var url = urlInput.val();
|
||||
urlInput.val(initialValue);
|
||||
self.editor.currentView.element.focus();
|
||||
if (caretBookmark) {
|
||||
self.editor.composer.selection.setBookmark(caretBookmark);
|
||||
caretBookmark = null;
|
||||
}
|
||||
self.editor.composer.commands.exec("createLink", {
|
||||
href: url,
|
||||
target: "_blank",
|
||||
@ -287,6 +323,8 @@
|
||||
var activeButton = $(this).hasClass("wysihtml5-command-active");
|
||||
|
||||
if (!activeButton) {
|
||||
self.editor.currentView.element.focus(false);
|
||||
caretBookmark = self.editor.composer.selection.getBookmark();
|
||||
insertLinkModal.appendTo('body').modal('show');
|
||||
insertLinkModal.on('click.dismiss.modal', '[data-dismiss="modal"]', function(e) {
|
||||
e.stopPropagation();
|
||||
@ -366,7 +404,7 @@
|
||||
"wysiwyg-color-blue" : 1,
|
||||
"wysiwyg-color-teal" : 1,
|
||||
"wysiwyg-color-aqua" : 1,
|
||||
"wysiwyg-color-orange" : 1,
|
||||
"wysiwyg-color-orange" : 1
|
||||
},
|
||||
tags: {
|
||||
"b": {},
|
||||
@ -398,7 +436,10 @@
|
||||
}
|
||||
},
|
||||
"span": 1,
|
||||
"div": 1
|
||||
"div": 1,
|
||||
// to allow save and edit files with code tag hacks
|
||||
"code": 1,
|
||||
"pre": 1
|
||||
}
|
||||
},
|
||||
stylesheets: ["./lib/css/wysiwyg-color.css"], // (path_to_project/lib/css/wysiwyg-color.css)
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -7,6 +7,8 @@ You should include this input **manually** with dependent js and css files from
|
||||
<script src="js/inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.2/bootstrap-wysihtml5-0.0.2.min.js"></script>
|
||||
<script src="js/inputs-ext/wysihtml5/wysihtml5.js"></script>
|
||||
|
||||
**Note:** It's better to use fresh bootstrap-wysihtml5 from it's [master branch](https://github.com/jhollingworth/bootstrap-wysihtml5/tree/master/src) as there is update for correct image insertion.
|
||||
|
||||
@class wysihtml5
|
||||
@extends abstractinput
|
||||
@final
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user