PomTextEditor

PomTextEditor is a Vue 3 component library that provides a customizable and lightweight text editor for your Vue applications.

Installation

To install PomTextEditor, use either npm or yarn:

npm

bash

Copy code

npm install pom-text-editor

yarn

bash

Copy code

yarn add pom-text-editor

Usage

Global Registration

To use the editor globally in your Vue 3 application, register it in your main file (e.g., main.js or main.ts).

js Copy code

import { createApp } from 'vue';

import App from './App.vue';

import Editor from 'pom-text-editor'; // Correct import path

import 'pom-text-editor/dist/style.css'; Optional: Update based on actual location


const app = createApp(App);

app.component('Editor', Editor); // Register the component globally

app.mount('#app');

Component Usage

After registering, you can use the Editor component in any Vue component.

Copy code
<template>

<Editor @change="resultData" />

</template>

<script  setup>
function  resultData(val)  {
console.log(val,  'Your HTML content');
}
</script>

Text-Only Output

For plain text output without any HTML tags, use the TextOnly attribute.

Copy code
<template>
<Editor  TextOnly="true" @change="resultData" />
</template>

Customizing the Toolbar

You can customize the editor toolbar using slots.

Copy code

<template>
<Editor maxHeight="40vh" @change="resultData">
<template  v-slot:toolbar-after>
<div  class="custom-toolbar-btn">12</div>
<div  class="custom-toolbar-btn">14</div>
</template>

<template v-slot:toolheader-before>
<component @click="alert('Hello 5')" class="custom-header-btn">Hello5</component>
<component @click="alert('Hello 6')" class="custom-header-btn">Hello6</component>
</template>
</Editor>
</template>

<script  setup>
function  resultData(val)  {
console.log(val,  'Your HTML content');
}
function  alert(message)  {
console.log(message);
}
</script>

CSS

The CSS for PomTextEditor is included within the JavaScript bundle, so no separate import is required. To customize styles, you can add additional styles to your main stylesheet or use scoped styles in your components.

Documentation

Full documentation and customization options will be available soon.

Contributing

We welcome contributions! To contribute:

Fork the repository.

Create a feature branch: git checkout -b feature/your-feature.

Commit your changes: git commit -m 'Add new feature'.

Push to the branch: git push origin feature/your-feature.

Open a Pull Request.

Contributors

[email protected] – Lead Project Maintainer

[email protected] – Project Maintainer

License

PomTextEditor is licensed under the MIT License. See the LICENSE file for more details.

Contact

For any questions or suggestions, feel free to reach out at [email protected].