small cleanup and editor/preview edit draft

This commit is contained in:
Dennis Eichhorn 2019-06-20 13:22:59 +02:00
parent 943dcfe78e
commit 356f554830
5 changed files with 39 additions and 33 deletions

View File

@ -1,16 +1,18 @@
import { Markdown } from '../../../jsOMS/Utils/Parser/Markdown.js';
export class Editor {
constructor (id)
{
this.id = id;
this.editor = document.getElementById(id);
this.id = id;
this.editor = document.getElementById(id);
this.markdown = new Markdown.Converter({extensions: [], sanitize: true});
};
bind ()
{
const editorButtons = document.querySelectorAll('#' + this.id + '-tools .editor-button'),
editorTitle = this.editor.getElementsByClassName('editor-title')[0],
editorContent = this.editor.getElementsByClassName('editor-content')[0],
editorPreview = this.editor.getElementsByClassName('editor-preview')[0],
editorContent = this.editor.getElementsByTagName('textarea')[0],
editorPreview = this.editor.getElementsByTagName('article')[0],
length = editorButtons.length,
self = this;
@ -20,6 +22,10 @@ export class Editor {
self.toolsButton(this, event);
});
}
editorContent.addEventListener('change', function() {
editorPreview.innerHTML = self.markdown.makeHtml(editorContent.value);
})
};
toolsButton (e, event)

View File

@ -47,9 +47,9 @@ class BaseView extends View
$this->addData('text', $view);
}
public function getId() : string
public function renderId() : string
{
return $this->id;
return $this->printHtml($this->id);
}
/**

View File

@ -47,39 +47,39 @@ class TextView extends View
$this->setTemplate('/Modules/Editor/Theme/Backend/Components/Editor/inline-editor');
}
public function getId() : string
public function renderId() : string
{
return $this->id;
return $this->printHtml($this->id);
}
public function getName() : string
public function renderName() : string
{
return $this->name;
return $this->printHtml($this->name);
}
public function getForm() : string
public function renderForm() : string
{
return $this->form;
return $this->printHtml($this->form);
}
public function getPreview() : string
public function renderPreview() : string
{
return $this->preview;
}
public function getPlain() : string
public function renderPlain() : string
{
return $this->plain;
return $this->printHtml($this->plain);
}
public function getTplText() : string
public function renderTplText() : string
{
return $this->tplText;
return $this->printHtml($this->tplText);
}
public function getTplValue() : string
public function renderTplValue() : string
{
return $this->tplValue;
return $this->printHtml($this->tplValue);
}
/**

View File

@ -1,5 +1,5 @@
<!-- todo: here is a bug! Somehow this causes the main flex to not work properly (example tasks and click edit and make windows smaller to see the nav side bar freak out) somehow the overflow-x is messing something up. -->
<div id="<?= $this->printHtml($this->getId()); ?>" class="slider click">
<div id="<?= $this->renderId(); ?>" class="slider click">
<ul class="h-list">
<li><i data-editor-button="a" class="btn editor-button fa fa-lg fa-undo"></i>
<li><i data-editor-button="a" class="btn editor-button fa fa-lg fa-repeat"></i>

View File

@ -1,26 +1,26 @@
<div id="<?= $this->printHtml($this->getId()); ?>" class="tabview tab-2 m-editor">
<div id="<?= $this->renderId(); ?>" class="tabview tab-2 m-editor">
<ul class="tab-links">
<li><label for="<?= $this->printHtml($this->getId()); ?>-c-tab-1"><?= $this->getHtml('Text', 'Editor'); ?></label>
<li><label for="<?= $this->printHtml($this->getId()); ?>-c-tab-2"><?= $this->getHtml('Preview', 'Editor'); ?></label>
<li><label for="<?= $this->renderId(); ?>-c-tab-1"><?= $this->getHtml('Text', 'Editor'); ?></label>
<li><label for="<?= $this->renderId(); ?>-c-tab-2"><?= $this->getHtml('Preview', 'Editor'); ?></label>
</ul>
<div class="tab-content">
<input type="radio" id="<?= $this->printHtml($this->getId()); ?>-c-tab-1" name="tabular-1" checked>
<input type="radio" id="<?= $this->renderId(); ?>-c-tab-1" name="tabular-1" checked>
<div class="tab">
<textarea
style="height: 300px"
placeholder="&#xf040;"
name="<?= $this->printHtml($this->getName()); ?>"
form="<?= $this->printHtml($this->getForm()); ?>"
data-tpl-text="<?= $this->printHtml($this->getTplText()); ?>"
data-tpl-value="<?= $this->printHtml($this->getTplValue()); ?>">
<?= $this->printHtml($this->getPlain()); ?>
</textarea><input type="hidden" id="<?= $this->printHtml($this->getId()); ?>-parsed">
name="<?= $this->renderName(); ?>"
form="<?= $this->renderForm(); ?>"
data-tpl-text="<?= $this->renderTplText(); ?>"
data-tpl-value="<?= $this->renderTplValue(); ?>">
<?= $this->renderPlain(); ?>
</textarea><input type="hidden" id="<?= $this->renderId(); ?>-parsed">
</div>
<input type="radio" id="<?= $this->printHtml($this->getId()); ?>-c-tab-2" name="tabular-1">
<input type="radio" id="<?= $this->renderId(); ?>-c-tab-2" name="tabular-1">
<div class="tab">
<section class="box wf-100">
<article><?= $this->getPreview(); ?></article>
<article data-tpl-text="<?= $this->renderTplText(); ?>" data-tpl-value="<?= $this->renderTplValue(); ?>"><?= $this->renderPreview(); ?></article>
</section>
</div>
</div>