renderings
process
- Install the corresponding dependencies (preferably specify the version)
npm install [email protected] -S
npm install @tinymce/[email protected] -S
Different versions of the installation dependencies may cause strange problems! ! !
- Create a new [ tinymce ] folder under the public directory of the project . The overall directory structure is as follows
- Go to the tinymce official website to download the Chinese package https://www.tiny.cloud/get-tiny/language-packages/
Copy the decompressed folder [ langs ] to the newly created [ tinymce ] folder directory - Find the [skins] folder under the [tinymce] folder in the [node_modules] directory under the project, and copy it to the newly created [tinymce] folder directory.
- Create a Tinymce folder under the components directory, and create the following files.
- The code in the Tinymce.vue file is as follows:
<template>
<div>
<Editor id="tinymce" v-model="tinymceHtml" :init="editorInit"></Editor>
</div>
</template>
<script>
import Editor from "@tinymce/tinymce-vue";
import tinymce from "tinymce/tinymce";
import "tinymce/themes/silver/theme";
import axios from "axios";
// 引入编辑器插件(基本免费插件都在这儿了)
import "tinymce/plugins/advlist"; //高级列表
import "tinymce/plugins/anchor"; //锚点
import "tinymce/plugins/autolink"; //自动链接
import "tinymce/plugins/autosave"; //自动存稿
import "tinymce/plugins/charmap"; //特殊字符
import "tinymce/plugins/code"; //编辑源码
import "tinymce/plugins/codesample"; //代码示例
import "tinymce/plugins/directionality"; //文字方向
import "tinymce/plugins/emoticons"; //表情
import "tinymce/plugins/fullscreen"; //全屏
import "tinymce/plugins/help"; //帮助
import "tinymce/plugins/hr"; //水平分割线
import "tinymce/plugins/insertdatetime"; //插入日期时间
import "tinymce/plugins/link"; //超链接
import "tinymce/plugins/lists"; //列表插件
import "tinymce/plugins/media"; //插入编辑媒体
import "tinymce/plugins/image"; // 插入图片
import "tinymce/plugins/nonbreaking"; //插入不间断空格
import "tinymce/plugins/pagebreak"; //插入分页符
import "tinymce/plugins/paste"; //粘贴插件
import "tinymce/plugins/preview"; //预览
import "tinymce/plugins/print"; //打印
import "tinymce/plugins/save"; //保存
import "tinymce/plugins/searchreplace"; //查找替换
import "tinymce/plugins/table"; //表格
import "tinymce/plugins/template"; //内容模板
import "tinymce/plugins/textcolor"; //文字颜色
import "tinymce/plugins/textpattern"; //快速排版
import "tinymce/plugins/visualblocks"; //显示元素范围
import "tinymce/plugins/visualchars"; //显示不可见字符
import "tinymce/plugins/wordcount"; //字数统计
// import "tinymce/icons/default/icons";
// import "tinymce/plugins/toc"; //目录生成器
// import "tinymce/plugins/importcss"; //引入css
// import "tinymce/plugins/fullpage"; //文档属性
// import "tinymce/plugins/quickbars"; //快速工具栏
// import 'tinymce/plugins/spellchecker' //拼写检查,未加入汉化,不建议使用
// import "tinymce/plugins/tabfocus"; //切入切出,按tab键切出编辑器,切入页面其他输入框中
// import "tinymce/plugins/autoresize"; //编辑器高度自适应,注:plugins里引入此插件时,Init里设置的height将失效
import plugins from "./plugins";
import toolbar from "./toolbar";
import {
fontsize_formats, font_formats, line_height } from "./fontstyle";
export default {
name: "TinymceDemo",
components: {
Editor },
props: {
htmlStr: {
type: String,
default: "",
},
},
data() {
return {
tinymceHtml: this.htmlStr,
editorInit: {
language_url: "tinymce/langs/zh_CN.js", //你下载的语言包的路径
language: "zh_CN",
skin_url: "tinymce/skins/ui/oxide", //主题
height: 700,
max_height: 700,
menubar: false, //隐藏默认菜单栏
branding: false, //隐藏右下角商标
plugins,
toolbar,
fontsize_formats,
font_formats,
toolbar_sticky: true,
autosave_ask_before_unload: false,
style_formats_merge: true, //设置行高
style_formats_autohide: true, //设置行高
style_formats: [{
title: "Line Height",
items: line_height,
}],
// forced_root_block : 'div', 默认是段落(p)
images_upload_handler: (blobInfo, success, failure) => {
console.log(blobInfo.blob().size / 1024 / 1024);
if (blobInfo.blob().size / 1024 / 1024 > 20) {
failure("上传失败,图片大小请控制在 20M 以内");
} else {
let formData = new FormData();
formData.append("file", blobInfo.blob());
// 上传图片的接口
axios
.post("/api/upload/image", formData)
.then((res) => {
success(res.data.url);
})
.catch(() => {
failure("上传出错,服务器开小差了呢");
});
}
},
file_picker_callback: (callback, value, meta) => {
if (meta.filetype === "media") {
// 动态创建上传input,并进行模拟点击上传操作,达到本地上传视频效果。
let input = document.createElement("input"); //创建一个隐藏的input
input.setAttribute("type", "file");
input.setAttribute("accept", ".mp4");
input.onchange = function () {
let file = this.files[0];
let formData = new FormData();
formData.append("file", file);
// 上传视频接口
axios
.post("/api/upload/video", formData)
.then((res) => {
console.log(res.data.url);
callback(res.data.url);
})
.catch(() => {
console.log("上传出错,服务器开小差了呢");
});
};
//触发点击
input.click();
}
},
},
};
},
watch: {
htmlStr(newValue) {
this.tinymceHtml = newValue;
},
tinymceHtml(newValue) {
this.$emit("handleChangeHtml", newValue);
},
},
mounted() {
},
methods: {
},
};
</script>
<style scoped>
.editor-content {
margin-top: 20px;
}
</style>
- The code in the fontstyles.js file is as follows:
module.exports = {
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;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;知乎配置=BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;小米配置=Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif",
line_height: [
{
title: "1", block: "p", styles: {
"line-height": "1.0" } },
{
title: "1.5", block: "p", styles: {
"line-height": "1.5" } },
{
title: "1.75", block: "p", styles: {
"line-height": "1.75" } },
{
title: "2", block: "p", styles: {
"line-height": "2" } },
{
title: "3", block: "p", styles: {
"line-height": "3" } },
{
title: "4", block: "p", styles: {
"line-height": "4" } },
{
title: "5", block: "p", styles: {
"line-height": "5" } },
],
};
- The code in the plugins.js file is as follows:
// 你想使用的任何插件都必须导入
// 详细插件列表请参阅 https://www.tinymce.com/docs/plugins/
// 自定义构建请参见 https://www.tinymce.com/download/custom-builds/
const plugins = ["preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount textpattern help autosave"] //这里所有的插件需要先引入,否则会报错
export default plugins
- The code in the toolbar.js file is as follows:
// 下面是工具栏的列表
// 详细清单见 https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
const toolbar = [
"code codesample lineheight undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify",
"| outdent indent | styleselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | table image media charmap emoticons hr pagebreak insertdatetime \
print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs",
];
export default toolbar;
use components
In the components that need to be used, just import
<template>
<tinymce
style="height: auto; border-radius: 22px"
@handleChangeHtml="handleChangeHtml"
></tinymce>
</template>
<script>
import tinymce from "../components/Tinymce/Tinymce";
export default {
components: {
tinymce },
data() {
return {
};
},
methods: {
handleChangeHtml(val) {
console.log(val);
},
},
};
</script>
The gitee warehouse address of the project: https://gitee.com/junfeng535/tinymce-rich-text