vue2中使用 Tinymce 5.1.0使用过程举例

一、背景

vue-cli 版本 ：@vue/cli 4.5.15

查看脚手架版本的方法：Win + R 打开运行输入： cmd  ，打开控制台输入 vue -V

 vue 版本："vue": "^2.6.11",

二、安装 Tinymce

 1、  --no-fund 是因为提示你捐赠支持，加上这个就忽略捐赠。（Tinymce不同版本会有不同请注意版本。）

npm install npm install tinymce@5.1.0 -S --no-fund

2、安装成功以后在 nodelmodules 会有 tinumce 文件夹，结构目录如图所示

3、将 plugins、skins、thems文件都复制到 public\static 文件夹，新建langs 文件夹，zh_CN.js为汉化语言包。其他tinymce 的版本的语言包在我都资源中都有，这是tinymce 5 的语言包下载地址 https://download.csdn.net/download/Drizzlejj/87451093?spm=1001.2014.3001.5503 当然也可以去自行去官网下载。

  三、 创建示例

1、在views 文件夹下新建 Tinymce.vue 文件

<template>
<div>
    <div id="tinymce" ></div>
    <input type="button" @click="getContent()" value="获得内容" >
</div>
  
</template>
<script>
import tinymce from "tinymce/tinymce"; //tinymce默认hidden，不引入不显示
import "tinymce/themes/silver/theme"; //编辑器主题
import "tinymce/plugins/link"; //超链接
import 'tinymce/plugins/paste'  //粘贴过滤
import 'tinymce/plugins/preview'  //预览
import 'tinymce/plugins/media'
import 'tinymce/plugins/image'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/code'  // 源代码

export default {
  data() {
    return {
      
    };
  },
  mounted() {
    // 初始化编辑器
    this.initTiny();
  },
  methods: {
    // 初始化编辑器
    initTiny(){
        var tinyID='tinymce';
        tinymce.init({
            selector: '#'+tinyID,
            language_url: '../static/langs/zh_CN.js',  // 汉化路径
            language:'zh_CN',
            skin_url: '../static/skins/ui/oxide-dark', // 编辑器皮肤
            content_css: `../static/skins/content/default/content.css`,  // 编辑器样式
            plugins: 'link media image advlist code',  // 插件
            toolbar: 'undo redo | styleselect | bold italic aligncenter| link image media code', // 菜单栏
            auto_focus: true,
        });
    },
    // 点击获取内容
    getContent(){
        var cnt = tinymce.editors['tinymce'].getContent();
        console.log(cnt);
        alert(cnt);
    },
  }
};
</script>

2、在路由中引入组件，编写地址

3、运行结果如图所示，在输入框中输入内容，点击获取内容：

 3.1 获取输入内容纯文本

getContent(){
        var cnt = tinymce.editors['tinymce'].getContent({ format: 'text' });
        console.log(cnt);
        alert(cnt);
    },

3.2 销毁编辑器

destroyTiny(){
    tinymce.editors[tinyID].destroy();
    //tinyMCE.editors[tinyID].remove();
}

 四、tinymce 基本配置

1、selector是TinyMCE的重要配置选项，使用CSS选择器语法来确定页面上哪个元素被TinyMCE替换成编辑器。

tinymce.init({
    selector: '#textarea'
});

2、插件配置

plugins配置参数用于指定哪些插件被用在当前编辑器实例中。TinyMCE自带丰富的插件，也可以编写自己的插件，用此选项引入。

tinymce.init({
    selector: '#textarea',
    plugins : 'advlist autolink link image lists preview', //字符串方式
    //plugins : ['advlist','autolink','link'], //数组方式
});

3.工具栏配置

使用toolbar来配置工具栏上可用的按钮，多个控件使用空格分隔，使用“|”来创建分组。

 lineheight（行高5.5新增） newdocument（新文档） bold（加粗）italic(斜体）underline（下划线） strikethrough(删除线）alignleft(左对齐）aligncenter（居中对齐）alignright(右对齐）alignjustify（两端对齐）  styleselect(格式设置） formatselect（段落格式） fontselect(字体选择） fontsizeselect(字号选择）cut（剪切）copy（复制）paste（粘贴）bullist（项目列表UL）numlist（编号列表OL）outdent（减少缩进） indent(增加缩进）blockquote(引用）undo（撤销）redo（重做/重复）removeformat（清除格式）subscript（下角标）superscript（上角标）

 4、菜单栏配置

menu：影响菜单上放置的项目（其还提供创建自定义标题菜单的方法）。

menubar：影响菜单下拉列表中显示的项目。

4.2自定义菜单，如要菜单栏消失：menubar:false,

 5、设置编辑器的宽高，默认单位为像素（px），如提供了单位，TinyMCE会以css模式去理解它。单位支持px/%/em/vh/vw

tinymce.init({
    selector: '#tinydemo',
    width: 300,
    height: 300,
});

 6、图片上传

1、images_upload_url ：用于指定一个接受上传文件的后端处理接口地址；images_upload_base_path：可以给相对路径指定它所相对的基本路径。（本例中由于后台在本地运行，后台返回的相对路径，我在路径上加了地址）

 2、后端返回的格式必须是：

//json格式
{ "location": "folder/sub-folder/new-location.png" }

3、示例：

 7、首行缩进

 下载首行缩进的插件，放入 plugins 中。http://tinymce.ax-z.cn/more-plugins/indent2em.zip

使用方法同一般插件

效果：