|
|
@@ -4,27 +4,54 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+const waitForCKEditor = (timeout = 10000) => new Promise((resolve, reject) => {
|
|
|
+ const startTime = Date.now()
|
|
|
+ const check = () => {
|
|
|
+ if (window.CKEDITOR && typeof window.CKEDITOR.replace === 'function') {
|
|
|
+ resolve(window.CKEDITOR)
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ if (Date.now() - startTime >= timeout) {
|
|
|
+ reject(new Error('CKEditor script did not load'))
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ setTimeout(check, 50)
|
|
|
+ }
|
|
|
+ check()
|
|
|
+})
|
|
|
+
|
|
|
export default {
|
|
|
props: ["content", "placeholder", 'type', 'isDark'],//从父组件转递的内容
|
|
|
- mounted: function () {
|
|
|
- const self = this;
|
|
|
- // 渲染编辑器
|
|
|
- self.ckeditor = window.CKEDITOR.replace('content', self.editorConfig);//定义编辑器的高度
|
|
|
-
|
|
|
- // 设置初始内容
|
|
|
- self.ckeditor.setData(self.content);
|
|
|
+ mounted: async function () {
|
|
|
+ try {
|
|
|
+ const CKEDITOR = await waitForCKEditor()
|
|
|
+ if (this.destroyed) return
|
|
|
|
|
|
- // 监听内容变更事件
|
|
|
- self.ckeditor.on("change", function () {
|
|
|
- self.$emit("sendContnet", self.ckeditor.getData());
|
|
|
- });
|
|
|
- self.loading = false
|
|
|
+ this.ckeditor = CKEDITOR.replace(this.id, this.editorConfig)
|
|
|
+ this.ckeditor.once('instanceReady', () => {
|
|
|
+ if (this.destroyed) return
|
|
|
+ this.editorReady = true
|
|
|
+ this.syncContent()
|
|
|
+ })
|
|
|
+ this.ckeditor.on("change", () => {
|
|
|
+ if (this.ckeditor) {
|
|
|
+ this.$emit("sendContnet", this.ckeditor.getData())
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } catch (error) {
|
|
|
+ console.error('CKEditor initialization failed:', error)
|
|
|
+ } finally {
|
|
|
+ this.loading = false
|
|
|
+ }
|
|
|
},
|
|
|
data: function () {
|
|
|
const self = this;
|
|
|
return {
|
|
|
id: parseInt(Math.random() * 10000).toString(),
|
|
|
ckeditor: null,
|
|
|
+ editorReady: false,
|
|
|
editorConfig: {
|
|
|
versionCheck: false,
|
|
|
dragDrop: false,
|
|
|
@@ -77,12 +104,21 @@ export default {
|
|
|
watch: {
|
|
|
// 监听prop的变化,更新ckeditor中的值
|
|
|
content: function () {
|
|
|
- if (this.content !== this.ckeditor.getData()) {
|
|
|
- this.ckeditor.setData(this.content);
|
|
|
+ this.syncContent()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ syncContent() {
|
|
|
+ if (!this.ckeditor || !this.editorReady) return
|
|
|
+
|
|
|
+ const content = this.content || ''
|
|
|
+ if (content !== this.ckeditor.getData()) {
|
|
|
+ this.ckeditor.setData(content)
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
+ this.destroyed = true
|
|
|
// 组件销毁前释放CKEditor资源
|
|
|
if (this.ckeditor) {
|
|
|
this.ckeditor.destroy();
|