Содержание

TinyMCE
Обсуждение

TinyMCE

TinyMCE (англ. Tiny Moxiecode Content Editor) — это онлайн-редактор форматированного текста, выпущенный как программное обеспечение с открытым исходным кодом под лицензией GNU General Public License версии 2 или более поздней. TinyMCE использует модель freemium , которая включает бесплатный базовый редактор и платные планы с расширенными функциями. Он преобразует textareaполя HTML или другие указанные элементы HTML в экземпляры редактора.

TinyMCE разработан для интеграции с библиотеками JavaScript, такими как React , Vue.js , Angular и Stencil.js, а также с системами управления контентом, такими как Joomla! и WordPress.

Поддержка браузерами

Тип лицензии: GPL2+

Быстрый старт: TinyMCE

Загружаем в конце статьи файлы и запускаем файл index.html(index.php) с нижеприведенным кодом

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="google" value="notranslate">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <script src="/tinymce/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script>
      tinymce.init({
        selector: '#mytextarea'
      });
    </script>
  </head>
 
  <body>
    <h1>TinyMCE Quick Start Guide</h1>
    <form method="post">
      <textarea id="mytextarea">Hello, World!</textarea>
    </form>
  </body>
</html>

Базовый тест TinyMCE

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
	<meta name="google" value="notranslate">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
	<link rel="stylesheet" href="/tinymce/bootstrap/5.3.8/bootstrap.min.css">
    <script src="/tinymce/jquery/3.7.1/jquery-3.7.1.min"></script>
    <script src="/tinymce/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>
<script>
  tinymce.init({
	        selector: 'textarea',
			/*Установить язык «Русский»*/
			language:"ru",
			theme : "silver",
			/*Скрыть «Powered by TinyMCE»*/
			branding: false,
			/*Скрыть «Upgrade»*/
			promotion: false,
    plugins: [
      // Core editing features
      'anchor', 'autolink', 'charmap', 'codesample', 'emoticons', 'images', 'image', 'link', 'lists', 'media', 'searchreplace', 'table', 'visualblocks', 'wordcount',
      // Your account includes a free trial of TinyMCE premium features
      // Try the most popular premium features until Jan 5, 2025:
      'checklist', 'mediaembed', 'casechange', 'export', 'formatpainter', 'pageembed', 'a11ychecker', 'tinymcespellchecker', 'permanentpen', 'powerpaste', 'advtable', 'advcode', 'editimage', 'advtemplate', 'ai', 'mentions', 'tinycomments', 'tableofcontents', 'footnotes', 'mergetags', 'autocorrect', 'typography', 'inlinecss', 'markdown','importword', 'exportword', 'exportpdf'
    ],
    toolbar: 'undo redo code| blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | addcomment showcomments | spellcheckdialog a11ycheck typography | align lineheight | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
    tinycomments_mode: 'embedded',
    tinycomments_author: 'Author name',
    mergetags_list: [
      { value: 'First.Name', title: 'First Name' },
      { value: 'Email', title: 'Email' },
    ],
    ai_request: (request, respondWith) => respondWith.string(() => Promise.reject('See docs to implement AI Assistant')),
  });
</script>
</head>
<body>
	<div class="container mt-5">
		<form method="post">
			<div class="form-group">
				<label>Title</label>
				<input type="text" name="title" class="form-control">
			</div>
			<div class="form-group mt-4">
				<label>Content</label>
				<textarea id="tinymce">Hello, World!</textarea>
			</div>
 
			<button class="btn btn-primary mt-4">Submit</button>
		</form>
	</div>
 
</body>
</html>

TinyMCE Базовый тест

Вставка изображения из директории

в tinymce.init({ добпаляем следующий код

.js

	/*URL скрипта обработчика*/
        images_upload_url: 'postAcceptor.php',
        /* Автоматическая загрузка изображений после их выбора пользователем.*/
        automatic_uploads: true,

Создаем для примера в корне директории файл скрипта обработчика postAcceptor.php

postAcceptor.php.php

<?php
// postAcceptor.php
 
// Define allowed origins (optional)
header('Access-Control-Allow-Origin: *');
 
// Target directory
$imageFolder = "uploads/";
 
// Create directory if it doesn't exist
if (!file_exists($imageFolder)) {
    mkdir($imageFolder, 0777, true);
}
 
// Get the file and check if it's an uploaded file
reset($_FILES);
$temp = current($_FILES);
 
if (is_uploaded_file($temp['tmp_name'])){
    // Basic sanitization and extension verification
    if (preg_match("/([^\w\s\d\-_~,;\[\]\(\).])|([\.]{2,})/", $temp['name']) || !in_array(strtolower(pathinfo($temp['name'], PATHINFO_EXTENSION)), array("gif", "jpg", "png", "jpeg"))) {
        header("HTTP/1.1 400 Invalid file.");
        return;
    }
 
    // Move the uploaded file
    $filetowrite = $imageFolder . $temp['name'];
    move_uploaded_file($temp['tmp_name'], $filetowrite);
 
    // Respond with JSON including the image location
    echo json_encode(array('location' => $filetowrite));
} else {
    // Handle upload failure
    header("HTTP/1.1 500 Server Error");
}
?>

проверяем в браузере (Вставить → Изображение → Вкладка «Передать»)

В корне будет создана папка uploads куда и будет загружена картинка

tinymce_uploads.zip

Дополнения и Файлы

Демонстрации TinyMCE

Помогите улучшить Страницу

Была ли эта страница полезна для вас?-1-1+1
Сообщить о проблеме с этим контентом:polskiyvn@gmail.com

software/development/web/docs/web/wysiwyg/tinymce.txt · Последнее изменение: 2026/01/08 01:50 — VladPolskiy

Только авторизованные участники могут оставлять комментарии.