Our site www.viart.com site is operated by latest Viart Shop 5 with default Clear design
Topic Information
ned (Guest)
ned (Guest)
Creating custom pages from existing html files using "Get body from file" works well but "bypasses" the content management system.
 
 
 
Many end users need this as they perhaps don't understand html and need to alter a page which they can't do if its in a file.
 
 
 
The inbuilt javascript editor (in the CMS custom page creation etc.) seems to understand a rather limited subset of html and consequently if you cut and paste an existing html file into it sometimes bits will be rejected as it tries to parse it. Hence you can loose or alter some or all of the original design.
 
 
 
I've experimented replacing the existing js/editor.js with TinyMCE from Moxiecode AB ( http://tinymce.moxiecode.com ) which works very well. When installed by copying the TinyMCE engine into the js folder you can replace the relevant section of templates/admin/admin_page.html with one of the example codes supplied to call the engine.
 
 
 
Use the "Edit HTML Source" button of Tiny and copy and paste the exiting html file content into the popup. Then "update" which parses it and passes the code back into the textarea window. It's then stored in the normal way in the SQL table "va_pages".
 
 
 
Its also possible to create a multi-language CMS custom page by creating several separate html sections in different languages in the one page and enclosing each section with language delimiters [en]..[/en][fr]..[/fr] etc.
 
eugene
eugene
Hi Ned,
 
Sorry for trouble with forum post showing. We've fixed it.
 
As for different language in page's source file we can add such possibility in the next release of ViArt software for a reasonable fee. Please contact our Support Team to discuss this feature in details.
 
WBR,
ViArt Support Team
 
SajMalik
SajMalik
Ned - that's very helpful - for a while I have considered using TinyMCE but did not know how.
I have installed it to: /js/tiny_mce/tiny_mce.js
and edited the admin_page.html file header :
 
<html><head><title>..::Administration :: Edit Custom Page ::..</title>
<link rel="stylesheet" href="../styles/editor.css" type="text/css">
<link rel="stylesheet" href="../styles/admin.css" type="text/css">
<script language= "JavaScript" type= "text/javascript" src= "../js/tiny_mce/tiny_mce.js"></script>
</head>
 
Unfortunately it has not replaced the standard html editor. Do you know what I have missed - or done wrong?
 
Thanks Chris
 
Ned
Ned
Chris,
If you look down to about line 147 - the text area named page body - you have to replace the call to the standard editor with the TinyMCE one. You can use any of the example scripts depending on how complex you want Tiny to be.
My page now goes.....
 
<textarea class="text" name="page_body" style="display: block; width: 565px; height: 400px;">{page_body}</textarea>
<!-- TinyMCE -->
<script language="javascript" type="text/javascript" src="../js/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init(
 
etc......................
</script>
<!-- /TinyMCE -->
</td>
</tr>
<tr class="middle">
 
HTH
 
SajMalik
SajMalik
Ned - thank you for your help . . . but I have a problem.
 
I have installed all the TinyMCE files in folder "tiny_mce" exactly as the downloaded.
I am using it for product descriptions.
I have modified file admin_product.html in just the same way you show above and the first lines that I needed to edit are:
 
<!-- TinyMCE -->
<script language="javascript" type="text/javascript" src="../tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
theme : "advanced",
mode : "exact",
elements : "elm1,elm2",
save_callback : "customSave",
content_css : "advanced.css", ...
 
Yet all I get is the html code. I have missed something or done something wrong?
 
Ned
Ned
Did it work in admin_pages.html ?
 
SajMalik
SajMalik
Hadn't tried - but have now - no still a blank field
 
Ned
Ned
As long as you are copy and pasting the _entire_ example code between the <!--TinyMCE ---> flags it should work. You are calling tiny_mce.js correctly and it works here and I'm using the advanced script like you.
 
SajMalik
SajMalik
I have been carefully through the script.
I though that I might have a problem with the path but that seemed OK.
There is one thing - perhaps I can ask you - the script calls for:
content_css : "advanced.css",
- I cannot find a file advanced.css in the list of folders in my tiny_mce folder. I presume that this could be my problem.
I have check the download, though, and the file does not appear.
 
Ned
Ned
Im using the "example_full" script and it links to example_full.css which is not present but Tiny does still work I presume because its picking up inherited css information.
 
ndmitry (Guest)
ndmitry (Guest)
Somebody tried to include Viart WYSIWYG editor or TinyMCE for block_forum_topic?
 
Thanks
 
vic140
vic140
Hey Chris or anyone else who succeeded with this,
 
Did you ever able to get tinymce to replace the ViArt html editor? If so, would you have any step by step directions? Tinymce is fantastic and really well supported, I hope ViArt will switch to it!
 
Thanks!
Greg
 
SajMalik
SajMalik
I paid VIART to add their html aditor to other pages - that works OK for me - who knows you may find this improvement in the next release in the New Year?
 
Chris
 
Samu (Guest)
Samu (Guest)
Could not find the TinyMCE engine installed at modules/tinymce/tinymce/
 
vic140
vic140
Chris, I went in on your html editor for the order email feature, but am embarrassed to say I have not yet updated the file and tried it! Did you by chance have ViArt set up a better editor for the product pages, etc. also?
 
For me, either TinyMCE or FCKEditor would be so much better, for easier editing of tables, links, images, headers, etc. A lot of shopping carts and autoresponder programs use one of these two open source html editors.
 
I am looking forward to the update!!! I know software updates rarely go on schedule, but does anyone know a rough intended date for ViArt's new release?
 
Greg
 
SajMalik
SajMalik
Viart is clear that they will not install third party apps.
 
They may be persuaded to upgrade their editor - or maybe someone will go for this as a custom feature?
 
Chris
 
ewoud (Guest)
ewoud (Guest)
Hi Guys,
if you have some time: try the new ckeditor!
it takes some work but is not very hard to implement. I am still working to get image uploading working and will keep you posted when I get some results.
getting the editor working is no problem, but it would be nice if it would allow for easy uploads of images and such...
for this you have to install ckfinder and to get this working safely within viart is a bit difficult.
 
as for installing the editor:
upload ckeditor files in js directory
 
replace <script language="JavaScript" type= "text/javascript" src="../js/editor.js"></script> from the head of your page with js/ckeditor/ckeditor.js
 
then search for the textarea bits which allow you to write your info e.g.:
<script language= "JavaScript" type= "text/javascript">
<!-- var editor_sd = new VA_HTMLeditor('content_sd','../','{html_editor}');
editor_sd.text_field_name = 'short_description';
editor_sd.formname = 'record';
editor_sd.css_file = '{css_file}';
editor_sd.editor_type = 'manuals_category_editor';
editor_sd.displayEditor('editor_sd', 565, 100);
//-->
</script>
 
replace this with:
<script type="text/javascript">
CKEDITOR.replace( 'COPY THE NAME OF THE TEXTAREA HERE' );
</script>
and you're set to go.
 
there used to be problems when calling multiple instances of an editor on the same page (short description/fulldescription etc), but this one seems to work differently...
I'll let oyu know when I get the other thing working...
 
ewoud (Guest)
ewoud (Guest)
OK,
got a little further, at least everything works...
here's how to do it:
1. install ckeditor in /js/
2. install ckfinder in /js/ (also, config ckfinder)
 
3. replace <script language="JavaScript" type= "text/javascript" src="../js/editor.js"></script> from the head of your page with
<script type="text/javascript" src="path to/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="path to/online/js/ckfinder/ckfinder.js"></script>
 
then search for the textarea bits which allow you to write your info e.g.:
<script language= "JavaScript" type= "text/javascript">
<!-- var editor_sd = new VA_HTMLeditor('content_sd','../','{html_editor}');
editor_sd.text_field_name = 'short_description';
editor_sd.formname = 'record';
editor_sd.css_file = '{css_file}';
editor_sd.editor_type = 'manuals_category_editor';
editor_sd.displayEditor('editor_sd', 565, 100);
//-->
</script>
 
replace with:
 
<script type="text/javascript">
CKEDITOR.replace( 'COPY THE NAME OF THE TEXTAREA HERE',
{
filebrowserBrowseUrl : '../js/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : '../js/ckfinder/ckfinder.html?Type=Images',
filebrowserFlashBrowseUrl : '../js/ckfinder/ckfinder.html?Type=Flash',
filebrowserUploadUrl : '../js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : '../js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : '../js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
});
 
</script>
 
this should do the trick, however there is still a security issue stemming from ckfinder and session authorization so I would recommend to use this only for the admin pages, not for users since the access level permissions cannot be set yet...
this is goign to be tricky, I am gonna need some help with this as I am not geeky enough to get this working...
 
any ideas anyone?
 
ewoud (Guest)
ewoud (Guest)
hey guys,
I don't want to sound over-enthousiastic but I discovered that this will give you the possibility to place divs inside the editor, this opens up enormous possibilities for the design of your page!
 
for this you enter this in the source of the editor, use (code) button:
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 146px; top: 90px;">Here is a floating layer</div>
 
as you can see this has z-index, so overlapping is possible and absolute positioning!
yippie!