tinymce 官方为 vue 项目提供了一个组件 tinymce-vue

一、安装tinymce-vue

npm install @tinymce/tinymce-vue -S

二、下载tinymce

npm install tinymce -S

下载的时候可以先在static(public)下面建个目录tinymce,下载tinymce完成后在node_modules 中找到 tinymce/skins目录,将其复制到static\tinymce目录下面

三、下载中文语言包

https://www.tiny.cloud/get-tiny/language-packages/

下载完成后将其解压到public\tinymce目录下面,最终目录结构形式如下

四、创建组件tinymce.vue

<template>
<div class="tinymce-editor">
<editor v-model = "myValue" :init="init" :disabled="disabled" @onClick="onClick"></editor>
</div>
</template>
<script>
// import axios from "axios";
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver";
// 编辑器插件plugins
// 更多插件参考:https://www.tiny.cloud/docs/plugins/
import "tinymce/plugins/image"; // 插入上传图片插件
// import 'tinymce/plugins/media'// 插入视频插件
import "tinymce/plugins/table"; // 插入表格插件
import "tinymce/plugins/lists"; // 列表插件
import "tinymce/plugins/wordcount"; // 字数统计插件
export default {
components: {
Editor
},
props: {
value: {
type: String,
default: ""
},
// 基本路径,默认为空根目录,如果你的项目发布后的地址为目录形式,
// 即abc.com/tinymce,baseUrl需要配置成tinymce,不然发布后资源会找不到
baseUrl: {
type: String,
default: ""
},
disabled: {
type: Boolean,
default: false
},
plugins: {
type: [String, Array],
default: "lists image table wordcount"
},
// 在toolbar中添加工具栏相应按钮
toolbar: {
type: [String, Array],
default:
"undo redo | formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image table | removeformat"
}
},
data() {
return {
init: {
language_url: `${this.baseUrl}/tinymce/langs/zh_CN.js`, // 语言包路径
language: "zh_CN", //语言
skin_url: `${this.baseUrl}/tinymce/skins/ui/oxide`, //skin路径
content_css: `${this.baseUrl}/tinymce/skins/content/default/content.css`,
// skin_url: `${this.baseUrl}/tinymce/skins/ui/oxide-dark`, // 暗色系
// content_css: `${this.baseUrl}/tinymce/skins/content/dark/content.css`, // 暗色系
height: 300, //编辑器高度
plugins: this.plugins,
toolbar: this.toolbar,
branding: false, //是否禁用“Powered by TinyMCE”
menubar: false, //顶部菜单栏显示
// 此处为图片上传处理函数
// 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
// images_upload_handler: (blobInfo, success, failure) => {
// let formdata = new FormData()
// formdata.set('file', blobInfo.blob())
// axios.post(url, formdata).then(res => {
// success(res.data.data)
// }).catch(res => {
// failure('error')
// })
// },
},
myValue: this.value
};
},
mounted() {
tinymce.init({});
},
methods: {
// 添加相关的事件,可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
// 需要什么事件可以自己增加
onClick(e) {
this.$emit("onClick", e, tinymce);
},
// 可以添加一些自己的自定义事件,如清空内容
clear() {
this.myValue = "";
}
},
watch: {
value(newValue) {
this.myValue = newValue;
},
myValue(newValue) {
this.$emit("input", newValue);
}
}
};
</script>

 五、引入组件

<template>
<div>
<tinymce-editor ref="editor" v-model="value"></tinymce-editor>
</div>
</template> <script>
import tinymceEditor from "./tinymce.vue";
export default {
data() {
return {
value: ""
};
},
components: {
tinymceEditor
}
};
</script>

效果图如下

移动端处理富文本参数(图片、长串字母)

        let obj = res.data;    // 假如该参数为富文本内容
obj.content = obj.content.replace(/<img/g, "<img width='100%'")  
obj.content = obj.content.replace(/[\s;]width:.+?/gi, '')
obj.content = obj.content.replace(/<img[^>]*?(src="[^"]*?")[^>]*?>/g, '<img $1/>')
obj.content = obj.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto"')
obj.content = obj.content.replace(/<p/g, "<p style='word-wrap:break-word'")

Vue tinymce富文本编辑器的更多相关文章

  1. vue项目富文本编辑器vue-quill-editor之自定义图片上传

    使用富文本编辑器的第一步肯定是先安装依赖 npm i vue-quill-editor 1.如果按照官网富文本编辑器中的图片上传是将图片转为base64格式的,如果需要上传图片到自己的服务器,需要修改 ...

  2. 在 Vue 项目中引入 tinymce 富文本编辑器

    项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项 ...

  3. vue中引入Tinymce富文本编辑器

    最近想在项目上引入一个富文本编辑器,之前引入过summernote,感觉并不太适合vue使用, 然后在网上查了查,vue中使用Tinymce比较适合, 首先,我们在vue项目的components文件 ...

  4. Vue集成tinymce富文本编辑器并实现本地化指南(2019.11.21最新)

     tinymce是一款综合口碑特别好.功能异常强大的富文本编辑器,在某些网站,甚至享有"宇宙最强富文本编辑器"的称号.那么,在Vue项目中如何集成呢?这并不困难,只需要参照官方教程 ...

  5. tinymce 富文本编辑器 编写资料

    tinymce官方文档: 粘贴图片插件 博客搬运地址 使用Blob获取图片并二进制显示实例页面 tinymce自动调整插件 是时候掌握一个富文本编辑器了——TinyMCE(1) XMLHttpRequ ...

  6. Django使用tinymce富文本编辑器

    1 - 安装 pip install django-tinymce==2.6.0 2 - 注册app INSTALLED_APPS = ( ... 'tinymce', ) 3 - 在setting中 ...

  7. tinymce富文本编辑器整合到django

    第一步:定义表存图片路径 models.py class AdminIMG(models.Model):     filename = models.CharField(max_length=200, ...

  8. vue集成百度UEditor富文本编辑器

    在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器.那么.如果你有这个需求.希望可以帮助到你 vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于是 ...

  9. 前端vue-TinyMCE富文本编辑器表情插件报错解决

    最近项目中需要使用文本编辑器,比较了下最终选择了TinyMCE这款富文本编辑器.我安装的是TinyMCE v5但是在使用表情插件的时候,表情一直都出不来,报错信息如下: Uncaught Syntax ...

随机推荐

  1. 在Linux实例上自动安装并运行VNC Server

    #!/bin/bash ######################################### #Function: install vnc server #Usage: bash ins ...

  2. Angular路由使用

    一. 路由:根据不同URL地址,动态让根组件挂载其他组件来实现单页面应用,相对地址 1. 项目一开始创建就会询问是否添加路由(Angular routing) 2. 有无路由区别{ 1. 多了一个ro ...

  3. 【转】Android WiFi 经常掉线出现的几个原因分析!

    原因1.从Log分析来看,这个是由于Dhcp request fail 导致最终disconnect . Log 分析如下: 16:53:31.659 958 6525 D NetUtils: dhc ...

  4. 如何分析和研究Log文件 ,如何看日志信息

    如何分析和研究Log文件 ,如何看日志信息 . Log 在android中的地位非常重要,要是作为一个android程序员不能过分析log这关,算是android没有入门吧 . 下面我们就来说说如何处 ...

  5. 移动端键盘顶起遮挡输入框&offsetTop值不准问题

    先上图    通常在开发中我们会遇到这样输入框被遮挡的问题,那么该怎么解决呢? 方案一(css): 首先,把置底元素设置成,在页面的底部而非屏幕的底部 .page .bottom { position ...

  6. Qps从300到1500的优化过程

    最近压测一项目,遇到的性能问题比较典型,过程记录下来,给大家做定位调优参考: 表象: 单接口负载测试,qps最高到300,响应时间200ms,应用cpu达到90%以上,8c机器,如下图,写到这里可能有 ...

  7. Spring Boot 2从入门到放弃(持续更新)

    入门 Spring Boot 2项目的搭建和启动(入门篇1) Spring Boot 2项目的搭建和启动(入门篇2) spring boot 2项目自定义父pom Spring Boot 2开发工具s ...

  8. 使用TensorRT对人脸检测网络MTCNN进行加速

    前言 最近在做人脸比对的工作,需要用到人脸关键点检测的算法,比较成熟和通用的一种算法是 MTCNN,可以同时进行人脸框选和关键点检测,对于每张脸输出 5 个关键点,可以用来进行人脸对齐. 问题 刚开始 ...

  9. imx6ull+debian10 构建静态qt交叉编译环境

    # PC:Ubuntu18.04# GCC: arm-linux-gnueabihf- 7.4.0# 开发板:# imx6ull+debian10(文件系统为野火提供的) # 此处需要编译的是带gst ...

  10. TP6文档-邓士鹏

    2019年5月11日 - 教程为您提供<ThinkPHP6.0极速入门(视频教程)>之 TP6的目录结构 章节的在线实战教程供您学习,你可以进行笔记.提问.讨论和资料下载 https:// ...