PomTextEditor

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

Installation

To use PomTextEditor in your project, install it via npm or yarn.

Using np

npm install pom-text-editor
Using yarn
bash
Copy code
yarn add pom-text-editor
Usage
Global Registration
To use the Editor component globally in your Vue 3 application, register it in your main application file (e.g., main.js or main.ts).

main.js

js Copy code import { createApp } from 'vue'; import App from './App.vue'; import Editor from 'pom-text-editor'; // Correct import path

const app = createApp(App);
app.component('Editor', Editor); // Register the component globally
app.mount('#app');
Using in a Component
Once registered, you can use the Editor component in any of your Vue components.

OtherComponent.vue vue Copy code <Editor @change="resultData" />

add ToolBar

<template>
  <Editor @change="resultData" >
    <template v-slot:toolbar-after>
      <div   class="hover:bg-gray-200 bg-gray-50 hover:text-gray-700 elemeSet items-center text-center justify-baseline rounded cursor-pointer text-md p-1">12</div>
      <div   class="hover:bg-gray-200 bg-gray-50 hover:text-gray-700 elemeSet items-center text-center justify-baseline rounded cursor-pointer text-md p-1">12</div>
    </template>
     <template  v-slot:toolheader-after>
    <componet @click='3' class='hover:bg-gray-200 bg-gray-50 hover:text-gray-700 elemeSet items-center text-center justify-baseline rounded cursor-pointer text-md p-0 m-1'>Helo5</componet>
    <componet @click='3' class='hover:bg-gray-200 bg-gray-50 hover:text-gray-700 elemeSet items-center text-center justify-baseline rounded cursor-pointer text-md p-0 m-1'>Helo6</componet>
   </template>
  </Editor>
</template>

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

CSS The CSS for PomTextEditor is included directly within the JavaScript bundle. You don’t need to import a separate CSS file for the component to work. However, if you want to customize the styles, you can include additional styles in your main application stylesheet or scoped styles in your components.

Documentation
For more detailed information and customization options, please refer to the documentation (Coming soon).

Contributing We welcome contributions! If you would like to contribute, please follow these steps:

Fork the repository.
Create a feature branch (git checkout -b feature/your-feature).
Commit your changes (git commit -am 'Add new feature').
Push to the branch (git push origin feature/your-feature).
Create a Pull Request.

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

Contact
If you have any questions, suggestions, or need support, feel free to reach out to us at [email protected].

Contributing We welcome contributions to PomTextEditor! To contribute:

Fork the repository. Create a new 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

SSENGENDO NAZIL – Lead Project maintainer

• [email protected] – Project maintainer