Jump to content

TinyMCE Обновление до 4 версии


Go to solution Solved by Kosjak76,

Recommended Posts

Захотел обновить редактор текста, выкладываю инструкцию что получилось.

1. скачиваем сам плагин редактора 

2. распаковываем папку "tinymce" которая лежит в архиве по пути "tinymce->js"

3. загружаем ее в "/simpla/design/js" 

4. меняем содержимое файла tinymce_init.tpl (/simpla/design/html) на : 

<script language="javascript" type="text/javascript" src="design/js/tinymce/tinymce.min.js"></script>
<script language="javascript">

  tinymce.init({literal}{{/literal}
    selector: "textarea.editme",
	language : "ru",
	  plugins: [
        "advlist autolink lists link image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons template paste textcolor colorpicker textpattern"
    ],
	    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    toolbar2: "print preview media | forecolor backcolor emoticons",

	content_css :"../design/{$settings->theme}/css/style.css",
	{literal}}{/literal});

</script>

5. добавляем класс "editme" блоку(ам) "textarea" в шаблоне админа, в файлах: 

brand.tpl
category.tpl
delivery.tpl
page.tpl
payment_method.tpl
post.tpl
product.tpl

 

Link to post
Share on other sites
  • Replies 99
  • Created
  • Last Reply

Top Posters In This Topic

А что существенного произошло в новой версии? :huh:

Она кардинально изменилась.

Я для своего блога использовал именно четвертую версию.

Почувствуй разницу http://www.tinymce.com/tryit/basic.php

Edited by Noxter
Link to post
Share on other sites

Она кардинально изменилась.

Я для своего блога использовал именно четвертую версию.

Почувствуй разницу http://www.tinymce.com/tryit/basic.php

 ага, соглашусь существенные изменения 

 

 

Захотел обновить редактор текста, выкладываю инструкцию что получилось.

1. скачиваем сам плагин редактора 

2. распаковываем папку "tinymce" которая лежит в архиве по пути "tinymce->js"

3. загружаем ее в "/simpla/design/js" 

4. меняем содержимое файла tinymce_init.tpl (/simpla/design/html) на : 

<script language="javascript" type="text/javascript" src="design/js/tinymce/tinymce.min.js"></script>
<script language="javascript">

  tinymce.init({literal}{{/literal}
    selector: "textarea.editme",
	language : "ru",
	  plugins: [
        "advlist autolink lists link image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons template paste textcolor colorpicker textpattern"
    ],
	    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    toolbar2: "print preview media | forecolor backcolor emoticons",

	content_css :"../design/{$settings->theme}/css/style.css",
	{literal}}{/literal});

</script>

5. добавляем класс "editme" блоку(ам) "textarea" в шаблоне админа, в файлах: 

brand.tpl
category.tpl
delivery.tpl
page.tpl
payment_method.tpl
post.tpl
product.tpl

спасибо, что поделились  ;)

Link to post
Share on other sites

Мой вариант подключения:

<script language="javascript" type="text/javascript" src="design/js/tinymce/tinymce.min.js"></script>
<script language="javascript">

  tinymce.init({literal}{{/literal}
    selector: "textarea.editor_large,textarea.editor_small",
	language : "ru",
	  plugins: [
        "advlist autolink lists link image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons template paste textcolor colorpicker textpattern"
    ],
	    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    toolbar2: "print preview media | forecolor backcolor emoticons",

	content_css :"../design/{$settings->theme}/css/style.css",
	{literal}}{/literal});

</script>

Больше ничего менять не надо.

Если не работает - скачайте русский язык здесь http://www.tinymce.com/i18n/index.php и положите в папку langs

Link to post
Share on other sites

Мой вариант подключения:

<script language="javascript" type="text/javascript" src="design/js/tinymce/tinymce.min.js"></script>
<script language="javascript">

  tinymce.init({literal}{{/literal}
    selector: "textarea.editor_large,textarea.editor_small",
	language : "ru",
	  plugins: [
        "advlist autolink lists link image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons template paste textcolor colorpicker textpattern"
    ],
	    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    toolbar2: "print preview media | forecolor backcolor emoticons",

	content_css :"../design/{$settings->theme}/css/style.css",
	{literal}}{/literal});

</script>

Больше ничего менять не надо.

Если не работает - скачайте русский язык здесь http://www.tinymce.com/i18n/index.php и положите в папку langs

спасибо, с таким подключением действительно не нужно менять файлы .tpl, мой недочет

Link to post
Share on other sites

почему то перестала работать авто подстановка ссылок и метатегов при добавление новой записи

Я ждал когда кто то это напишет :D

Да такой косяк есть, нужно дописать статью.

Link to post
Share on other sites

Я ждал когда кто то это напишет :D

Да такой косяк есть, нужно дописать статью.

надо, еще и смайлики надо в папке правильно указывать, а то не отображаются )))

Link to post
Share on other sites

Агонь! Мои мольбы услышаны, наконец можно будет обновить этот страшенный редактор. А помимо отсутствия загрузчика фоток и косяков с метатегами какие траблы будут еще? Или имеет смысл просто подождать чуть?

Link to post
Share on other sites

Агонь! Мои мольбы услышаны, наконец можно будет обновить этот страшенный редактор. А помимо отсутствия загрузчика фоток и косяков с метатегами какие траблы будут еще? Или имеет смысл просто подождать чуть?

Ждать чуть чуть, что именно Вы имеете ввиду?

Link to post
Share on other sites

Потестировал http://www.responsivefilemanager.com/, отлично работает с последним tinymce (4.1.7)

 

файл tinymce_init.tpl

<script language="javascript" type="text/javascript" src="design/js/tinymce/tinymce.min.js"></script>
<script language="javascript">


tinymce.init({
    selector: "textarea.editor_large,textarea.editor_small",
    language : "ru",
    plugins: [
         "advlist autolink link image lists charmap print preview hr anchor pagebreak",
         "searchreplace wordcount visualblocks visualchars insertdatetime media nonbreaking",
         "table contextmenu directionality emoticons paste textcolor responsivefilemanager"
   ],
   toolbar1: "undo redo | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | styleselect",
   toolbar2: "| responsivefilemanager | link unlink anchor | image media | forecolor backcolor  | print preview code ",
   image_advtab: true ,
   
   external_filemanager_path:"/simpla/design/js/filemanager/",
   filemanager_title:"Responsive Filemanager" ,
   external_plugins: { "filemanager" : "/simpla/design/js/filemanager/plugin.min.js"}
 });


</script>
 

заливаем из скаченного архива папку "filemanager" в "/simpla/design/js", ну и папку плагина "responsivefilemanager" в "/simpla/design/js/tinymce/plugins"

 

Далее в файле /simpla/design/js/filemanager/config/config.php прописываем нужные адреса к нашей папке с загрузками

$upload_dir = '/files/uploads/';
$current_path = '../../../../files/uploads/';
$thumbs_base_path = '../../../../files/thumbs/';

 

И не забудьте создать доп. папку для превьюшек "thumbs" в папке "/files/", установив ей права 777

Edited by Денис
Link to post
Share on other sites

Если не нужно автозаполнение keywords и description то можно удалить определенные куски js чтобы вернулось хотя бы автозаполнение урла и заголовка

 

В файле page.tpl и post.tpl удаляем эти строки:

 

function generate_meta_keywords()
{
    name = $('input[name="header"]').val();
    return name;
}

function generate_meta_description()
{
    if(typeof(tinyMCE.get("body")) =='object')
    {
        description = tinyMCE.get("body").getContent().replace(/(<([^>]+)>)/ig," ").replace(/(\ )/ig," ").replace(/^\s+|\s+$/g, '').substr(0, 512);
        return description;
    }
    else
        return $('textarea[name=body]').val().replace(/(<([^>]+)>)/ig," ").replace(/(\ )/ig," ").replace(/^\s+|\s+$/g, '').substr(0, 512);
}
 
    if($('input[name="meta_keywords"]').val() == generate_meta_keywords() || $('input[name="meta_keywords"]').val() == '')
        meta_keywords_touched = false;
 
    if(!meta_keywords_touched)
        $('input[name="meta_keywords"]').val(generate_meta_keywords());
 
    if($('textarea[name="meta_description"]').val() == generate_meta_description() || $('textarea[name="meta_description"]').val() == '')
        meta_description_touched = false;
 
        descr.val(generate_meta_description());
 

в product.tpl и category.tpl по аналогии: функции и где они вызываются

 

Хотя бы пока так для кого-то будет полезно, а там может кто допилит

Edited by Денис
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...