1、index.html 增加cdn 地址

  <script src="//cdn.bootcss.com/tinymce/5.0.16/tinymce.min.js"></script>

2、组件目录创建编辑器的组件

  cd components

  touch tinymce-editor.vue

  创建内容:

  

<template>
<div class="tinymce-editor">
<editor v-model="myValue"
:init="init"
:disabled="disabled"
@onClick="onClick">
</editor>
</div>
</template> <script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/plugins/image'
import 'tinymce/plugins/media'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker' export default {
components: {
Editor
},
props: {
//传入一个value,使组件支持v-model绑定
value: {
type: String,
default: ''
},
disabled: {
type: Boolean,
default: false
},
plugins: {
type: [String, Array],
default: 'lists image media wordcount advlist bbcode code charmap emoticons insertdatetime preview'
},
toolbar: {
type: [String, Array],
default: 'undo redo | fontselect fontsizeselect bold italic | forecolor backcolor | superscript subscript charmap insertdatetime emoticons| lists image media | numlist | preview code removeformat | alignleft aligncenter alignright alignjustify | bullist outdent indent'
}
},
data() {
return {
//初始化配置
init: {
// language_url: '/static/tinymce/langs/zh_CN.js',
// language: 'zh_CN',
skin_url: '/static/tinymce/skins/ui/oxide',
height: 150,
plugins: this.plugins,
toolbar: this.toolbar,
branding: false,
menubar: false,
//此处为图片上传处理函数,这个直接用了base64的图片形式上传图片,
//如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
//images_upload_url:"/common/uploadImg",
images_upload_handler: function (blobInfo, succFun, failFun) {
var xhr, formData;
var file = blobInfo.blob();//转化为易于理解的file对象
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', '/common/uploadImg');
xhr.onload = function() {
var json;
if (xhr.status != 200) {
failFun('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.data.urlExt != 'string') {
failFun('Invalid JSON: ' + xhr.responseText);
return;
}
succFun(json.data.urlExt);
};
formData = new FormData();
formData.append('file', file, file.name );//此处与源文档不一样
xhr.send(formData);
},
file_picker_types: 'file image media',
file_picker_callback: function(callback, value, meta) {
// Provide file and text for the link dialog
//要先模拟出一个input用于上传本地文件
var input = document.createElement('input');
input.setAttribute('type', 'file');
//你可以给input加accept属性来限制上传的文件类型
//例如:input.setAttribute('accept', '.jpg,.png');
input.click();
input.onchange = function() {
var file = this.files[0]; var xhr, formData;
console.log(file.name);
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', '/common/uploadImg');
xhr.onload = function() {
var json;
if (xhr.status != 200) {
failure('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.data.urlExt != 'string') {
failure('Invalid JSON: ' + xhr.responseText);
return;
}
callback(json.data.urlExt);
};
formData = new FormData();
formData.append('file', file, file.name );
xhr.send(formData);
}
}
},
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>
<style scoped>
</style>

   1.上面我注释了中文插件包,需要的可以自己下载。

   2. skin_url 定义为自己的目录路径地址,网上很多的做法是node install 之后,把css目录复制到项目中

   3.上传文件/图片/媒体,注意返回的json 格式,里面要替换为你自己的格式。

3、使用组件。

  index.vue:

  

<template>
<tinymce-editor v-model="myValue"
@onClick="onClick"
ref="editor"></tinymce-editor>
</template>
<script>
import TinymceEditor from '../../components/tinymce-editor'
  export default {
    //引用组件
    components: { TinymceEditor },
    methods: {  
      onClick(e, editor) {
        // console.log('Element clicked')
        // console.log(e)
        // console.log(editor)
      },
      clear() {
        this.$refs.editor.clear()
      }
    }
  }
</script>

  是不是很简单?有问题可以留言找我

  

vue 配置 TinyMCE的更多相关文章

  1. vue配置手机通过IP访问电脑开发环境

    vue配置手机通过IP访问电脑开发环境config/index.js// Various Dev Server settings host: '0.0.0.0', // can be overwrit ...

  2. vue配置手机通过IP访问,Win10让局域网内其他电脑通过IP访问网站的方法

    vue配置手机通过IP访问config/index.js// Various Dev Server settings host: '0.0.0.0', // can be overwritten by ...

  3. vue实现部分页面导入底部 vue配置公用头部、底部,可控制显示隐藏

    vue实现部分页面导入底部 vue配置公用头部.底部,可控制显示隐藏 在app.vue文件里引入公共的header 和 footer header 和 footer 默认显示,例如某个页面不需要显示h ...

  4. react和vue配置本地代理

    React 在react中配置开发环境下的本地代理相对比较简单,直接在package.json文件中修改即可. 但是这样做有其局限性,如果开发中代理多个接口的时候将无法满足需求,我们需要的是下面这种的 ...

  5. 手把手教你vue配置请求本地json数据

    本篇文章主要介绍了vue配置请求本地json数据的方法,分享给大家,具体如下:在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require ...

  6. vue配置域名访问

    vue配置域名访问其实很简单,新建一个vue的项目,不废话,直接上截图 红色框住的两行就是设置访问的域名以及端口,默认是host: localhost port: 8080 像这样修改之后,重启项目, ...

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

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

  8. vue中TinyMCE图片 “data-mce-src” 属性的问题

    1.问题 在使用Vue中使用TinyMCE富文本编辑器时,上传的图片除了src属性还会多出来个"data-mcee-src" 属性,而保存时实际也是保存的"data-mc ...

  9. webpack vue 配置

    vue-loader 1.)首先创建项目目录 --vue-loader文件夹 |-index.html 入口文件 |-main.js 入口文件 |-App.vue Vue文件 |-package.js ...

随机推荐

  1. Python20之全局变量和局部变量

    一.局部变量和全局变量 局部变量:是指在函数体内定义的变量,作用域只在该函数体内部 全局变量:是指在函数体外定义的变量,作用域是整个代码段 所以在函数体内可以直接访问全局变量而不可以在函数体外访问局部 ...

  2. django使用pyecharts(1)----django加入echarts

    Django 中使用 pyecharts.一.普通django加入echarts Django 模板渲染 Step 0: 新建一个 Django 项目 $ django-admin startproj ...

  3. Redis--hash类型操作命令

    哈希类型hash redis hash 是一个 string 类型的 field 和 value 的映射表,hash 特别适合用于存储对象 哈希类型hash——基本命令 hset /hget /hms ...

  4. 【Qt】Qt5.12连接MySQl5.7(亲自测试成功)

    目录 00. 目录 01. Qt5.12连接MySQL5.7测试代码 02. Qt5.12连接MySQL5.7问题描述 03. 解决办法 04. 结果测试 05. 打赏 00. 目录 01. Qt5. ...

  5. go 错误

    错误 Go 程序使用 error 值来表示错误状态. 与 fmt.Stringer 类似,`error` 类型是一个内建接口: type error interface { Error() strin ...

  6. ideaui安装破解、相关配置、JRebel破解

    前言: Ideaui 2019(官网 https://www.jetbrains.com/idea/?fromMenu) 安装软件就简单啦,下载选择路径就完事了,注意文件名全英文:   但是按照咱们传 ...

  7. websocket 协议简述

    WebSocket 是一种网络通信协议,RFC 6455 定义了它的通信标准,属于服务器推送技术的一种 由于 HTTP 无状态.无连接.单向通信的特性,导致 HTTP 协议无法实现服务器主动向客户端发 ...

  8. AJAX 调用WebService 、WebApi 增删改查

    WebService 页面: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 3 ...

  9. C#基础加强笔记

    1面向对象 类:包含字段.属性.函数.构造函数 字段:存储数据 属性:保护字段 get set 函数:描述对象的行为 构造函数:初始化对象,给对象的每个属性赋值 面向对象的好处:让程序具有扩展性 类决 ...

  10. JavaScript 入门与进阶

    JavaScript 介绍 javascript 是运行在浏览器端的脚本语言,javascript 主要解决的是前端与用户交互的问题,包括使用交互 和 数据交互,javascript 是浏览器解释执行 ...