vue3中使用富文本编辑器tinymce
时间:2021-07-11
本文章向大家介绍vue3中使用富文本编辑器tinymce,主要包括vue3中使用富文本编辑器tinymce使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
下载安装
npm i tinymce @tinymce/tinymce-vue -S
准备工作
在node_modules
中找到文件夹tinymce/skins
,将它复制到项目目录中(新建一个存放该文件的目录static
);
然后去官网下载中文包zh_CN.js
,并保存到目录static/langs
中。
组件引用
在vue组件中引用tinymce
<template>
<div>
<editor v-model="content" :init="init"/>
</div>
</template>
<script>
import { ref, watch, onMouted } from 'vue'
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'; // 引用主题文件
import 'tinymce/icons/default'; // 引用图标文件
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
export default {
components: {
'editor': Editor
},
setup() {
const content = ref('');
const init = {
language_url: require("./static/langs/zh_CN.js"), // 中文语言包路径
language: "zh_CN",
skin_url: require("./static/skins/ui/oxide/skin.css"), // 编辑器皮肤样式
menubar: false, // 隐藏菜单栏
height: 320,
toolbar_mode: "none",
plugins: 'image link code table lists', // 插件需要import进来
toolbar: 'fontselect fontsizeselect | link lineheight forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | image quicklink h2 h3 blockquote table numlist bullist preview fullscreen',
content_style: "p {margin: 5px 0; font-size: 14px}",
fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
font_formats: "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
branding: false,
elementpath: false,
resize: false, // 禁止改变大小
statusbar: false, // 隐藏底部状态栏
};
// 监听编辑器内容变化,自定义处理内容
watch(() => content.value, (value) => {
// TODO
})
onMounted(() => {
tinymce.init(); // 初始化
})
return {
content,
init,
}
}
}
</script>
原文地址:https://www.cnblogs.com/roddy/p/14987923.html
- c++ 指针(二)
- HBase的安装部署
- 查询bucket已用量脚本-python
- SQL Server 2005单元级加密和SQL Server 2008 透明数据加密
- 重磅:如何玩转kylin
- 体验SQL Server 2008 Express
- oracle、mysql 分页查询比较
- RGW性能监控及源码实现
- JSP中文乱码的产生原因及解决方案
- 比较Swing中三种注册事件的方法
- Kafka单节点至集群的安装部署及注意事项
- JavaScript onchange 事件:表单文本域或选择域发生改变
- 利用反射比较两个对象字段值是否相等
- 更新Silverlight ctp到Silverlight beta 1.0
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 吐血整理--史上最全排序算法Python实现
- 2020数据库最新面试题常考汇总
- [剑指Offer]面试题25: 合并两个排序的链表
- 环形链表
- 二十年前做科研你只需要检测一些基因在一些癌症细胞系表达量情况即可
- [剑指Offfer]面试题22: 链表中倒数第k个节点
- Django开发快速入门
- 三阴性乳腺癌表达数据分析笔记之PAM50
- Celery入门
- TO-do api
- 炫酷,Spring Boot + ECharts 实现用户访问地图可视化(附源码)
- 互联网大厂常考算法及套路深度解析
- 2020--Python语法常考知识点
- 为什么你画的Seurat包PCA图与别人的方向不一致?
- 用Python程序模拟300位观众,为5位嘉宾随机投票,最后按照降序排列结果