vueでは、ueditorコンポーネント(cdn)を完璧に使います.
5532 ワード
前書き:main.jsやページ全体や局部を導入する必要はなく、直接cdnを使ってueditorをvueコンポーネントとして使用します.
直接にvueファイルを作成して、コンポーネントとして使ってください.コピーして貼り付けすれば、直接使用できます.(このページは先端コードだけを示しています.後端は自由に選択してください.画像資源はアリ雲ossまたは七牛雲オブジェクトを使って保存することをお勧めします.)
componentコンポーネントコード:
直接にvueファイルを作成して、コンポーネントとして使ってください.コピーして貼り付けすれば、直接使用できます.(このページは先端コードだけを示しています.後端は自由に選択してください.画像資源はアリ雲ossまたは七牛雲オブジェクトを使って保存することをお勧めします.)
componentコンポーネントコード:
export default {
name: 'Editor',
props: {
ueditorPath: {
// UEditor
type: String,
default: '............',//cdn
},
ueditorConfig: {
// UEditor
type: Object,
default: function() {
return {
toolbars:[['source', 'bold', 'italic', 'underline', 'removeformat', 'forecolor', 'backcolor', 'paragraph', 'fontfamily', 'fontsize', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', 'simpleupload']],
serverUrl: '............',//
};
}
},
ueditorStyle: {
type: Object,
default: function() {
return {
}
}
},
},
data() {
return {
// , id
randomId: 'editor_' + (Math.random() * 100000000000000000),
instance: null,
// scriptTagStatus -> 0: ,1: ,2:
scriptTagStatus: 0
};
},
created() {
if (window.UE !== undefined) {
// , ,
this.scriptTagStatus = 2;
this.initEditor();
} else {
// , ,
this.insertScriptTag();
}
console.log(this)
},
beforeDestroy() {
// , UEditor
if (this.instance !== null && this.instance.destroy) {
this.instance.destroy();
}
},
methods: {
insertScriptTag() {
let editorScriptTag = document.getElementById('editorScriptTag');
let configScriptTag = document.getElementById('configScriptTag');
// tag , tag
if (editorScriptTag === null) {
configScriptTag = document.createElement('script');
configScriptTag.type = 'text/javascript';
configScriptTag.src = this.ueditorPath + 'neditor.config.js';
configScriptTag.id = 'configScriptTag';
editorScriptTag = document.createElement('script');
editorScriptTag.type = 'text/javascript';
editorScriptTag.src = this.ueditorPath + 'neditor.all.min.js';
editorScriptTag.id = 'editorScriptTag';
let s = document.getElementsByTagName('head')[0];
s.appendChild(configScriptTag);
s.appendChild(editorScriptTag);
}
//
if (configScriptTag.loaded) {
this.scriptTagStatus++;
} else {
configScriptTag.addEventListener('load', () => {
this.scriptTagStatus++;
configScriptTag.loaded = true;
this.initEditor();
});
}
if (editorScriptTag.loaded) {
this.scriptTagStatus++;
} else {
editorScriptTag.addEventListener('load', () => {
this.scriptTagStatus++;
editorScriptTag.loaded = true;
this.initEditor();
});
}
this.initEditor();
},
initEditor() {
// scriptTagStatus 2 , js ,
if (this.scriptTagStatus === 2 && this.instance === null) {
// Vue DOM , template script
// , nextTick UEditor
this.$nextTick(() => {
this.instance = window.UE.getEditor(this.randomId, this.ueditorConfig);
// , UEditor , ready
this.instance.addListener('ready', () => {
this.$emit('ready', this.instance);
});
});
}
}
}
};
import Editor from ' component /Editor.vue'
コードを う:
import Editor from ' component /Editor.vue'
export default {
data(){
return {
ueditorStyle: {//ueditor
width: '100%',
height: '200px'
},
}
},
components:{
Editor
},
methods:{
editorReady (editor) {// ueditor
this.editor = editor
if (this.$router.currentRoute.params.id > 0) this.fetch()
editor.addListener('afterAutoSave', () => {
this.prize.data.description = editor.getContent()
})
},
},
}
this.editor.setContent( )// ueditor ,