From 357d3f4eb103b7c48e9750a0bf8f685cd519d541 Mon Sep 17 00:00:00 2001 From: Tobias Klika Date: Tue, 15 Dec 2020 01:05:16 +0100 Subject: [PATCH] model update for rte --- zero.Web.UI/App/components/forms/rte.vue | 34 +++++++++++++++++------- 1 file changed, 25 insertions(+), 9 deletions(-) diff --git a/zero.Web.UI/App/components/forms/rte.vue b/zero.Web.UI/App/components/forms/rte.vue index 157fa5e5..5871348c 100644 --- a/zero.Web.UI/App/components/forms/rte.vue +++ b/zero.Web.UI/App/components/forms/rte.vue @@ -32,10 +32,11 @@ import Strings from 'zero/helpers/strings.js'; import { debounce as _debounce } from 'underscore'; import { Editor, EditorContent, EditorMenuBubble, EditorMenuBar } from 'tiptap'; + import { baseKeymap } from 'prosemirror-commands'; + import { Plugin, PluginKey } from 'prosemirror-state'; import { - Blockquote, BulletList, CodeBlock, HardBreak, Heading, ListItem, OrderedList, TodoItem, TodoList, - Bold, Code, Italic, Link, Strike, Underline, History + HardBreak, Bold, Code, Italic, Link, Strike, Underline, History } from 'tiptap-extensions'; @@ -56,7 +57,7 @@ }, data: () => ({ - id: 'quill-' + Strings.guid(), + id: 'rte-' + Strings.guid(), blocked: false, onDebouncedChange: null, editor: null @@ -65,8 +66,17 @@ watch: { value() { - this.init(); - } + if (!this.blocked) + { + this.init(); + } + }, + disabled(value) + { + this.editor.setOptions({ + editable: !value + }) + }, }, created() @@ -77,8 +87,8 @@ mounted() { this.editor = new Editor({ + editable: !this.disabled, extensions: [ - new CodeBlock(), new HardBreak(), new Link(), new Bold(), @@ -87,10 +97,15 @@ new Strike(), new Underline(), new History(), + //new Plugin({ + // name: new PluginKey('break2'), + + //}) ], onUpdate: ({ getHTML }) => { - this.onDebouncedChange(getHTML()); + var html = getHTML(); + this.onDebouncedChange(html); }, }); @@ -105,8 +120,9 @@ onChange(content) { - // TODO this will automatically set the cursor to the end, not desired ;-) - //this.$emit('input', content); + this.blocked = true; + this.$emit('input', content); + this.$nextTick(() => this.blocked = false); } },