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') //设置内容
}
});