aloha-vue 1.2.64 → 1.2.65

package/package.json

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

package/src/plugins/ATinymcePlugin.js

@@ -0,0 +1,20 @@
+import {
+  ref,
+} from "vue";
+
+export const tinymcePluginOptions = ref({
+  propsDefault: {
+    validElements: "a[href|target=_blank],strong/b,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

@@ -15,6 +15,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,6 +30,11 @@ export default {
       required: false,
       default: true,
     },
+    contentCustomStyle: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
     contentLangs: {
       type: Array,
       required: false,
@@ -96,6 +105,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", () => {