고급 텍스트 편집기는 textarea 필드 내에 텍스트 편집 단추를 제공하는 것으로 보이며, 굵게, 기울임 꼴, 따옴표 및 그림 추가 단추와 유사 할 수 있습니다. 나는 Content management systems (drupal, joomla) 내에 텍스트 편집기 (예 : wysiwig, tinymce 등)를 추가하는 방법을 잘 알고 있지만, 포함 할 수있는 간단한 html 페이지에 API을 추가 할 수 있는지 여부는 확실하지 않습니다. 텍스트 영역.html 페이지의 텍스트 영역에 고급 텍스트 편집기를 추가 할 수 있습니까?
이러한 API를 추가하는 방법에 대한 단서가 있습니까?
사용 Quill - API가있는 크로스 브라우저 리치 텍스트 편집기. 워드 프로세서
:
<!-- Create the toolbar container -->
<div id="toolbar">
<button class="ql-bold">Bold</button>
<button class="ql-italic">Italic</button>
</div>
<!-- Create the editor container -->
<div id="editor">
<div>Hello World!</div>
</div>
<!-- Include the Quill library -->
<script src="http://quilljs.com/js/quill.js"></script>
<!-- Initialize Quill editor -->
<script>
var editor = new Quill('#editor');
editor.addModule('toolbar', { container: '#toolbar' });
</script>
정확히 내가 무엇을 찾고 있었는지 !!!! –
<!DOCTYPE html>
<html>
<head>
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script>tinymce.init({ selector:'textarea' });</script>
</head>
<body>
<textarea>Easy! You should check out MoxieManager!</textarea>
</body>
</html>
복사 &는
MoxieManager가 OP가 찾는 대상이 될 수도 있지만 답변을 통해 어떻게 또는 왜 도움이되는지 설명 할 수는 없으며 잠재적으로 알려지지 않은 .js 파일에 링크하고 누군가가 해당 사이트에 포함하도록 권하는 것은 코드가 실제로 무엇을하는지 알기. MM에 대해 이야기 할 답변을 되풀이하고 어떻게 작동하고 문제를 해결할 수 있는지 권하고 싶습니다. – brandonscript
자세한 정보를 얻으려면이 링크를 클릭하십시오! https://www.tinymce.com/download/ –
라이브러리 웹 페이지의 지침을 읽고, 어떻게 기본적인 데모 작품을보고 당신의 HTML 페이지에 아래의 코드 조각을 붙여 넣습니다. –