diff --git a/css/form.css b/css/form.css index cb4d0c7f..2ce86e22 100644 --- a/css/form.css +++ b/css/form.css @@ -1107,6 +1107,12 @@ input[type='time']::-webkit-clear-button { background-position: center; } +.rte-autocomplete.dropdown-menu li a { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + @media screen and (min-width: 640px) { .row > div.multiple-images-item { width: calc(33.33% - 7.5px); diff --git a/js/components/wysiwyg.js b/js/components/wysiwyg.js index 265ef246..ba4ecd5f 100644 --- a/js/components/wysiwyg.js +++ b/js/components/wysiwyg.js @@ -27,6 +27,15 @@ Fliplet.FormBuilder.field('wysiwyg', { computed: { isInterface: function() { return Fliplet.Env.get('interface'); + }, + isInteract: function() { + return Fliplet.Env.get('interact'); + }, + widgetId: function() { + return parseInt(Fliplet.Widget.getDefaultId(), 10); + }, + widgetUuid: function() { + return Fliplet.Widget.getUUID(this.widgetId); } }, watch: { @@ -132,46 +141,71 @@ Fliplet.FormBuilder.field('wysiwyg', { var config = { target: this.$refs.textarea, - theme: 'modern', readonly: this.readonly, - mobile: { - theme: this.readonly - ? 'silver' - : 'mobile', - plugins: [ 'autosave', 'lists', 'autolink' ], - toolbar: [ 'bold', 'italic', 'underline', 'bullist', 'numlist', 'removeformat' ] + height: lineHeight * this.rows, + menubar: false, + formats: { + removeformat: [ + // Remove block containers + { + selector: 'div,main,article,aside,header,footer', + remove: 'all', + split: false, + expand: false, + block_expand: true, + deep: true + }, + // Remove inline containers + { + selector: 'b,strong,em,i,font,u,strike,sub,sup,dfn,code,samp,kbd,var,cite,mark,q,del,ins,span', + remove: 'all', + split: true, + expand: false, + deep: true + }, + // Remove attributes + { + selector: '*', + attributes: ['style', 'class', 'id'], + split: false, + expand: false, + deep: true + } + ] }, - plugins: [ - 'advlist autolink lists link directionality', - 'autoresize fullscreen code paste' - ].join(' '), - toolbar: this.readonly + plugins: $vm.isInterface ? false - : [ - 'bold italic underline', - 'alignleft aligncenter alignright alignjustify | bullist numlist outdent indent', - 'ltr rtl | link | removeformat code fullscreen' - ].join(' | '), - image_advtab: true, - menubar: false, + : ['advlist autolink lists link searchreplace print directionality', + 'table paste pasteplaintext code'], statusbar: false, + toolbar: this.readonly || $vm.isInterface + ? ['bold italic underline alignleft aligncenter alignright alignjustify'].join(' | ') + : ['bold italic underline | alignleft aligncenter alignright alignjustify', + 'bullist numlist outdent indent | ltr rtl', + 'link | pasteplaintext removeformat | code | formatselect'].join(' | '), + mobile: { + toolbar_mode: 'sliding', + plugins: 'mention' + }, + paste_preprocess: function(plugin, args) { + // Clean up content before pasting + args.content = args.content + .replace(/ contenteditable="(true|false)"/g, ''); + }, // Prevent URLs from being altered // https://stackoverflow.com/questions/3796942 relative_urls: false, remove_script_host: false, - convert_urls: true, - inline: false, - resize: false, - autoresize_bottom_margin: 0, - autoresize_max_height: lineHeight * this.rows, - autoresize_min_height: lineHeight * this.rows, - autofocus: false, + convert_urls: false, branding: false, setup: function(editor) { $vm.editor = editor; editor.on('init', function() { - $vm.addPlaceholder(); + if ($vm.isInterface) { + $vm.addPlaceholder(); + } + $vm.addBulletedListShortcutsWindows(); if ($vm.defaultValueSource !== 'default') { @@ -218,10 +252,14 @@ Fliplet.FormBuilder.field('wysiwyg', { // Allow custom code to register hooks before this runs Fliplet().then(function() { Fliplet.Hooks.run('beforeRichFieldInitialize', { - field: this, - config: config + field: $vm, + config: config, + id: $vm.widgetId, + uuid: $vm.widgetUuid }).then(function() { - tinymce.init(config); + if (tinymce && !$vm.isInteract) { + tinymce.init(config); + } }); }); diff --git a/js/libs/builder.js b/js/libs/builder.js index 6d8e99ac..6fb5071b 100644 --- a/js/libs/builder.js +++ b/js/libs/builder.js @@ -799,7 +799,6 @@ new Vue({ } }); }, - // Converts @event attributes to v-on:event convertVueEventAttributes: function(html) { var $html = $('
').append(html); @@ -874,8 +873,8 @@ new Vue({ if (value === 'settings') { $vm.setupCodeEditor(); changeSelectText(); - } else { - tinymce.remove(); + } else if ($vm.$refs.resulthtml) { + $($vm.$refs.resulthtml).tinymce().remove(); } }, 'settings.dataStore': function(value) { @@ -983,29 +982,6 @@ new Vue({ $(selector).removeClass('is-loading'); } - $($vm.$refs.templateDescription).tinymce({ - plugins: [ - 'lists advlist image charmap hr code', - 'searchreplace wordcount insertdatetime table textcolor colorpicker' - ], - toolbar: [ - 'formatselect |', - 'bold italic underline strikethrough |', - 'forecolor backcolor |', - 'alignleft aligncenter alignright alignjustify | bullist numlist outdent indent |', - 'blockquote subscript superscript | table insertdatetime charmap hr |', - 'removeformat | code' - ].join(' '), - menubar: false, - statusbar: false, - min_height: 300, - setup: function(ed) { - $vm.editor = ed; - $vm.editor.on('keyup paste', function() { - $vm.settings.description = $vm.editor.getContent(); - }); - } - }); if ($vm.chooseTemplate && $vm.$refs.templateGallery) { setTimeout(function() { diff --git a/vendor/tinymce/icons/default/icons.min.js b/vendor/tinymce/icons/default/icons.min.js new file mode 100644 index 00000000..83f36d2b --- /dev/null +++ b/vendor/tinymce/icons/default/icons.min.js @@ -0,0 +1 @@ +if(tinymce && tinymce.IconManager){tinymce.IconManager.add("default",{icons:{"accessibility-check":'',"action-next":'',"action-prev":'',"align-center":'',"align-justify":'',"align-left":'',"align-none":'',"align-right":'',"arrow-left":'',"arrow-right":'',bold:'',bookmark:'',"border-width":'',brightness:'',browse:'',cancel:'',"change-case":'',"character-count":'',"checklist-rtl":'',checklist:'',checkmark:'',"chevron-down":'',"chevron-left":'',"chevron-right":'',"chevron-up":'',close:'',"code-sample":'',"color-levels":'',"color-picker":'',"color-swatch-remove-color":'',"color-swatch":'',"comment-add":'',comment:'',contrast:'',copy:'',crop:'',"cut-column":'',"cut-row":'',cut:'',"document-properties":'',drag:'',"duplicate-column":'',"duplicate-row":'',duplicate:'',"edit-block":'',"edit-image":'',"embed-page":'',embed:'',emoji:'',"export":'',fill:'',"flip-horizontally":'',"flip-vertically":'',"format-painter":'',format:'',fullscreen:'',gallery:'',gamma:'',help:'',"highlight-bg-color":'',home:'',"horizontal-rule":'',"image-options":'',image:'',indent:'',info:'',"insert-character":'',"insert-time":'',invert:'',italic:'',"line-height":'',line:'',link:'',"list-bull-circle":'',"list-bull-default":'',"list-bull-square":'',"list-num-default-rtl":'',"list-num-default":'',"list-num-lower-alpha-rtl":'',"list-num-lower-alpha":'',"list-num-lower-greek-rtl":'',"list-num-lower-greek":'',"list-num-lower-roman-rtl":'',"list-num-lower-roman":'',"list-num-upper-alpha-rtl":'',"list-num-upper-alpha":'',"list-num-upper-roman-rtl":'',"list-num-upper-roman":'',lock:'',ltr:'',"more-drawer":'',"new-document":'',"new-tab":'',"non-breaking":'',notice:'',"ordered-list-rtl":'',"ordered-list":'',orientation:'',outdent:'',"page-break":'',paragraph:'',"paste-column-after":'',"paste-column-before":'',"paste-row-after":'',"paste-row-before":'',"paste-text":'',paste:'',"permanent-pen":'',plus:'',preferences:'',preview:'',print:'',quote:'',redo:'',reload:'',"remove-formatting":'',remove:'',"resize-handle":'',resize:'',"restore-draft":'',"rotate-left":'',"rotate-right":'',rtl:'',save:'',search:'',"select-all":'',selected:'',settings:'',sharpen:'',sourcecode:'',"spell-check":'',"strike-through":'',subscript:'',superscript:'',"table-cell-properties":'',"table-cell-select-all":'',"table-cell-select-inner":'',"table-delete-column":'',"table-delete-row":'',"table-delete-table":'',"table-insert-column-after":'',"table-insert-column-before":'',"table-insert-row-above":'',"table-insert-row-after":'',"table-left-header":'',"table-merge-cells":'',"table-row-properties":'',"table-split-cells":'',"table-top-header":'',table:'',template:'',"temporary-placeholder":'',"text-color":'',toc:'',translate:'',underline:'',undo:'',unlink:'',unlock:'',"unordered-list":'',unselected:'',upload:'',user:'',visualblocks:'',visualchars:'',warning:'',"zoom-in":'',"zoom-out":''}});} \ No newline at end of file diff --git a/vendor/tinymce/plugins/mention/plugin.js b/vendor/tinymce/plugins/mention/plugin.js new file mode 100644 index 00000000..96de8486 --- /dev/null +++ b/vendor/tinymce/plugins/mention/plugin.js @@ -0,0 +1,421 @@ +/*global tinymce, module, require, define, global, self */ + +; (function (f) { + 'use strict'; + + // CommonJS + if (typeof exports === 'object' && typeof module !== 'undefined') { + module.exports = f(require('jquery')); + + // RequireJS + } else if (typeof define === 'function' && define.amd) { + define(['jquery'], f); + + //