文章目錄
- tinymce簡介
- 一、安裝
-
二、使用步驟
- 1.封裝組件
- 2.組件中掛載
- 3.應(yīng)用富文本
- 總結(jié)
前言
TinyMCE是一款易用、且功能強大的所見即所得的富文本編輯器。跟其他富文本編輯器相比，有著豐富的插件，支持多種語言，能夠滿足日常的業(yè)務(wù)需求并且免費。
一、安裝Tinymce
npm install tinymce@^5.6.2
npm install @tinymce/tinymce-vue@^4.0.1注意：版本可根據(jù)自己項目的情況來進(jìn)行選擇。
二、使用步驟
1.封裝組件
代碼如下（僅展示部分代碼）：
<template>
<div class="tinymce-box">
<Editor
id="myedit"
v-model="content"
:init="init"
tag-name="div"
:disabled="disabled"
@onClick="onClick"
/>
</div>
</template>
<script>
// import api from '../api/api.js'
import Editor from "@tinymce/tinymce-vue";
import tinymce from "tinymce/tinymce";
import "tinymce/themes/silver";
import "tinymce/icons/default";
export default {
name: "TEditor",
components: {
Editor,
},
props: {
modelValue: {
type: String,
default: "",
},
disabled: {
type: Boolean,
default: false,
},
},
emits: {
"update:modelValue": null,
saveContent: "",
},
setup(props, context) {
const $post =
getCurrentInstance()?.appContext.config.globalProperties.$post;
const content = ref();
const info = reactive({
content: "",
myedit: 0,
});
tinymce.init; // 初始化
const revert_data = (content) => {
context.emit("update:modelValue", content);
};
// 添加相關(guān)的事件，可用的事件參照文檔=> https://github.com/tinymce/tinymce-vue => All available events
onMounted(() => {
// readonly();
});
return {
init,
};
},
};
</script>
2.組件中掛載
代碼如下（示例）： 文章來源：http://www.zghlxwxcb.cn/news/detail-556055.html
import Editor from "@/components/editor.vue";3.應(yīng)用富文本
<Editor id="data.id" v-model="data.content" />總結(jié)
Vue中應(yīng)用富文本編輯器，涉及到多個富文本時需要注意的是動態(tài)數(shù)據(jù)的綁定，建議封裝組件來進(jìn)行使用。tinymce整體而言插件豐富、可擴(kuò)展性強、頁面樣式可修改，感興趣的小伙伴可以自己動手嘗試一下~文章來源地址http://www.zghlxwxcb.cn/news/detail-556055.html
到了這里，關(guān)于Vue3項目中使用富文本編輯器的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
