aloha-vue 1.1.6 → 1.1.8

package/package.json

@@ -14,7 +14,7 @@
     "Vue.js"
   ],
   "homepage": "https://github.com/ilia-brykin/aloha/#README.md",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "author": {
     "name": "Ilia Brykin",
     "email": "brykin.ilia@gmail.com"

package/src/plugins/ATinymcePlugin.js

@@ -0,0 +1,48 @@
+import {
+  ref,
+} from "vue";
+
+export const tinymcePluginOptions = ref({
+  propsDefault: {
+    branding: true,
+    contentCustomStyle: undefined,
+    contentLangs: [
+      { title: "English", code: "en" },
+      { title: "Spanish", code: "es" },
+      { title: "French", code: "fr" },
+      { title: "Deutsch", code: "de" },
+      { title: "Portuguese", code: "pt" },
+      { title: "Chinese", code: "zh" },
+    ],
+    languageDefault: "de",
+    maxlength: undefined,
+    menu: undefined,
+    menubar: false,
+    plugins: "advlist code emoticons link lists table help",
+    promotion: false,
+    rows: undefined,
+    toolbar: [
+      { name: "Formatierung", items: ["bold", "italic", "underline"] },
+      { name: "Ausrichtung", items: ["alignleft", "aligncenter", "alignright", "alignjustify"] },
+      { name: "Liste", items: ["bullist", "numlist"] },
+      { name: "Einrücken", items: ["indent", "outdent"] },
+      { name: "Sprache", items: ["language"] },
+      { name: "Link", items: ["link", "unlink"] },
+      { name: "Historie", items: ["undo", "redo"] },
+      { name: "Hilfe", items: ["help"] },
+    ],
+    toolbarMode: "wrap",
+    validElements: "@[style],a[href|target|title],strong/b,em/i,div,br,p,span,ul,ol,li,table,thead,tbody,th,tr,td",
+  },
+});
+
+export default {
+  install: (app, {
+    propsDefault = {},
+  } = {}) => {
+    tinymcePluginOptions.value.propsDefault = {
+      ...tinymcePluginOptions.value.propsDefault,
+      ...propsDefault,
+    };
+  },
+};

package/src/ui/ATinymce/ATinymce.js

@@ -17,6 +17,10 @@ import ATinymceAPI from "./compositionAPI/ATinymceAPI";
 import UiAPI from "../compositionApi/UiAPI";
 import UiStyleHideAPI from "../compositionApi/UiStyleHideAPI";
 
+import {
+  tinymcePluginOptions,
+} from "../../plugins/ATinymcePlugin";
+
 export default {
   name: "ATinymce",
   mixins: [
@@ -26,71 +30,62 @@ export default {
     branding: {
       type: Boolean,
       required: false,
-      default: true,
+      default: () => tinymcePluginOptions.value.propsDefault.branding,
+    },
+    contentCustomStyle: {
+      type: String,
+      required: false,
+      default: () => tinymcePluginOptions.value.propsDefault.contentCustomStyle,
     },
     contentLangs: {
       type: Array,
       required: false,
-      default: () => [
-        { title: "English", code: "en" },
-        { title: "Spanish", code: "es" },
-        { title: "French", code: "fr" },
-        { title: "Deutsch", code: "de" },
-        { title: "Portuguese", code: "pt" },
-        { title: "Chinese", code: "zh" },
-      ],
+      default: () => tinymcePluginOptions.value.propsDefault.contentLangs,
     },
     languageDefault: {
       type: String,
       required: false,
-      default: "de",
+      default: () => tinymcePluginOptions.value.propsDefault.languageDefault,
     },
     maxlength: {
       type: [String, Number],
       required: false,
+      default: () => tinymcePluginOptions.value.propsDefault.maxlength,
     },
     menu: {
       type: Object,
       required: false,
-      default: undefined,
+      default: () => tinymcePluginOptions.value.propsDefault.menu,
     },
     menubar: {
       type: [String, Boolean],
       required: false,
-      default: false,
+      default: () => tinymcePluginOptions.value.propsDefault.menubar,
     },
     plugins: {
       type: String,
       required: false,
-      default: "advlist code emoticons link lists table help",
+      default: () => tinymcePluginOptions.value.propsDefault.plugins,
     },
     promotion: {
       type: Boolean,
       required: false,
-      default: false,
+      default: () => tinymcePluginOptions.value.propsDefault.promotion,
     },
     rows: {
       type: [String, Number],
       required: false,
+      default: () => tinymcePluginOptions.value.propsDefault.rows,
     },
     toolbar: {
       type: [String, Object, Array],
       required: false,
-      default: () => ([
-        { name: "Formatierung", items: ["bold", "italic", "underline"] },
-        { name: "Ausrichtung", items: ["alignleft", "aligncenter", "alignright", "alignjustify"] },
-        { name: "Liste", items: ["bullist", "numlist"] },
-        { name: "Einrücken", items: ["indent", "outdent"] },
-        { name: "Sprache", items: ["language"] },
-        { name: "Link", items: ["link", "unlink"] },
-        { name: "Historie", items: ["undo", "redo"] },
-        { name: "Hilfe", items: ["help"] },
-      ]),
+      default: () => tinymcePluginOptions.value.propsDefault.toolbar,
     },
     toolbarMode: {
       type: String,
       required: false,
-      default: "wrap",
+      default: () => tinymcePluginOptions.value.propsDefault.toolbarMode,
       validator: value => ["floating", "sliding", "scrolling", "wrap"].indexOf(value) !== -1,
     },
     type: {
@@ -98,6 +93,11 @@ export default {
       required: false,
       default: "tinymce",
     },
+    validElements: {
+      type: String,
+      required: false,
+      default: () => tinymcePluginOptions.value.propsDefault.validElements,
+    },
   },
   setup(props, context) {
     const {

package/src/ui/ATinymce/compositionAPI/ATinymceAPI.js

@@ -45,20 +45,26 @@ export default function ATinymceAPI(props, context, {
   htmlIdLocal = computed(() => ""),
 }) {
   const branding = toRef(props, "branding");
+  const contentCustomStyle = toRef(props, "contentCustomStyle");
   const contentLangs = toRef(props, "contentLangs");
   const disabled = toRef(props, "disabled");
   const languageDefault = toRef(props, "languageDefault");
   const menu = toRef(props, "menu");
   const menubar = toRef(props, "menubar");
+  const modelValue = toRef(props, "modelValue");
   const plugins = toRef(props, "plugins");
   const promotion = toRef(props, "promotion");
   const toolbar = toRef(props, "toolbar");
   const toolbarMode = toRef(props, "toolbarMode");
-  const modelValue = toRef(props, "modelValue");
+  const validElements = toRef(props, "validElements");
 
   let vueEditor = null;
   let modelValueLocal = undefined;
 
+  const contentStyle = computed(() => {
+    return `${ contentUiSkinCss.toString() }\n${ contentCss.toString() }\n${ contentCustomStyle.value ? contentCustomStyle.value : "" }`;
+  });
+
   const changeModelLocal = ({ model }) => {
     modelValueLocal = model;
     changeModel({ model });
@@ -74,7 +80,7 @@ export default function ATinymceAPI(props, context, {
       skin: false,
       content_css: false,
       entity_encoding: "raw",
-      content_style: `${ contentUiSkinCss.toString() }\n${ contentCss.toString() }`,
+      content_style: contentStyle.value,
       branding: branding.value,
       promotion: promotion.value,
       language: languageDefault.value,
@@ -82,6 +88,7 @@ export default function ATinymceAPI(props, context, {
       menu: menu.value,
       menubar: menubar.value,
       readonly: !!disabled.value,
+      valid_elements: validElements.value,
       setup: editor => {
         vueEditor = editor;
         editor.on("change input undo redo", () => {