Различия

Показаны различия между двумя версиями страницы.

--- software:development:web:docs:web:wysiwyg:tinymce [2026/01/07 22:13] – [Дополнения и Файлы] VladPolskiy
+++ software:development:web:docs:web:wysiwyg:tinymce [2026/01/08 01:50] (текущий) – [Дополнения и Файлы] VladPolskiy
@@ Строка 12: / Строка 12: @@
 \\
 ===== Быстрый старт: TinyMCE =====
-Загружаем в конце статьи файлы и запускаем файл index.html(index.php) с нижеприведенным кодом
+Загружаем [[tinymce#Дополнения и Файлы|в конце статьи]] файлы и запускаем файл index.html(index.php) с нижеприведенным кодом
 <code php index.html>
 <!DOCTYPE html>
@@ Строка 37: / Строка 37: @@
 </html>
 </code>
+\\
+{{:software:development:web:docs:web:wysiwyg:tinymce_install_base_0.png?|}}
+===== Базовый тест TinyMCE =====
+<code html 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>
+</code>
+\\
+{{:software:development:web:docs:web:wysiwyg:tinymce_install_base_1.png?|}}
+\\
+{{ :software:development:web:docs:web:wysiwyg:tinymce_base_test.zip |TinyMCE Базовый тест}}
+===== Вставка изображения из директории =====
+в ''tinymce.init({'' добпаляем следующий код
+<code js .js>
+	/*URL скрипта обработчика*/
+        images_upload_url: 'postAcceptor.php',
+        /* Автоматическая загрузка изображений после их выбора пользователем.*/
+        automatic_uploads: true,
+</code>
+Создаем для примера в корне директории файл скрипта обработчика **postAcceptor.php**
+<code 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");
+}
+?>
+</code>
+проверяем в браузере (Вставить -> Изображение -> Вкладка "Передать")
+\\
+{{:software:development:web:docs:web:wysiwyg:tinymce_install_base_3.png?|}}
+\\
+В корне будет создана папка **uploads** куда и будет загружена картинка
+\\
+{{:software:development:web:docs:web:wysiwyg:tinymce_install_base_4.png?|}}
+\\
+{{ :software:development:web:docs:web:wysiwyg:tinymce_uploads.zip |}}
 ===== Дополнения и Файлы =====
+  * [[github>/tinymce/tinymce-demos|Демонстрации TinyMCE]]
   * {{ :software:development:web:docs:web:wysiwyg:tinymce_8.3.1.zip |TinyMCE 8 8.3.1.zip}}
   * {{ :software:development:web:docs:web:wysiwyg:langs_8.zip |TinyMCE 8 Community Language Packs}}
   * {{ :software:development:web:docs:web:wysiwyg:langs_7.zip |TinyMCE 7 Community Language Packs}}
   * {{ :software:development:web:docs:web:wysiwyg:tinymce_8_lang_pack.zip |TinyMCE 8 Language Packs}}
+  * {{ :software:development:web:docs:web:wysiwyg:tinymce_base_test.zip |TinyMCE Базовый тест}}
+  * {{ :software:development:web:docs:web:wysiwyg:tinymce_uploads.zip |TinyMCE тест загрузки картинки}}
+  * {{ :software:development:web:docs:web:wysiwyg:bootstrap-main.zip |Bootstrap 5.3.8}}