WYSIWYG editor for TW5

[Andy Pastuszak]

Is there any way to incorporate a WYSIWYG editor in TW5?

[BJ]

Hi Andy,
there is a WYSIWYG editor plugin here:
bjtools.tiddlyspot.com

cheers

BJ

[Andy Pastuszak]

Nope.  No WYSIWYG plugin or editor at that link.

[BJ]

try here
http://bjtools.tiddlyspot.com/#VisualEditor

[Andy Pastuszak]

Ok, the last time Visual Editor just loaded a bunch of HTML.  This time I'm getting a WYSIWYG toolbar.  Thanks!

[Tobias Beer]

try here
http://bjtools.tiddlyspot.com/#VisualEditor

What I get on chrome / win 8.1 is no editor but that dreaded javascript error box.

Best wishes, Tobias.

[Tobias Beer]

What I get on chrome / win 8.1 is no editor but that dreaded javascript error box.

At a second attempt, I get this...

 Best wishes, Tobias.

[Tobias Beer]

Hi BJ,

 

http://bjtools.tiddlyspot.com/#VisualEditor

What's also unfortunate is that there seems to be no macro support whatsoever. So, it's an either TiddlyWiki or html thing. At that point, I gladly resign from using ckeditor.

Best wishes, Tobias.

[BJ]

I don't see a error with chrome on linux. - my guess is that there is some type of temporal problem (and that the ckeditor lib is throwing an error)- when the lib is called for the first time it loads a number of source files that are then cached - a  solution evades me at present.

BJ

[BJ]

what do you mean by "macro support"

[Tobias Beer]

what do you mean by "macro support"

I mean being able to use some wiki-syntax, above all macros, within the x-htmlp representation, e.g. <<version>> as the most simple example.

Best wishes, Tobias.

[BJ]

The extension is implemented as a widget, you can call it like any other widget eg :

<$edit-html tiddler="test" field="text"/>

types are mapped to 'edit widgets' by the edit widget (the edit widget re-writes the widget tree)

<$edit>

using configurations tiddlers, eg

$:/config/EditorTypeMappings/text/vnd.tiddlywiki

[Stephen Frey]

Hello,

Thank you for developing a WYSIWYG solution.

I can't get the editor to load in my setup. Using Chrome version 58, Mac OSX 10.12. Seems like a standard setup. Is there anything in particular I should do to my browser to be able to install VisualEditor? 

If helpful, I will bitcoin/paypal ~$30 to whoever can send me a complete series of steps / plug-and-play zip file to get it to work. 

Thank you! 

[Birthe C]

Goto http://bjtools.tiddlyspot.com. Drag the plugin to your own tiddlywiki. Save and refresh your TW. From the plugin tiddlers open $:/plugin/bj/visualeditor/includelib an insert the library:https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.6.2/ckeditor.js

When you want to use it you have to change the tiddlers type to text/x-htmlp. When the plugin is installed, you will find it in the selectbox.


Birthe

[OGNSYA]

Is TW5 able to offer a wysiwyg editor at the moment?

In this 2019 gh thread Jermolene suggests it could be doable, due to recent developments.

Other than that, the only solution I've found for this is CKEditor (in this 2017 thread - which is why I'm reviving it). However, I followed the steps above and it didn't work in my TW.  I get the message "loading ckeditor" where the editor should be. I tried both - downloading the latest version in the ckeditor website, and using the online js library. Same thing. 

Anyone has/had any luck making wysiwyg work (with CK or anything else)?

I understand that this is not a priority for many of TW hardcore users, but for many of us it's very important.

I'm not much of a coder, but could try making this work if I got some pointers from more expert users...

[BJ]

I am using  the 4.3.2 version of the ckeditor, get it from here:

https://ckeditor.com/ckeditor-4/download/releases/

the link to http://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.3.2/ckeditor.js seems to be a bit unreliable at the moment......

cheers

BJ

[Mat]

OGNSYA wrote:

Is TW5 able to offer a wysiwyg editor at the moment?

Thing is... what would that mean?

It is perhaps clear that //this// could be displayed like this in the editor. But what about {{{ [tag[number]] }}} ? Should this be displayed in the editor as e.g one, three, two ...? What if you want to edit the filter to sort differently, how do you access the filter?

I'm not saying it's impossible to do something wysiwyg'ish but the above question would probably have to be clarified first.

So, no, TW5 doesn't really offer any WYSIWYG editor as far as I know...

<:-)

[Mark S.]

I used Birthe's instructions (the post prior to yours) and it worked immediately.

What is your setting for $:/plugin/bj/visualeditor/includelib ?

Are you running single file or node?

Don't forget that for plugins to work, your TW file has to be saved and reloaded.

Good luck!

[Mark S.]

The 4.6.2 links seems to work. But I didn't test it hard.

[Mat]

Mat wrote:

So, no, TW5 doesn't really offer any WYSIWYG editor as far as I know...

Or, evidently, maybe I should just shut up. 

<:-)

[OGNSYA]

Yep. My mistake! I'm using TiddlyDesktop and thought a reload was enough. I had to close and reopen, now it works! 

@Mat: Please don't shut up! 

I understand what you explained, that things like that would need to be solved...

Maybe have a special tag for such codes (something akin to the "red text" in LyX, for those familiar with that).

In the editor, any content generated from code wouldn't be editable - it would behave like a block, that when double(or right)-clicked, would reveal the code for editing.

Now I need to figure out a way to make it work for what I'm trying to do.

I would like to be able to edit my tiddlers directly, from View mode. 

I set it up so that I use a Temporary Tiddler, which allows editing the text and other fields from the desired tiddler.

I'm not sure if this makes sense (or if it might bring up any issues). But I like the fact that it is direct (no changing between modes), and that update happens instantaneously (no need to Save when done editing).

This is working.

However now I'm trying to make that text field (in the Temporary Tiddler) use the visual editor. No luck yet (it shows the html output instead). Any ideas?

Will try hacking at it some more meanwhile!

[OGNSYA]

I'm thinking my use of the word "tag" in my previous message could be confusing, since it's different that the way the word tag is used in TW .

What I meant is to tag in the sense of defining a block. Something like <tw> </tw>

[Mat]

OGNSYA wrote:

I would like to be able to edit my tiddlers directly, from View mode. 

Well, there is still a visual difference between when you edit something and when you only view it - even if the visual difference is the only the display of an editor toolbar. This means there are still two "modes". What I think people mean when they (including you) request "edit in view mode" is that view mode and edit mode are more visually similar and to avoid the very "explicit" actions of going up to an edit button and click it. What could be done is to e.g make the editor use the same white background colour and the same font and have the entering of edit mode be different from the edit button; e.g clicking the text itself could be the button (...but then, how do you click a link?) Just as we speak, some of the big boys are creating some mechanism to trigger actions when clicking in the editor. Such a thing could perhaps be used to trigger something in the editor so it goes back to view mode.

<:-)

[OGNSYA]

Could be (well, probably is) what you said.

But (I think) I'm trying something a bit different (and probably stupid).

The way I'm doing it, I'd never (or rarely) actually open a tiddler in Edit mode.

I'd always open an instance of a Temporary Tiddler template, which would grab all relevant info from the tiddler I actually want to edit.

So, for example, if I want to edit Tiddler A, I'd click on it, but in the background I'd actually get a new Temporary Tiddler, which would have text fields that connect to the ones in the actual tiddler (ie., most of the time I'd be in View mode in that Temporary Tiddler, but really editing the data in the target tiddler).

I'm trying to put together a demo for this. Maybe that will make more clear what I'm saying (and probably why it's wrong).

Right now my challenge is making the aforementioned CK visual editor work in the text fields in the Temporary Tiddler.

I had this:

<$edit-text tiddler="Name of Tiddler currently being edited" field="text"  />

Which works fine. But doesn't play well with the CKEditor.

I thought I could use the correct editor just by adding this:

<$edit-text tiddler="Name of Tiddler currently being edited" field="text"  type="text/x-htmlp"   />  

But no luck ..

[BJ]

its like this:

<$edit-html tiddler="test" field="text"/>

BJ

[Saq Imtiaz]

@Mat: You're not wrong Mat in so far as that there is no WYSIWYG editor for TW that works with wikitext.

I think the best option in the near future for those that really want WYSIWYG is to wait for a prosemirror markdown plugin. Which might not be far off from the sounds of this tweet:
https://twitter.com/NicolasPetton/status/1266088690104905729?s=19

Still not wiki text but markdown is more user-friendly than HTML for most users. If HTML does the trick for you then you're already good to go.

[Saq Imtiaz]

@ognsya you might save yourself some work by adapting the editing technique from:

https://groups.google.com/forum/m/#!topic/tiddlywiki/lQ1N1t-0Gtw

[OGNSYA]

@BJ Thanks for that! How did I miss this... 

I might be googling this wrong things. Where could I have found this? 

@Saq Thanks! I'll check it out!

[Lin Onetwo]

I'm always planning to make w WYSIWYG editor for tw, I think it can be done by:

1. single click to edit style only text like //this//, right-click and choose "edit" in the context menu to edit macro or widget

2. this means we are editing things in "block level", we can know how to group similar things into "block" by traversing AST of parsed wikitext

3. we may have to hijack the rendered tiddler, replace DOM of the block we click on, with an input textfield, and that small text editor will change tiddler's text.

I'm pretty interested in this. There still are lots of things to experiment.

But I'm recently working on a Git-based TiddlyWiki Desktop variant, so I'm not working on this topic.

Lin Onetwo

[OGNSYA]

@Lin that sounds great!

I tried a few things (basic, since I'm not really a coder), but no success.

[bluespire]

I'm running node. I'm having trouble getting Visual Editor to work. I took all the tiddlers that were BJ's TW and exported them to .tids and placed them in a plugins folder, and then modified the tiddler for the path. It still doesn't load. Any ideas?

[BJ]

Hi Bluespire

The installation under node is the same as for a standalone tiddlywiki

[bluespire]

I'm not sure what I'm doing wrong. I tried a couple of different browsers, and it's still not loading. It has the text that it's trying to load, but never does.

[bluespire]

Hmm. Well it has to be some kind of user error. I switched my local path of the cloudflare one, and it loaded immediately. I'll play around with it.

[bluespire]

@BJ 

I tried playing with it some more, and still no luck on the local instance. I've tried a bunch of ways, but here is my current setup. Maybe you can help me figure this out.

• Windows 10
• NodeJS version of TiddlyWiki.
• Location of NodeJS:  C:\Users\Persona\Apps\node\node.js
• Location of TiddlyWiki:  C:\Users\Persona\Apps\TiddlyWikis\Personal
• Location of ckeditor.js: C:\Users\Persona\Apps\TiddlyWikis\Personal\ckeditor\ckeditor.js
• Current body of "$:/plugin/bj/visualeditor/includelib": <script src='file:\\\c\users\Persona\Apps\TiddlyWikis\Personal\ckeditor\ckeditor.js'></script>
• Using the "Full" version of ckeditor from official website.
  

[Mark S.]

On Sunday, December 27, 2020 at 7:42:14 PM UTC-8 bluespire wrote:

• Current body of "$:/plugin/bj/visualeditor/includelib": <script src='file:\\\c\users\Persona\Apps\TiddlyWikis\Personal\ckeditor\ckeditor.js'></script>

I would be surprised if the browser allowed you mix a web page (even if local) with a local file path.

Can you navigate to  http://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.3.2/ckeditor.js ?

(I can right now, but understand it may go down).

If so, you might try changing src above to

src="http://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.3.2/ckeditor.js"

 

TW on node now has a way to serve up static files. Not sure if it will serve up js files though. But if you wanted your own offline (not on the net) version, you would need to serve up ckeditor.js somehow, I think.

See https://tiddlywiki.com/#Using%20the%20integrated%20static%20file%20server

So you would make a files directory, put ckeditor.js in it, and change src to the path ckeditor.js has on your local server.

[bluespire]

@Mark @ BJ

Mark, that worked brilliantly. FYI, it was working using the cloudflare link, but I wanted to customize the package, and that can only be done with a local file.

Thanks so much!

BJ, can you update your documentation for this nodejs solution?

[bluespire]

I've got it to work, for the most part. Now I'm struggling to figure out why I can't get file pasting and uploading to work (for screenshots). No matter what I try, I keep getting a console error about the upload variable not being set. Now, most of the examples that I see for setting this up use a JS script to instantiate ckeditor in the body of an HTML page. I'm not sure what the analog to that is in TW5. Anyone have any ideas on this?

[BJ]

I am not sure what uloading means here - but if you select the tiddler type to be 'text/x-htmlp' then you can use the tiddlywiki image syntax - [img['path to image']] within the ckeditor.

[bluespire]

I don't want to use the native drag/drop/paste for images that TW5 uses. It's WAY to unwieldy for quickly taking notes and screenshots. I have to take these during meetings and presentations. CKeditor supports pasting images directly into the editor, but it requires a little bit configuration. If you can help me understand where in the code the editor is actually instantiated (the <script/> tags that call the editor), then I might be able to figure it out. I tried searching for it, but couldn't find it.

[BJ]

I don't have a problem with pasting images with  my setup - I use 4.3.2 of the ckeditor lib. However I do not past images dirrectly into ckeditor as this creates large tiddlers.

As tiddlywiki is a dynamic webpage, the plugin for ckeditor uses javascript to call the ckeditor lib thru its api - it does not use the script tags. I have included the abilty to add config information thru the tiddler

$:/plugins/bj/visualeditor/config.json 

cheer

BJ

[bluespire]

OK. You pointed me in the right direction. I defined the necessary ckeditor variables in  $:/plugins/bj/visualeditor/config.json  to make uploading work. Now I have the upload tab. However, I still have a blocker. When I try to upload an image through ckeditor I get the following error in the console: Status Code: 403 'X-Requested-With' header required to login to 'My ~TiddlyWiki'. I feel like I'm almost there . . . My wiki is just a basic nodejs instance IP:8080. All my ckeditor files and upload folder are in the ./files folder. I have no authentication enabled. I'm not quite sure why I'm getting a 403. Googling it doesn't really give me a solution, so I'm thinking it's a TW-specific issue.

[BJ]

That message is produced by the tw server here:

    if(!this.csrfDisable && authorizationType === "writers" && request.headers["x-requested-with"] !== "TiddlyWiki") {
        response.writeHead(403,"'X-Requested-With' header required to login to '" + this.servername + "'");
        response.end();
        return;       
    }

I do not know if the tiddlywiki server will support upload....

[Ibby (parc6502)]

Ooh, I hadn't heard of prosemirror before, that looks really promising.

It's beyond me to make use of it, but there is another open-source WYSIWYG markdown editor called Mark Text. Maybe someone more literate in these things would be able to make use of their codebase.

[bluespire]

Is there any way we could get Jeremy to weigh in on this? I'm not sure if this is a bug or a CKEditor configuration problem.

[BJ]

I doubt if this is a bug. I have no idea if tiddlywiki supports anything other than saving tiddlers... You could open an issue on github with the tiddlywiki repository to try and get some expert advise.

You could run your own server to support ckeditor upload requests.

[Jeremy Ruston]

It sounds like you're running into TW5's CSRF protection. You can either ensure the specified header is present, or disable CSRF protection:

https://tiddlywiki.com/#WebServer%20Parameter%3A%20csrf-disable

Best wishes

Jeremy

--

Jeremy Ruston

jer...@jermolene.com

https://jermolene.com

On 16 Jan 2021, at 09:15, BJ <bugg...@gmail.com> wrote:



--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/53e9c466-e54a-437b-b7c5-ea43ca4540fen%40googlegroups.com.

[Lin Onetwo]

For anyone who search to here via google, please see https://talk.tiddlywiki.org/t/demo-of-a-new-wysiwyg-editor-slate-write-unstable-alpha-stage/2788 in the tw talk forum, I want to make a wysiwyg editor that can save to wikitext.