Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Re: Improved Text Editor Capability
candyman wrote #296222:
I know Flarum: really awesome.
I’m discovering new things about Flarum everyday.
Also, learning much from Toby and Franz as they go about coding and supporting their project.
BTW :P
Oh, that looks nice.
The first time that sidebar came out the left side at Flarum, scared the sh*t out of me.
We Love TXP . TXP Themes . TXP Tags . TXP Planet . TXP Make
Offline
Re: Improved Text Editor Capability
hcgtv wrote #296221:
Robert, been playing around with Flarum, it’s where the main developer of FluxBB is now stationed. […]
Would this fall under a feature idea or a heads up?
I know I must not feed the trolls but here it goes…
This thread is titled “Improved Text Editor Capability”. I am subscribed to it because I want to learn insights about what members of our community are thinking with regards to syntax highlighters, WYSIWYG editors, formatting toolbars and the like.
I am tempted to cancel this subscription despite my genuine interest in this topic because valued members of this community have hi-jacked this thread to discuss forum policies and other unrelated paraphernalia which do have their own places on this site.
To add insult to injury, some of these members are regulars or carry a title of “Moderator” and are entitled or even encouraged to keep this forum tidy and relevant which – in my book – includes the effort to keep discussions on topic as far as possible.
You need not emigrate to Facebook/G+/Twitter to chat about $things, please stay here and find a forum. But: Use your imagination to find a suitable place, and do not hi-jack other people’s mental bandwidth.
</rant>
Offline
Re: Improved Text Editor Capability
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Online
Re: Improved Text Editor Capability
Another consideration we need to think about is where the formatting bar would appear in the admin side. Obviously the write body textarea is a given, but there is also excerpt, and potentially any other field that accepts textile/markdown (including the custom field proposal at v4.8).
This is another of many reasons why I categorically don’t want a wysiwyg such as CKeditor. Even Trix is probably unsuitable for core after some testing of it (and not least because it doesn’t support markdown or textile yet and may never do).
I’ll say again, a formatting bar helper that gives shortcuts to common textile/markdown is my preferred route. You can also then omit the textile help panel and just provide a link to txtstyle or whatever – saving some panel clutter.
Also, after testing plenty of inline helpers (the ones that contextual popup when you highlight a word or sentence), I’ve yet to find one that plays nicely with iOS (which already has its own native popup UI that tends to then get messed up). If someone has found one they think works let me know, but for my money the standard toolbar above textarea works safest and is simple to understand from UX perspective, so I’m leaning towards that UI.
Offline
Re: Improved Text Editor Capability
Destry wrote #296214:
The plugin requires adding CodeMirror to the root in its own folder, which is baggage, of course…
This. Judge by yourself: go to codemirror.net/mode/textile/index.html and tape something like
h2. Textile test
I enjoy _Textile_ very much!Now, right-click it and inspect the code behind the syntax highlighting:
<div class="CodeMirror cm-s-default">
<div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 43px; left: 258px;">
<textarea tabindex="0" spellcheck="false" autocapitalize="off" autocorrect="off" style="position: absolute; padding: 0px; width: 1px; height: 1em; outline: medium none;" wrap="off"></textarea>
</div>
<div style="bottom: 17px;" cm-not-content="true" class="CodeMirror-vscrollbar">
<div style="min-width: 1px; height: 0px;"></div>
</div>
<div style="right: 17px; left: 34px;" cm-not-content="true" class="CodeMirror-hscrollbar">
<div style="height: 100%; min-height: 1px; width: 0px;"></div>
</div>
<div style="height: 17px; width: 17px;" cm-not-content="true" class="CodeMirror-scrollbar-filler"></div>
<div cm-not-content="true" class="CodeMirror-gutter-filler"></div>
<div draggable="true" tabindex="-1" class="CodeMirror-scroll">
<div style="margin-left: 30px; margin-bottom: -17px; border-right-width: 13px; min-height: 67px; min-width: 231px; padding-right: 0px; padding-bottom: 0px;" class="CodeMirror-sizer">
<div style="position: relative; top: 0px;">
<div class="CodeMirror-lines">
<div style="position: relative; outline: medium none;">
<div class="CodeMirror-measure">
<pre>x</pre>
<div class="CodeMirror-linenumber CodeMirror-gutter-elt">
<div>1</div>
</div>
</div>
<div class="CodeMirror-measure">
<pre class="CodeMirror-line"><span><span cm-text=""></span></span></pre>
</div>
<div style="position: relative; z-index: 1;"></div>
<div style="" class="CodeMirror-cursors">
<div style="left: 228px; top: 39px; height: 20px;" class="CodeMirror-cursor"> </div>
</div>
<div style="" class="CodeMirror-code">
<div style="position: relative;">
<div style="left: -30px;" class="CodeMirror-gutter-wrapper">
<div style="left: 0px; width: 21px;" class="CodeMirror-linenumber CodeMirror-gutter-elt">1</div>
</div>
<pre class=" CodeMirror-line "><span><span class="cm-header cm-header-2">h2. Textile test</span></span></pre>
</div>
<div style="position: relative;">
<div style="left: -30px;" class="CodeMirror-gutter-wrapper">
<div style="left: 0px; width: 21px;" class="CodeMirror-linenumber CodeMirror-gutter-elt">2</div>
</div>
<pre class=" CodeMirror-line "><span><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div style="left: -30px;" class="CodeMirror-gutter-wrapper">
<div style="left: 0px; width: 21px;" class="CodeMirror-linenumber CodeMirror-gutter-elt">3</div>
</div>
<pre class=" CodeMirror-line "><span>I enjoy <span class="cm-em">_Textile_</span> very much!</span></pre>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="position: absolute; height: 13px; width: 1px; top: 67px;"></div>
<div style="height: 313px;" class="CodeMirror-gutters">
<div style="width: 29px;" class="CodeMirror-gutter CodeMirror-linenumbers"></div>
</div>
</div>
</div>How can this mess be part of any core? The author did a great work, but it’s like playing ping-pong with a hockey cross. If one day some web language (CSS?) evolves enough to easily style parts of text, I will be two hands for syntax highlighting features in the core.
Online
Re: Improved Text Editor Capability
philwareham wrote #296231:
I’ll say again, a formatting bar helper that gives shortcuts to common textile/markdown is my preferred route. You can also then omit the textile help panel and just provide a link to txtstyle or whatever – saving some panel clutter.
So let’s include rah_textile_bar in the core… It already exists, it is clean, light, easy to use and could support Makdown. Then we could talk about a wysiwyg editor as a plugin?
Offline
Re: Improved Text Editor Capability
etc wrote #296236:
<div class="CodeMirror cm-s-default">...
Would you mind to expand on how this rather illegible soup of div elements affects your user experience besides aesthetical dismay? I don’t expect a large fraction of users to view source for the text entry area in their CMS as long as the published markup fulfills their needs.
I could think of just on reason: Performance degradations on mobile browsers and other underpowered hardware. OTOH, this will rectify itself in just a few months if we align our vision along the phone vendors’ claims that any current high-end phone offers desktop performance.
Offline
Re: Improved Text Editor Capability
philwareham wrote #296231:
I’ll say again, a formatting bar helper that gives shortcuts to common textile/markdown is my preferred route. You can also then omit the textile help panel and just provide a link to txtstyle or whatever – saving some panel clutter.
+1 That was my #2, however it can best be done.
etc wrote #296236:
How can this mess be part of any core?
First of all, I’m not saying CodeMirror should be core. Never was. spf_writer is a plugin. Whether or not something like CodeMirror is ever added to core, it’s not for me to say. What I am saying is, if the same effect (syntax highlighting, or whatever it’s called) can be done somehow, it would be nice.
Judge by yourself: go to codemirror.net/mode/textile/index.html and tape something…
Why would I go there? I’m not using that site to write copy.
Here’s some actual copy in a local install using the plugin…
Here’s how it looks in the HTML preview of the admin-side:
<h3>Testing spf_writer</h3>
<p>Here I’m using <em>Textile</em>, and unlike the rainbow-colored treatment TextMate gives it, spf_writer uses a less innocuous color scheme: Black-bold for all headers (h1–h6), <strong>strong</strong>, and <b>bold</b>, of course. Black-italic for <em>emphasis</em> and <i>italic</i>, as you would expect. Red for lists…</p>
<ol>
<li>both ordered</li>
</ol>
<ul>
<li>and unordered</li>
</ul>
<p>And a metallic gold for <a href="http://domain.tld">links</a>, <code>inline code</code>, and</p>
<pre><code>block code</code></pre>And here’s what is shown if I look at the page source in my browser (both Safari and Firefox):
Where’s all the extra soup ingredients? I’m a doing it wrong?
Offline
Re: Improved Text Editor Capability
wet wrote #296240:
Would you mind to expand on how this rather illegible soup of
divelements affects your user experience besides aesthetical dismay?
Let’s put it in the core-integration perspective: highlighting text this way just looks as a hack, a dead-end. Hacks can work (and I like the clever ones), but it’s a plugin territory for me.
I could think of just on reason: Performance degradations on mobile browsers and other underpowered hardware. OTOH, this will rectify itself in just a few months if we align our vision along the phone vendors’ claims that any current high-end phone offers desktop performance.
There are also lower power consumption trends, but I wouldn’t speculate on it.
Online
Re: Improved Text Editor Capability
Destry wrote #296242:
And here’s what is shown if I look at the page source in my browser (both Safari and Firefox)…
Don’t look at the page source, but right-click on the textarea in the “edit” mode and then “Inspect element”. HTML preview is not related to the syntax highlighter, unless spf_writer tweaks it, but I can not test…
Online
Re: Improved Text Editor Capability
When I do as you describe, this is what I see…
In any case, this shouldn’t be an argument. As I said, it would be nice to have syntax highlighting if it can be done in a reasonable manner. But something tells me the horse committee is divided on that issue, whether about having it at all or how to do it. That’s why plugins exist. ;)
Offline
Re: Improved Text Editor Capability
Any code editor (with syntax highlighting) and text formatting bar would probably have to be separate things – since no current WYSIWYG I’ve looked at fulfils both tasks satisfactorily for me. Since I never code in the admin side I wouldn’t personally be interested in a core code editor – even more so once v4.8 lands with proper theme (skin) support in flat files – but I understand others would (and indeed there are plugin authors providing that solution already).
The audience for a text formatting bar is greater, since the majority of end users will be content creators as opposed to site designers. Hence my interest in seeing a core solution.
Offline