IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> vue3 如何使用 vue3-tinymce -> 正文阅读

[JavaScript知识库]vue3 如何使用 vue3-tinymce

前言

在vue3项目中,发现了这个开箱即用的vue3-tinymce,比之前vue2使用的 tinymce@tinymce/tinymce-vue 少了繁琐的配置。

代码

1、npm 下载 vue3-tinymce

npm install vue3-tinymce -S

2、 创建个RichText.vue组件进行封装

<template>
  <div>
    <vue3-tinymce v-model="myValue" :setting="setting" />
  </div>
</template>

<script lang="ts" setup>
// 引入组件
import Vue3Tinymce from '@jsdawn/vue3-tinymce';
import { reactive, toRefs, watch } from 'vue';

const props = defineProps({
  value: {
    type: String,
    default: () => {
      return '';
    },
  },
});

const emits = defineEmits({
  input: null,
});

const { getters } = useStore();

const { myValue, setting } = toRefs(
  reactive({
    myValue: props.value,
    // editor 配置项
    setting: {
      height: 400, // editor 高度
      language_url: '/tinymce/langs/zh_CN.js',
      language: 'zh_CN',

      plugins:
        'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help  autosave autoresize',
      toolbar:
        ' fontselect fontsizeselect | forecolor backcolor bold italic underline strikethrough link | image media alignleft aligncenter alignright alignjustify  | \
         code undo redo restoredraft | cut copy paste pastetext  anchor | \
         outdent indent | styleselect formatselect  |  bullist numlist | \
         blockquote subscript superscript removeformat | table  charmap hr pagebreak insertdatetime print preview | fullscreen ',

      branding: false,
      paste_data_images: true, // 设置为“true”将允许粘贴图像,而将其设置为“false”将不允许粘贴图
      // plugin_preview_width: 375, // 预览宽度 plugin_preview_height: 668,
      content_style: `img {max-width:100%;height:auto}`,

      images_upload_handler: (blobInfo: any, success: any, failure: any) => {
        const img = 'data:image/jpeg;base64,' + blobInfo.base64();
        console.log('img', img);
        if (blobInfo.blob().size > 1000000) {
        	failure("单张图片大小不能超过1000k");
        	return;
        } else {
			success(img);
		}
      },
      ...
    },
  })
);

watch(
  () => props.value,
  (newValue) => {
    myValue.value = newValue;
  }
);

watch(
  () => myValue.value,
  (newValue) => {
    emits('input', newValue);
  }
);

</script>
<style lang="scss" scoped>
// 在使用过程中发现以上的setting下的height不生效,可以在这里深度的修改样式。
:deep(.tox-tinymce) {
  min-height: 400px;
}
</style>

3、在父组件进行调用

<template>
	<RichText :value="richValue" @input="input" />
</template>
<script lang="ts" setup>
import { ref } from "vue";
const richValue = ref('我是初始化的数据...');

const input = (emit)=>{
	richValue.value = emit;
}
</script>


中文参考文档:http://tinymce.qscoding.com/

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-06-16 21:35:35  更:2022-06-16 21:36:59 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 16:30:56-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码