@ckeditor/ckeditor5-vue
Version:
Official Vue.js 3+ component for CKEditor 5 – the best browser-based rich text editor.
233 lines (232 loc) • 8.61 kB
JavaScript
(function(global, factory) {
typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue"), require("lodash-es"), require("@ckeditor/ckeditor5-integrations-common")) : typeof define === "function" && define.amd ? define(["exports", "vue", "lodash-es", "@ckeditor/ckeditor5-integrations-common"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.CKEDITOR_VUE = {}, global.Vue, global._, global.CKEDITOR_INTEGRATIONS_COMMON));
})(this, function(exports2, Vue, lodashEs, ckeditor5IntegrationsCommon) {
"use strict";
function _interopNamespaceDefault(e) {
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
if (e) {
for (const k in e) {
if (k !== "default") {
const d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: () => e[k]
});
}
}
}
n.default = e;
return Object.freeze(n);
}
const Vue__namespace = /* @__PURE__ */ _interopNamespaceDefault(Vue);
/**
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md.
*/
const VueIntegrationUsageDataPlugin = ckeditor5IntegrationsCommon.createIntegrationUsageDataPlugin(
"vue",
{
version: "7.3.0",
frameworkVersion: Vue.version
}
);
/**
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md.
*/
function appendAllIntegrationPluginsToConfig(editorConfig) {
if (ckeditor5IntegrationsCommon.isCKEditorFreeLicense(editorConfig.licenseKey)) {
return editorConfig;
}
return ckeditor5IntegrationsCommon.appendExtraPluginsToEditorConfig(editorConfig, [
/**
* This part of the code is not executed in open-source implementations using a GPL key.
* It only runs when a specific license key is provided. If you are uncertain whether
* this applies to your installation, please contact our support team.
*/
VueIntegrationUsageDataPlugin
]);
}
const VUE_INTEGRATION_READ_ONLY_LOCK_ID = "Lock from Vue integration (@ckeditor/ckeditor5-vue)";
const INPUT_EVENT_DEBOUNCE_WAIT = 300;
const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
...{
name: "CKEditor"
},
__name: "ckeditor",
props: /* @__PURE__ */ Vue.mergeModels({
editor: {},
config: { default: () => ({}) },
tagName: { default: "div" },
disabled: { type: Boolean, default: false },
disableTwoWayDataBinding: { type: Boolean, default: false }
}, {
"modelValue": { type: String, default: "" },
"modelModifiers": {}
}),
emits: /* @__PURE__ */ Vue.mergeModels(["ready", "destroy", "blur", "focus", "input", "update:modelValue"], ["update:modelValue"]),
setup(__props, { expose: __expose, emit: __emit }) {
const model = Vue.useModel(__props, "modelValue");
const props = __props;
const emit = __emit;
const element = Vue.ref();
const instance = Vue.ref();
const lastEditorData = Vue.ref();
__expose({
instance,
lastEditorData
});
Vue.watch(model, (newModel) => {
if (instance.value && newModel !== lastEditorData.value) {
instance.value.data.set(newModel);
}
});
Vue.watch(() => props.disabled, (readOnlyMode) => {
if (readOnlyMode) {
instance.value.enableReadOnlyMode(VUE_INTEGRATION_READ_ONLY_LOCK_ID);
} else {
instance.value.disableReadOnlyMode(VUE_INTEGRATION_READ_ONLY_LOCK_ID);
}
});
function checkVersion() {
const version = window.CKEDITOR_VERSION;
if (!version) {
return console.warn('Cannot find the "CKEDITOR_VERSION" in the "window" scope.');
}
const [major] = version.split(".").map(Number);
if (major >= 42 || version.startsWith("0.0.0")) {
return;
}
console.warn("The <CKEditor> component requires using CKEditor 5 in version 42+ or nightly build.");
}
function setUpEditorEvents(editor) {
const emitDebouncedInputEvent = lodashEs.debounce((evt) => {
if (props.disableTwoWayDataBinding) {
return;
}
const data = lastEditorData.value = editor.data.get();
emit("update:modelValue", data, evt, editor);
emit("input", data, evt, editor);
}, INPUT_EVENT_DEBOUNCE_WAIT, { leading: true });
editor.model.document.on("change:data", emitDebouncedInputEvent);
editor.editing.view.document.on("focus", (evt) => {
emit("focus", evt, editor);
});
editor.editing.view.document.on("blur", (evt) => {
emit("blur", evt, editor);
});
}
checkVersion();
Vue.onMounted(() => {
const editorConfig = appendAllIntegrationPluginsToConfig(
Object.assign({}, props.config)
);
if (model.value) {
editorConfig.initialData = model.value;
}
props.editor.create(element.value, editorConfig).then((editor) => {
instance.value = Vue.markRaw(editor);
setUpEditorEvents(editor);
if (model.value !== editorConfig.initialData) {
editor.data.set(model.value);
}
if (props.disabled) {
editor.enableReadOnlyMode(VUE_INTEGRATION_READ_ONLY_LOCK_ID);
}
emit("ready", editor);
}).catch((error) => {
console.error(error);
});
});
Vue.onBeforeUnmount(() => {
if (instance.value) {
instance.value.destroy();
instance.value = void 0;
}
emit("destroy");
});
return (_ctx, _cache) => {
return Vue.openBlock(), Vue.createBlock(Vue.resolveDynamicComponent(_ctx.tagName), {
ref_key: "element",
ref: element
}, null, 512);
};
}
});
/**
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md.
*/
const useAsync = (asyncFunc) => {
const lastQueryUUID = Vue.ref(null);
const error = Vue.ref(null);
const data = Vue.ref(null);
const loading = Vue.computed(() => lastQueryUUID.value !== null);
Vue.watchEffect(async () => {
const currentQueryUID = ckeditor5IntegrationsCommon.uid();
lastQueryUUID.value = currentQueryUID;
data.value = null;
error.value = null;
const shouldDiscardQuery = () => lastQueryUUID.value !== currentQueryUID;
try {
const result = await asyncFunc();
if (!shouldDiscardQuery()) {
data.value = result;
}
} catch (err) {
if (!shouldDiscardQuery()) {
error.value = err;
}
} finally {
if (!shouldDiscardQuery()) {
lastQueryUUID.value = null;
}
}
});
return {
loading: Vue.shallowReadonly(loading),
data: Vue.shallowReadonly(data),
error: Vue.shallowReadonly(error)
};
};
/**
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md.
*/
function useCKEditorCloud(config) {
return useAsync(
() => ckeditor5IntegrationsCommon.loadCKEditorCloud(
Vue.toValue(config)
)
);
}
/**
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md.
*/
/* istanbul ignore if -- @preserve */
if (!Vue__namespace.version || !Vue__namespace.version.startsWith("3.")) {
throw new Error(
"The CKEditor plugin works only with Vue 3+. For more information, please refer to https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs-v3.html"
);
}
const CkeditorPlugin = {
/**
* Installs the plugin, registering the `<ckeditor>` component.
*
* @param app The application instance.
*/
install(app) {
app.component("Ckeditor", _sfc_main);
}
};
Object.defineProperty(exports2, "loadCKEditorCloud", {
enumerable: true,
get: () => ckeditor5IntegrationsCommon.loadCKEditorCloud
});
exports2.Ckeditor = _sfc_main;
exports2.CkeditorPlugin = CkeditorPlugin;
exports2.useCKEditorCloud = useCKEditorCloud;
Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
});
//# sourceMappingURL=ckeditor.umd.cjs.map