Table of Contents
Quick Start
自定义在vue中使用
第一，引入，例：
<script src="../tinymce/tinymce.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
第二，创建div或textarea，例：
<div id="tinymcedemo"></div>
第三，tinymce初始化方法写入vue实例的methods属性，例：
methods:{
init(){
window.tinymce.init({
selector:"#tinymcedemo"
})
}
}
第四，挂载，例：
mounted(){
this.init();
}
2、实现思路
vue 调用 tinymce.init 初始化节点
利用监听dom节点变化的
把我们需要观察的节点（H1-H6）筛选出来
分别给筛选出来的节点（H1-H6）添加上自定义属性，方面定位该元素的位置
把节点列表渲染到左侧目录导航
点击目录导航时回传自定义属性到富文本中，进行滚动定位到节点位置
<!--vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--下载的tinyMCE-->
<script src="../plugins/tinymce/tinymce.min.js"></script>
Step 1：
@{
ViewData["Title"] = "Home Page";
}
@section header
{
<script src="/lib/tinymce_5.1.6/js/tinymce/tinymce.min.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
}
<div class="text-center">
<h1 class="display-4">Welcome</h1>
<p>Learn about <a href="/Index">building Index+vue2</a>.</p>
</div>
<div id="tinymcedemo">
</div>
<button onclick="content()">Get content</button>
<div>
<p>这里是生成的最终HTML</p>
</div>
<textarea id="html-content" cols="30" rows="10" v-model="html"></textarea>
// come from :https://juejin.cn/post/7133392287463112735
<script>
var app = new Vue({
el: '#tinymcedemo',
data: {
text: "",
html: "777",
},
// https://dustinpfister.github.io/2019/11/11/vuejs-lifecycle-updated/
//
updated: function () {
//this.figure()
//只有data里的变量改变并且要在页面重新渲染完成之后,才会进updated生命周期，只改变data里的值但是没有再页面上渲染该值的话并不会触发updated方法。
console.log('updated')
},
//Vue尚完成挂载
mounted() {
this.init();
//this.iframeDocument();
},
//ready: function () {
// this.getCustomers()
//},
// 监听text变量
// 作者：jc_FREE
//链接：https://juejin.cn/post/6844903716038901774
// 来源：稀土掘金
//著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
methods: {
init() {
window.tinymce.init({
selector: "#tinymcedemo",
plugins: 'toc',
toolbar: 'toc | formatselect',
})
},
// 获取iframe的Document 对象
}
})
</script>
@*JavaScript 获取 内容方式：*@
<script>
var vmind = document.getElementById("searchTxt").value;
// /*获取iframe中class为textLayer的div*/
//this.textlayer = that.iframeWin.$('.textLayer')
///*获取鼠标在此iframe中的选中的文字*/
//var selection_text = this.iframeWin.window.getSelection().toString();
//————————————————
//版权声明：本文为CSDN博主「沙雕在人间」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
//原文链接：https://blog.csdn.net/simple_smile1208/article/details/119423065
function content() {
alert(tinymce.activeEditor.getContent());
}
</script>
<body>
<div id="test">
<tinymce v-model="content"></tinymce>
</div>
<!--vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--下载的tinyMCE-->
<script src="../plugins/tinymce/tinymce.min.js"></script>
<!--tinyMCE组件js-->
<script src="../js/tinymceTemplate.js"></script>
<script>
new Vue({
el:"#test",
data(){
return{
content:""
}
},
mounted:function(){
//TODO
},
methods:{
//TODO
}
});
</script>
</body>
原文链接：https://blog.csdn.net/tonywu1992/article/details/82953577
step 1:引入vue和tinyMCE
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
other
vue页面获取iframe里的值
核心原理共享vm对象和iframe的window对象this.$el.getElementsByTagName('iframe')[0].contentWindow
那我怎么注入我的vm对象呢，this.$el.getElementsByTagName('iframe')[0].contentWindow.vmObj
https://blog.csdn.net/tonywu1992/article/details/82953577
https://dustinpfister.github.io/2019/11/11/vuejs-lifecycle-updated/
Useful links
tinyMCE下载地址:
https://www.tiny.cloud/get-tiny/self-hosted/
iframe元素获取document中的对象为空
https://juejin.cn/post/7133476919621713950
TinyMCE富文本自定义生成目录(基于vue + typescript)
https://juejin.cn/post/6868554933365374989
vue 生命周期 updated的使用
https://www.jianshu.com/p/73b1bf699d75
Using Vuejs with ASP.NET Core MVC
https://www.genesisrrios.com/en/blog/using-asp-net-core-with-vue-js/
https://vuejsprojects.com/tinymce