Comments (1)
New version time, This brings in being able to add a class / style dynamically to the content area (min-height etc)
EditorComponent.vue
<template>
<div ref="editor" class="editor-area"></div>
</template>
<script setup>
import {
ref,
computed,
reactive,
onMounted,
watch
} from "vue";
import pell from "pell";
const props = defineProps([
"modelValue",
"style",
"class"
]);
const emits = defineEmits(["update:modelValue"]);
const editor = ref(null);
let last_value = null;
const content = computed({
get() {
return props.modelValue;
},
set(value) {
emits("update:modelValue", value);
last_value = value;
}
});
const classes = {
actionbar: "editor-nav",
button: "editor-btn btn",
content: "editor-content form-control",
selected: "editor-btn-selected"
};
onMounted(() => {
editor.value = pell.init({
element: editor.value,
onChange: html => {
content.value = html;
},
actions: [
"bold",
"italic",
"underline",
"strikethrough",
// "heading1",
// "heading2",
// "paragraph",
// "quote",
"olist",
"ulist",
// "code",
"line",
],
classes: Object.assign({}, classes, {content: classes.content + " " + props.class})
});
editor.value.content.innerHTML = content.value;
last_value = content.value;
});
watch(content, (to) => {
if (to != last_value) {
editor.value.content.innerHTML = to;
}
});
const styles = ref(props.style);
const watch_classes = computed(() => props.class);
watch(watch_classes, (to) => {
editor.value.getElementsByClassName("editor-content")[0].className = classes.content + " " + to;
});
const watch_styles = computed(() => props.style);
watch(watch_styles, (to) => {
editor.value.getElementsByClassName("editor-content")[0].style.cssText = to;
});
</script>
usage
<EditorComponent v-model="content" :class="classes" :style="styles"></EditorComponent>
<button @click.prevent="classes = `bg-warning`">Set class .bg-warning</button>
<button @click.prevent="classes = `bg-danger`">Set class .bg-danger</button>
<button @click.prevent="styles = `min-height:600px;`">Set style min-height to 600</button>
<button @click.prevent="styles = `min-height:300px; background:purple;`">Set style min-height to 300 and background to purple</button>
<button @click.prevent="styles=null; classes=null">Reset </button>
...
const classes = ref(null);
const styles = ref(null);
from pell.
Related Issues (20)
- is find and replace possible? HOT 1
- Insert table command HOT 3
- Cursor Control? HOT 3
- Hi ! There's way to get div id on onChange event ? HOT 1
- Initial value? HOT 1
- Text copied with format may break the text editbor behaviour
- How to bring Pell actionbar at the bottom of editor HOT 1
- a isssue when input Chinese language HOT 2
- How to add color picker to the editor? HOT 2
- How do I set default content inside .pell-content ? HOT 3
- Can't delete custom elements HOT 3
- Can user edit previously stored content in WYSIWYG mode? SOLVED HOT 1
- Suggestion: allow the custom action icon to be a function HOT 1
- Does it support attachting base64 image ? HOT 7
- Initialization fails on hidden DIV HOT 1
- Insert HTML code into editor?
- BUG: Third party input method initial letter malposition
- Suggestion: different states for the buttons
- Is this project abandoned? HOT 11
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pell.