首先建立一个components组件 以便以后复用 名义随意取以下是全部内容直接复制进来即可
div部分
<textarea :id="id" :value="value"></textarea>
div
// Import TinyMCE
import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/modern/theme';
import 'tinymce/plugins/paste';
import 'tinymce/plugins/link';
import 'tinymce/plugins/image'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/uploadimage'
const INIT = 0;
const CHANGED = 2;
var EDITOR = null;
export default {
props: {
value: {
type: String,
required: true
},
setting: {}
},
watch: {
value: function (val) {
console.log('init ' + val)
if (this.status == INIT || tinymce.activeEditor.getContent() != val){
tinymce.activeEditor.setContent(val);
}
this.status = CHANGED
}
},
data: function () {
return {
status: INIT,
id: 'editor-'+new Date().getMilliseconds(),
}
},
methods: {
},
mounted: function () {
const _this = this;
const setting =
{
selector:'#'+_this.id,
language:"zh_CN",
init_instance_callback:function(editor) {
EDITOR = editor;
console.log("Editor: " + editor.id + " is now initialized.");
editor.on('input change undo redo', () => {
var content = editor.getContent()
_this.$emit('input', content);
});
},
plugins:[]
};
Object.assign(setting,_this.setting)
tinymce.init(setting);
},
beforeDestroy: function () {
tinymce.get(this.id).destroy();
}
}
以下是router里面的使用方法 添加了预览功能 不要可以自己删除
{{con}}
content = content">
提交
预览
{{con}}
{{tinymceHtml}}
{{content}}
取消
// import jquery from "jquery"
import editor from "../../components/editor/editor.vue"
// import d from "static/tinymce/zh_CN"
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/uploadimage'
// import 'tinymce/plugins/tinymce-imageupload'
// import Editor from '@tinymce/tinymce-vue';
// import tinymce from 'tinymce/tinymce'
// import 'tinymce/themes/modern/theme'
// import Editor from '@tinymce/tinymce-vue'
//import editor from '@/components/editor'
// export default {
// data(){
// return {
// tinymceHtml: '请输入内容',
// init: {
// language_url: '/static/tinymce/zh_CN',
// language: 'zh_CN',
// skin_url: '/static/tinymce/skins/lightgray',
// height: 300,
// plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
// toolbar:
// 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
// branding: false
// }
// }
// },
////注册标签组件
// components: {
// 'editor': Editor
// },
// mounted(){
// tinymce.init({})
// }
// }
export default {
name: "editor-demo",
data: function () {
return {
//提交按钮
buttonsubmit:true,
con:"文章标题:",
//富文本编辑器的内容
contentshou:true,
//标题显示与隐藏
quillinput:true,
//预览内容
preview:false,
buttonif:true,
tinymceHtml:"",
content:'我是富文本编辑器的内容',
//tinymce的配置信息 参考官方文档 https://www.tinymce.com/docs/configure/integration-and-setup/
editorSetting:{
// imageupload_url: 'serverAddress/file/fileUpload', //图片上传地址
// upload_image_url: '/upload/cloud', //配置的上传图片的路由
upload_image_url: '/tinymce', //配置的上传图片的路由
// width:600,
height:200,
plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu uploadimage',
toolbar:
'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink code uploadimage | removeformat ',
branding: false,
convert_urls: false,
}
}
},
components:{
'editor':editor
},
methods:{
//预览button
buttonclick(event){
let tinymceHtml =this.tinymceHtml
let content =this.content
if(tinymceHtml===""||content===""){
alert("内容不能为空")
}else {
this.contentshou=false
this.quillinput=false
this.buttonif=false
this.preview=true
this.buttonsubmit=false
}
},
//取消button
previewclick(){
this.contentshou=true
this.quillinput=true
this.preview=false
this.buttonif=true
this.buttonsubmit=true
}
}
}
.content-wrapper {
margin: 0 36px 0 24px;
padding-top: 57px;
height: calc(100% - 105px);
}
.previewclick{
position: relative;
top: -100px;
width: 100%;
height: 100%;
}
.buoon{
width: 100%;
height: 1px;
background: #696969;
}
下载语言包去官网下 然后放到根目录下面
