(转)tinymce-vue使用教程

2023-10-13 22:20
文章标签 使用 教程 vue tinymce

本文主要是介绍(转)tinymce-vue使用教程，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、资源下载

npm install tinymce -S  //当前版本^5.1.1
npm install @tinymce/tinymce-vue -S  //当前版本^3.0.1

二、安装语言包

  • 资源下载后,在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 static 目录下,(PS: 如果是使用 vue-cli 3.x 构建的 typescript 项目，就放到 public 目录下，文中所有 static 目录相关都这样处理)
    tinymce 默认是英文界面，所以还需要下载一个中文语言包
    然后将这个语言包放到 static 目录下，为了结构清晰，包了一层 tinymce 目录

 language.png

三、初始化

import tinymce from "tinymce";
import Editor from "@tinymce/tinymce-vue";
import 'tinymce/themes/modern/theme'
//如果报错找不到  import 'tinymce/themes/modern/theme',可以替换成 import 'tinymce/themes/silver/theme'
//不过一般都会报错,说找不到的....
  • tingmce-vue 是一个组件,需要在components中注册,然后再使用
components: {Editor},

<editor id="tinymce" v-model="value" :init="init"></editor>
  • 这里的 init 是 tinymce 初始化配置项，后面会讲到一些关键的 api，完整 api 可以参考官方文档,
    中文文档
    编辑器需要一个 skin 才能正常工作，所以要设置一个 skin_url 指向之前复制出来的 skin 文件

//这里是基于vue-cli 3.x配置的,如果不是cli3的情况,'/tinymce'前面要加上'/static',即'/static/tinymce/langs/zh_CN.js'
init: {selector: "#tinymce", //tinymce的idlanguage_url: "/tinymce/langs/zh_CN.js",language: "zh_CN",skin_url: "/tinymce/skins/ui/oxide", //编辑器需要一个skin才能正常工作，所以要设置一个skin_url指向之前复制出来的skin文件
}
  • 同时在 mounted 中也需要初始化一次：
mounted() {tinymce.init({});
},

四、扩展插件

  • 完成了上面的初始化之后，就已经能正常运行编辑器了，但只有一些基本功能
    tinymce 通过添加插件 plugins 的方式来添加功能
    比如要添加一个上传图片的功能，就需要用到 image 插件，添加超链接需要用到 link 插件
    • 4.1 在import里引入插件
    import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/wordcount";
//下面的插件是自带的,不需要引入,引入的时候,浏览器会有个警告,说这个插件是内核自带,请自行删除
// import "tinymce/plugins/contextmenu";
// import "tinymce/plugins/colorpicker";
// import "tinymce/plugins/textcolor";
    • 4.2 在data的init对象里引入插件
    plugins: "image link code table lists wordcount", //引入插件
    • 4.3 添加了插件之后，默认会在工具栏 toolbar 上添加对应的功能按钮，toolbar 也可以自定义
    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", //工具栏

五、其他注意

  • 如果出现5-1图的报错

                                                                    5-1图报错.jpg


    这是因为你import里引入的插件和plugins引入的插件没有相互对应上,删除部分插件调整
  • 如果还存在报错,这是因为 init 参数地址错误
    这是因为 init 参数地址错误，请核对下 init 参数中的几个路径是否正确,如果参数无误，可以先删除 language_url 和 language 再试

六、tinymce一些功能配置

//PS: 在data的init里配置
browser_spellcheck: true, // 拼写检查
branding: false, // 去水印
elementpath: false, //禁用编辑器底部的状态栏
statusbar: false, // 隐藏编辑器底部的状态栏
paste_data_images: true, // 允许粘贴图像
menubar: false, // 隐藏最上方menu
fontsize_formats: "14px 16px 18px 20px 24px 26px 28px 30px 32px 36px", //字体大小
font_formats:"微软雅黑=Microsoft YaHei,Helvetica Neue;PingFang SC;sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun;serifsans-serif;Terminal=terminal;monaco;Times New Roman=times new roman;times", //字体file_picker_types: 'image',
images_upload_credentials: true,

七、图片上传

//在data的init里面配置
/** 下面方法是为tinymce添加自定义插入图片按钮* 借助iview的Upload组件,将图片先上传到存储云上，再将图片的存储地址放入编辑器内容
*/
// 图片上传三个参数，图片数据，成功时的回调函数，失败时的回调函数
images_upload_handler: function(blobInfo, success, failure) {let formdata = new FormData();formdata.append("image", blobInfo.blob());//uploadImg是上传图片的请求接口uploadImg(formdata).then(res => {console.log(res);success("https://qnsjk.huabeisky.com/" + res.data);}).catch(res => {failure("error");});
}

八、预览效果

                                                                   预览效果.png

九、封装

  • 子组件myTinymce
<template><div class='tinymce-container'><editor id="tinymce" v-model="value" :init="init"></editor></div>
</template><script>
import tinymce from "tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver/theme";
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/wordcount";
import { uploadImg } from "@/api/common";
//下面的插件是自带的,不需要引入
// import "tinymce/plugins/contextmenu";
// import "tinymce/plugins/colorpicker";
// import "tinymce/plugins/textcolor";
export default {name: "MyTinymce",props: {tinymceHtml: '',tinymceHeight: {type: Number,default: 500}},components: {Editor},data() {return {value: this.tinymceHtml, //父组件通过ref拿到该组件的值init: {selector: "#tinymce",language_url: "/tinymce/langs/zh_CN.js",language: "zh_CN",skin_url: "/tinymce/skins/ui/oxide", //编辑器需要一个skin才能正常工作，所以要设置一个skin_url指向之前复制出来的skin文件height: this.tinymceHeight,plugins: "image link code table lists wordcount", //引入插件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", //工具栏browser_spellcheck: true, // 拼写检查branding: false, // 去水印elementpath: false, //禁用编辑器底部的状态栏statusbar: false, // 隐藏编辑器底部的状态栏paste_data_images: true, // 允许粘贴图像menubar: false, // 隐藏最上方menufile_picker_types: 'image',images_upload_credentials: true,fontsize_formats: "14px 16px 18px 20px 24px 26px 28px 30px 32px 36px", //字体大小font_formats:"微软雅黑=Microsoft YaHei,Helvetica Neue;PingFang SC;sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun;serifsans-serif;Terminal=terminal;monaco;Times New Roman=times new roman;times", //字体/*** 下面方法是为tinymce添加自定义插入图片按钮* 借助iview的Upload组件,将图片先上传到存储云上，再将图片的存储地址放入编辑器内容*/// 图片上传三个参数，图片数据，成功时的回调函数，失败时的回调函数images_upload_handler: function(blobInfo, success, failure) {let formdata = new FormData();formdata.append("image", blobInfo.blob());uploadImg(formdata).then(res => {console.log(res);success("https://qnsjk.huabeisky.com/" + res.data);}).catch(res => {failure("error");});}}};},watch: {tinymceHtml(newV,oldV) {this.value = newV}},computed: {},created() {},mounted() {tinymce.init({});},methods: {}
};
</script>
<style lang="scss" scoped>
</style>
  • 父组件中使用该组件
<template><div class=""><myTinymce ref="myTinymce" :tinymceHtml="content"></myTinymce></div>
</template>
<script>
import myTinymce from "@/components/MyTinymce";
export default {name: "",components: {myTinymce},
}
</script>




链接：https://www.jianshu.com/p/44ee417537eb

这篇关于(转)tinymce-vue使用教程的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/206260。

相关文章

C语言中联合体union的使用

C语言中联合体union的使用

本文编辑整理自： http://bbs.chinaunix.net/forum.php?mod=viewthread&tid=179471 一、前言 “联合体”(union）与“结构体”(struct)有一些相似之处。但两者有本质上的不同。在结构体中,各成员有各自的内存空间, 一个结构变量的总长度是各成员长度之和。而在“联合”中,各成员共享一段内存空间, 一个联合变量
阅读更多...
Tolua使用笔记（上）

Tolua使用笔记（上）

目录   1.准备工作 2.运行例子 01.HelloWorld：在C#中，创建和销毁Lua虚拟机 和 简单调用。 02.ScriptsFromFile：在C#中，对一个lua文件的执行调用 03.CallLuaFunction：在C#中，对lua函数的操作 04.AccessingLuaVariables：在C#中，对lua变量的操作 05.LuaCoroutine：在Lua中，
阅读更多...
Vim使用基础篇

Vim使用基础篇

本文内容大部分来自 vimtutor，自带的教程的总结。在终端输入vimtutor 即可进入教程。 先总结一下，然后再分别介绍正常模式，插入模式，和可视模式三种模式下的命令。 目录 看完以后的汇总 1.正常模式（Normal模式） 1.移动光标 2.删除 3.【:】输入符 4.撤销 5.替换 6.重复命令【. ; ,】 7.复制粘贴 8.缩进 2.插入模式 INSERT
阅读更多...
vue, 左右布局宽，可拖动改变

vue, 左右布局宽，可拖动改变

1：建立一个draggableMixin.js  混入的方式使用 2：代码如下draggableMixin.js  export default {data() {return {leftWidth: 330,isDragging: false,startX: 0,startWidth: 0,};},methods: {startDragging(e) {this.isDragging = tr
阅读更多...
Lipowerline5.0 雷达电力应用软件下载使用

Lipowerline5.0 雷达电力应用软件下载使用

1.配网数据处理分析 针对配网线路点云数据，优化了分类算法，支持杆塔、导线、交跨线、建筑物、地面点和其他线路的自动分类；一键生成危险点报告和交跨报告；还能生成点云数据采集航线和自主巡检航线。 获取软件安装包联系邮箱:2895356150@qq.com，资源源于网络，本介绍用于学习使用，如有侵权请您联系删除！ 2.新增快速版，简洁易上手 支持快速版和专业版切换使用，快速版界面简洁，保留主
阅读更多...
如何免费的去使用connectedpapers？

如何免费的去使用connectedpapers？

免费使用connectedpapers 1. 打开谷歌浏览器2. 按住ctrl+shift+N,进入无痕模式3. 不需要登录（也就是访客模式）4. 两次用完，关闭无痕模式（继续重复步骤 2 - 4） 1. 打开谷歌浏览器 2. 按住ctrl+shift+N,进入无痕模式 输入网址：https://www.connectedpapers.com/ 3. 不需要登录（也就是
阅读更多...
vue项目集成CanvasEditor实现Word在线编辑器

vue项目集成CanvasEditor实现Word在线编辑器

CanvasEditor实现Word在线编辑器 官网文档：https://hufe.club/canvas-editor-docs/guide/schema.html 源码地址：https://github.com/Hufe921/canvas-editor 前提声明： 由于CanvasEditor目前不支持vue、react 等框架开箱即用版，所以需要我们去Git下载源码，拿到其中两个主
阅读更多...
Toolbar+DrawerLayout使用详情结合网络各大神

Toolbar+DrawerLayout使用详情结合网络各大神

最近也想搞下toolbar+drawerlayout的使用。结合网络上各大神的杰作，我把大部分的内容效果都完成了遍。现在记录下各个功能效果的实现以及一些细节注意点。 这图弹出两个菜单内容都是仿QQ界面的选项。左边一个是drawerlayout的弹窗。右边是toolbar的popup弹窗。 开始实现步骤详情： 1.创建toolbar布局跟drawerlayout布局 <?xml vers
阅读更多...
基于Springboot + vue 的抗疫物质管理系统的设计与实现

基于Springboot + vue 的抗疫物质管理系统的设计与实现

目录 📚 前言 📑摘要 📑系统流程 📚 系统架构设计 📚 数据库设计 📚 系统功能的具体实现    💬 系统登录注册 系统登录 登录界面   用户添加  💬 抗疫列表展示模块     区域信息管理 添加物资详情 抗疫物资列表展示 抗疫物资申请 抗疫物资审核 ✒️ 源码实现 💖 源码获取 😁 联系方式 📚 前言 📑博客主页：
阅读更多...
vue+el国际化-东抄西鉴组合拳

vue+el国际化-东抄西鉴组合拳

vue-i18n 国际化参考 https://blog.csdn.net/zuorishu/article/details/81708585 说得比较详细。 另外做点补充，比如这里cn下的可以以项目模块加公共模块来细分。 import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //引入element语言包const cn = {mess
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2