一款简洁表格功能齐全的富文本编辑器,表格编辑有比较强大的功能,支持获取html,设置只读功能
npm install tinymce --save
npm install @packy-tang/vue-tinymce
<script src = "/static/tinymce/tinymce.min.js" > < /script>
新建tinymce.vue文件
<template>
<div>
<div v-html="content"></div>
<el-button @click="handleClick">click</el-button>
<!-- App -->
<div>
<vue-tinymce v-model="content" :setup="setup" :setting="setting" />
</div>
</div>
</template>
<script>
export default {
data() {
return {
content: '<table style="border-collapse: collapse; width: 100%;height:35px;" border="1"><tbody><tr><td>this is p1</td><td>this is p2</td></tr></tbody></table>',
setting: {
readonly: false,
menubar: false,
toolbar:
"undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |",
toolbar_drawer: "sliding",
quickbars_selection_toolbar:
"removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor",
plugins: "link image media table lists fullscreen quickbars",
language_url: "/static/tinymce/langs/zh_CN.js", // 语言包的路径
language: "zh_CN",
height: 350
}
};
},
methods: {
handleClick() {
console.log(this.content);
},
setup(editor) {
console.log(editor);
}
}
};
</script>
效果图