富文本的使用

1.首先在index.html中引入富文本

<!-- 引入tinymce 富文本 -->

<script src="./tinymce/tinymce.min.js"></script>

<!-- 汉化富文本 -->

<script src="./tinymce/langs/zh-Hans.js"></script>

<div id="app">

<textarea name="" id="mytextarea" cols="30" rows="10"></textarea>

</div>

 tinymce.init({

      selector: '#mytextarea',

      // language: 'zh_CN',

      // 去除 （由TINY驱动） 右下角文字

      branding: false,

      // 配置工具栏

      toolbar: 'newdocument | bold',

      // toolbar: false, //隐藏

      // 配置菜单栏

      menu: {

        aaa: { title: 'aaa', items: 'newdocument' },

        bbb: { title: 'bbb', items: 'undo | redo' },

        // edit: { title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall' },

        // insert: { title: 'Insert', items: 'link media | template hr' },

        // view: { title: 'View', items: 'visualaid' },

        // format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat' },

        // table: { title: 'Table', items: 'inserttable tableprops deletetable | cell row column' },

        // tools: { title: 'Tools', items: 'spellchecker code' }

      },

      menubar: true, //false不显示菜单栏， 默认true显示菜单栏

      // 生命周期 setup创建指甲钳

      setup: function (editor) {

        console.log('setup:', editor);

        //  使用editor.on 监听点击事件

        // MouseLeave 鼠标离开文本框

        editor.on('MouseLeave', function (e) {

          console.log('click:', editor.getContent());

        });

      },

      // 渲染后  这里才能谁知获取值

      init_instance_callback: function (editor) {

        console.log('init_instance_callback:', editor);

        // console.log("Editor: " + editor.id + " is now initialized.");

        // editor.setContent('haloo') //设置内容

      }

    });