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/8/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 Базовый тест

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

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

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

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

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

Содержание