Vue中使用tinymce富文本编辑器

Vue中使用tinymce富文本编辑器

之前vue项目中使用过 vue-quill-editor，感觉还行，比较轻量。最近根据公司需求找了找，最终选定了tinymce富文本编辑器。

cdn和本地两种方法都尝试了，也都行得通。先看CDN方式吧

https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.11/tinymce.min.js  //版本高了和脚手架不太兼容，好像是超过5.0就有问题

formatselect  // 设置标题模块，引入网上找的一些，默认是没有添加这个模块的，项目开始感觉要用，就添加了。

auto_focus: true, //自动获取焦点
branding: false,  // 去掉尾部驱动提示
object_resizing: true,  // 图片大小可以编辑
language: "zh_CN",  // 设置中文
// 。。。。。。。 好多设置
// 同时data中定义好上传图片地址和图片回显地址
uploadUrl: "https://dev.api.zhongxue***",
picUrl: "https://dev.api.zhongxue***",

images_upload_base_path: this.picUrl,  // 图片回显
// 图片本地上传方法  点击上传后执行的事件
images_upload_handler: (blobInfo, success, failure) => {
	let formdata = new FormData();
    formdata.append("file", blobInfo.blob());
    this.axios({
      method: "post", // post方法
      url: this.uploadUrl, // 请求上传图片服务器的路径
      headers: {
      // 配置请求头
      //   Authorization: localStorage.getItem('logintoken'), // token认证
      //   'Content-Type': 'application/x-www-form-urlencoded'
      },
 	 data: formdata,
   })
    .then((res) => {
	       // if (res.data.code != 200) {
	       //   // 上传失败
	       //   failure( res.msg);
	       //   return
	       // }
	       console.log(res);
	       success(this.picUrl + res.data.data);
	     })
    .catch((err) => {
       console.log(err)
       failure(`上传失败! ${err}`);
     });
	 },

本地配置也差不多，这里下载的也是tinymce_4.9.11

下载好后
将上图tinymce文件夹添加到项目中 public 文件夹内，同时下载一个中文包，丢在langs文件夹中。

const tinymce = window.location.origin + "/tinymce/tinymce.min.js";  // 组件中这样引入

language_url: "/tinymce/langs/zh_CN.js", // 引入中文包

其他的和cdn方式没什么不同了。

// 几种置空方式，有的某些情况下好像并不生效。。
this.$refs.content.setContent("")
tinymce.activeEditor.setContent("")
this.content = ""

害！想起来就记录一下吧吼吼吼吼