SergDrakus

[Решено] Установка TinyMCE на ocStore 2.3

46 сообщений в этой теме

Не покидает меня идея установки редактора TinyMCE на ocStore 2.3.0.2. В сети Интернет есть пара инструкций, но все они исключительно для версий ниже 2.2. В версии 2.3.0.2, которую я использую, стандартный текстовой редактор SummerNote вызывается совершенно другим способом, поэтому ни одна из этих инструкций не работает. В нужных файлах для редактирования просто нет даже похожего кода.

Каким образом можно установить TinyMCE на ocStore 2.3.0.2 ? Возможные трудности после установки меня не пугают, обновлять CMS вряд ли буду в ближайший год.

0

Поделиться этим сообщением


Ссылка на сообщение
Поделиться на других сайтах

почти таким же как описывают,

И мне кажется даже немного проще..

 

вот пример

admin\view\javascript\summernote\opencart.js

0

Поделиться этим сообщением


Ссылка на сообщение
Поделиться на других сайтах

Уважаемый, не могли бы Вы, пожалуйста, обьяснить поподробнее. Думаю многим это приглдится,

0

Поделиться этим сообщением


Ссылка на сообщение
Поделиться на других сайтах

А что пояснять?

<?php foreach ($languages as $language) { ?>
$('#input-description<?php echo $language['language_id']; ?>').summernote({
    height: 300
});
<?php } ?>

в 2.3 этого нет, а вынесено в отдельный скрипт

$(document).ready(function() {
	// Override summernotes image manager
	$('.summernote').each(function() {
		var element = this;
...

и подключение

<script type="text/javascript" src="view/javascript/summernote/summernote.js"></script>
  <link href="view/javascript/summernote/summernote.css" rel="stylesheet" />
  <script type="text/javascript" src="view/javascript/summernote/opencart.js"></script>
  

что бы заменить

нужно "удалить" эти строки и подставить свои

$('.summernote').tinymce({
    selector: "textarea#elm1",
    theme: "modern",
    language:"ru",
    width: 800,
    height: 300,
....

Т.е вставить код который рекомендуют для замены

 

ну и конечно нужные скрипты

<script type="text/javascript" src="view/javascript/tinymce/..."></script>
<script type="text/javascript" src="view/javascript/tinymce/..."></script>

Т.е. смотрите рекомендации - делайте!

Сделаете - поделитесь с сообществом

0

Поделиться этим сообщением


Ссылка на сообщение
Поделиться на других сайтах

А что пояснять?

<?php foreach ($languages as $language) { ?>
$('#input-description<?php echo $language['language_id']; ?>').summernote({
    height: 300
});
<?php } ?>

в 2.3 этого нет, а вынесено в отдельный скрипт

$(document).ready(function() {
	// Override summernotes image manager
	$('.summernote').each(function() {
		var element = this;
...

и подключение

<script type="text/javascript" src="view/javascript/summernote/summernote.js"></script>
  <link href="view/javascript/summernote/summernote.css" rel="stylesheet" />
  <script type="text/javascript" src="view/javascript/summernote/opencart.js"></script>
  

что бы заменить

нужно "удалить" эти строки и подставить свои

$('.summernote').tinymce({
    selector: "textarea#elm1",
    theme: "modern",
    language:"ru",
    width: 800,
    height: 300,
....

Т.е вставить код который рекомендуют для замены

 

ну и конечно нужные скрипты

<script type="text/javascript" src="view/javascript/tinymce/..."></script>
<script type="text/javascript" src="view/javascript/tinymce/..."></script>

Т.е. смотрите рекомендации - делайте!

Сделаете - поделитесь с сообществом

Спасибо за ответ! Не подскажите, как называется файл с выводом скриптов? Что-то не могу его найти, юзаю поиск по всем файлам.

0

Поделиться этим сообщением


Ссылка на сообщение
Поделиться на других сайтах

как называется файл с выводом скриптов?

Каких скриптов?

0

Поделиться этим сообщением


Ссылка на сообщение
Поделиться на других сайтах

Каких скриптов?

<script type="text/javascript" src="view/javascript/summernote/summernote.js"></script>

<link href="view/javascript/summernote/summernote.css" rel="stylesheet" />

<script type="text/javascript" src="view/javascript/summernote/opencart.js"></script>

0

Поделиться этим сообщением


Ссылка на сообщение
Поделиться на других сайтах

а что в шаблонах не таких строк?

 

А версия?

0

Поделиться этим сообщением


Ссылка на сообщение
Поделиться на других сайтах

Версия ocStore 2.3.0.2.

Единственное место, где все эти строки вместе – это файл /admin/view/template/extension/openbay/ebay_new.tpl

В трех файлах упоминаются лишь некоторые эти скрипты. Вот названия этих файлов – blog_form.tpl, record_form.tpl и blog_widgents.tpl

0

Поделиться этим сообщением


Ссылка на сообщение
Поделиться на других сайтах

Ну.. почему нельзя хоть чуть-чуть напрячься?

Ну..я понимаю, что бурная ночь

	protected function getForm() {
    //CKEditor
    if ($this->config->get('config_editor_default')) {
        $this->document->addScript('view/javascript/ckeditor/ckeditor.js');
        $this->document->addScript('view/javascript/ckeditor/ckeditor_init.js');
    } else {
        $this->document->addScript('view/javascript/summernote/summernote.js');
        $this->document->addScript('view/javascript/summernote/lang/summernote-' . $this->language->get('lang') . '.js');
        $this->document->addScript('view/javascript/summernote/opencart.js');
        $this->document->addStyle('view/javascript/summernote/summernote.css');
    }
0

Поделиться этим сообщением


Ссылка на сообщение
Поделиться на других сайтах

 

Ну.. почему нельзя хоть чуть-чуть напрячься?

Ну..я понимаю, что бурная ночь

	protected function getForm() {
    //CKEditor
    if ($this->config->get('config_editor_default')) {
        $this->document->addScript('view/javascript/ckeditor/ckeditor.js');
        $this->document->addScript('view/javascript/ckeditor/ckeditor_init.js');
    } else {
        $this->document->addScript('view/javascript/summernote/summernote.js');
        $this->document->addScript('view/javascript/summernote/lang/summernote-' . $this->language->get('lang') . '.js');
        $this->document->addScript('view/javascript/summernote/opencart.js');
        $this->document->addStyle('view/javascript/summernote/summernote.css');
    }

Спасибо! Скрипты подключил следующей строкой в файле Product. (путь /admin/controller/catalog/)

        $this->document->addScript('view/javascript/tinymce/jquery.tinymce.min.js');
        $this->document->addScript('view/javascript/tinymce/tinymce.min.js');

Теперь ковыряю opencart.js, расположенный в Summer Note.

 

Заменил исходные данные в файле Opencart.js : 

$(element).summernote({
disableDragAndDrop: false,
height: 600,
lang: lang,
emptyPara: '',
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['fontsize', ['fontsize']],
['fontname', ['fontname']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'image', 'video']],
['view', ['fullscreen', 'codeview']]
],
buttons: {
     image: function() {
var ui = $.summernote.ui;


// create button
var button = ui.button({
contents: '<i class="note-icon-picture" />',
tooltip: $.summernote.lang[$.summernote.options.lang].image.image,
click: function () {
$('#modal-image').remove();


$.ajax({
url: 'index.php?route=common/filemanager&token=' + getURLVar('token'),
dataType: 'html',
beforeSend: function() {
$('#button-image i').replaceWith('<i class="fa fa-circle-o-notch fa-spin"></i>');
$('#button-image').prop('disabled', true);
},
complete: function() {
$('#button-image i').replaceWith('<i class="fa fa-upload"></i>');
$('#button-image').prop('disabled', false);
},
success: function(html) {
$('body').append('<div id="modal-image" class="modal">' + html + '</div>');


$('#modal-image').modal('show');


$('#modal-image').delegate('a.thumbnail', 'click', function(e) {
e.preventDefault();


$(element).summernote('insertImage', $(this).attr('href'));


$('#modal-image').modal('hide');
});
}
}); 
}
});


return button.render();
}
   }
});

На вот это

$('.summernote').tinymce({


});

Редактор заработал, теперь буду ковырять конфиг (подстраивать под себя). Огромное вам спасибо!

 

Изменено пользователем SergDrakus
0

Поделиться этим сообщением


Ссылка на сообщение
Поделиться на других сайтах

еперь ковыряю opencart.js, расположенный в Summer Note.

 

Зачем его трогать

 

Сделайте свой по принципу

$this->document->addScript('view/javascript/tinymce/opencart.js');

 

 

А родной не трогайте

0

Поделиться этим сообщением


Ссылка на сообщение
Поделиться на других сайтах

Зачем его трогать

 

Сделайте свой по принципу

$this->document->addScript('view/javascript/tinymce/opencart.js');

А родной не трогайте

Да, спасибо за дельный совет. Сделал запись вида:

 //  $this->document->addScript('view/javascript/summernote/opencart.js');
        $this->document->addScript('view/javascript/tinymce/opencart.js');

Классический SummerNote закомментировал. Вдруг пригодится в будущем.

Теперь нужно прикрутить менеджер изображений к TinyMCE и дело в шляпе)

0

Поделиться этим сообщением


Ссылка на сообщение
Поделиться на других сайтах

Если кому интересно, то прикрепил к TinyMCE для OpenCart 2.3 (ocStore) редактор файлов filemanager

Делал все по инструкции этой: http://realister.ru/page/zamena-redaktora-summernote-v-opencart-20x-na-tinymce-s-integrirovannym-responsive-filemanager

В файл конфигурации TinyMCE (opencart.js) я просто подписал 

external_filemanager_path:"/filemanager/",   filemanager_title:"Responsive Filemanager" ,
   external_plugins: { "filemanager" : "/filemanager/plugin.min.js"},
   style_formats: [
        {title: 'Bold text', inline: 'b'},
        {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
        {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
        {title: 'Example 1', inline: 'span', classes: 'example1'},
        {title: 'Example 2', inline: 'span', classes: 'example2'},
        {title: 'Table styles'},
        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
    ],
0

Поделиться этим сообщением


Ссылка на сообщение
Поделиться на других сайтах

Ну вот видите - не так страшен чЬОрт як його малюють

 

You never know what you can do till you try

0

Поделиться этим сообщением


Ссылка на сообщение
Поделиться на других сайтах

Для полного счастья решил прикрутить к этой конструкции CodeMirror, но что-то не работает решение с гит-хаба.

0

Поделиться этим сообщением


Ссылка на сообщение
Поделиться на других сайтах

Прикрепил к TinyMCE плагин CodeMirror последней версии.

Делал все по этой инструкции https://github.com/christiaan/tinymce-codemirror

Файл сборки CodeMirror (последний) можно скачать с официального сайта.

В файле OpenCart.js (отвечает за настройку TinyMCE) обязательно требуется добавить код вида:

codemirror: {
    indentOnInit: true, // Whether or not to indent code on init.
    path: 'codemirror', // Path to CodeMirror distribution
    config: {           // CodeMirror config object
       mode: 'application/x-httpd-php',
       lineNumbers: true
    },
    width: 900,         // Default value is 800
    height: 700,        // Default value is 550
    jsFiles: [          // Additional JS files to load
       'mode/clike/clike.js',
       'mode/php/php.js'
    ]
  }
0

Поделиться этим сообщением


Ссылка на сообщение
Поделиться на других сайтах

Отключил встроенную проверку орфографии (актуальна только для англ и других языков командой:

gecko_spellcheck:true

Теперь всегда срабатывает классическая система проверки орфографии, встроенная в операционные системы и браузеры.

0

Поделиться этим сообщением


Ссылка на сообщение
Поделиться на других сайтах

Этот редактор имеет привычку ставить неразрывные пробелы &nbsp. На WordPress я поборол эту проблему тем, что при публикации статьи все неразрывные пробелы напрочь удалялись. Код привожу ниже. Можео ли его как-то абаптироввть под OpenCart?

function remove_non_breaking_spaces_from_content( $data ) {

$data['post_content'] = preg_replace( '#\xC2\xA0| #', ' ', $data['post_content'] );

return $data;

}

add_action( 'wp_insert_post_data', 'remove_non_breaking_spaces_from_content' );

0

Поделиться этим сообщением


Ссылка на сообщение
Поделиться на других сайтах

при выводе - да

 

$data['description'] = preg_replace( '#\xC2\xA0| #', ' ', html_entity_decode($product_info['description'], ENT_QUOTES, 'UTF-8'));

 

но это как-то выглядит, как костыль

 

предпочитаю читать официальную документацию

 

entity_encoding: 'raw'

http://archive.tinymce.com/wiki.php/Configuration3x:entity_encoding

0

Поделиться этим сообщением


Ссылка на сообщение
Поделиться на других сайтах

при выводе - да

 

$data['description'] = preg_replace( '#\xC2\xA0| #', ' ', html_entity_decode($product_info['description'], ENT_QUOTES, 'UTF-8'));

 

но это как-то выглядит, как костыль

 

предпочитаю читать официальную документацию

 

entity_encoding: 'raw'

http://archive.tinymce.com/wiki.php/Configuration3x:entity_encoding

Увы, но данная конструкция (entity_encoding: 'raw') запрещает отображение nbsp только в админке. Стоит опубликовать материал, как в разметке видны все эти nbsp.

0

Поделиться этим сообщением


Ссылка на сообщение
Поделиться на других сайтах

Подскажите пожалуйста, в какой файл требуется вставить эту конструкцию?

$data['description'] = preg_replace( '#\xC2\xA0| #', ' ', html_entity_decode($product_info['description'], ENT_QUOTES, 'UTF-8'));
0

Поделиться этим сообщением


Ссылка на сообщение
Поделиться на других сайтах

 

Подскажите пожалуйста, в какой файл требуется вставить эту конструкцию?

$data['description'] = preg_replace( '#\xC2\xA0| #', ' ', html_entity_decode($product_info['description'], ENT_QUOTES, 'UTF-8'));

Мне не сложно подсказать -НО! Потрудитесь поискать сами, ведь я привел "уникальные" строчки, такие как $data['description']  $product_info['description']

0

Поделиться этим сообщением


Ссылка на сообщение
Поделиться на других сайтах

Задачу решил.

Вставлял в файл product.php по пути /catalog/controller/product

 

Нашел строку

$data['description'] = html_entity_decode($product_info['description'], ENT_QUOTES, 'UTF-8');
заменил на
$data['description'] = preg_replace( '#\xC2\xA0| #', ' ', html_entity_decode($product_info['description'], ENT_QUOTES, 'UTF-8'));

Пару раз перезагрузил браузер, почистил все кеши. Обновил страницу с товаром. Все nbsp пропали. Отлично! Огромное спасибо!

Изменено пользователем SergDrakus
0

Поделиться этим сообщением


Ссылка на сообщение
Поделиться на других сайтах

У меня остался последний вопрос, над которым я работаю уже больше двух часов. Как в CodeMirror (подсветка текста) заменить тему на одну из вариантов в папке theme? В какие файлы я не вносил изменения (в пределах папки tinymce), ничего не помогает. Как задний фон был белый (стандратная тема какая-то), таким он и остался.

0

Поделиться этим сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

Комментарии могут оставлять только зарегистрированные пользователи

Создать аккаунт

Зарегистрировать новый аккаунт в нашем сообществе. Это несложно!


Зарегистрировать новый аккаунт

Войти

Есть аккаунт? Войти.


Войти

  • Недавно просматривали   0 пользователей

    Ни один зарегистрированный пользователь не просматривает эту страницу.