Здравствуйте, я покажу базовый фрагмент, чтобы получить общее представление о текстовом редакторе. В итоге это будет выглядеть примерно так.
Я наткнулся на эту штуку, когда выполнял задание на собеседовании. Начнем с разработки редактора. Создайте файл index.html.
<html> <head> <title> Text editor </title> </head> <body> </body> </html>
Теперь у нас есть пустой скелет для редактора. Откройте тот же файл. Создадим структуру дизайна.
<html> <head> <title> Text editor </title> </head> <body> <form name="compForm" method="post"> <select> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> </select> <img src="bold-text.png" width="10" height="10" /> <img src="italic.png" width="10" height="10" /> <img src="underline.png" width="10" height="10" /> <input type="file" accept="image/*" name="image" id="file" /> <div id="textBox"><p></p></div></form> </body> </html>
В приведенном выше фрагменте мы добавили основные потребности. Я добавил форму с параметрами выбора, которые будут использоваться для изменения размера шрифта. Добавлены некоторые изображения, чтобы показать символы полужирным шрифтом, курсивом и подчеркиванием. Мне пришлось добавить опцию загрузки файлов, так как это было требованием. Итак, я добавил тип входного файла. Наконец, я добавил тег div с идентификатором textBox, который будет нашим текстовым полем для редактирования. Давайте посмотрим, как это выглядит.
Кроме того, мне не нужна кнопка выбора файла. Вместо этого я добавлю текст «Добавить изображение». Точно так же я сделаю div (текстовое поле) редактируемым. Давайте сделаем код.
<input type="file" accept="image/*" name="image" id="file" style="display:none;"> <label for="file" style="cursor: pointer;">Add Image</label> <div id="textBox" contenteditable="true"><p></p></div>
Вы можете увидеть приведенный выше код. Я добавил CSS в тип файла style=”display:none”. Это скроет кнопку загрузки файла. Поэтому я добавил метку для выделения кнопки изображения в виде метки с именем «Добавить изображение» и задал стиль для указателя курсора. С другой стороны, я добавил атрибут с именем contenteditable="true", который сделает div редактируемым. Давайте посмотрим.
Несмотря на добавление contenteditable = «true», я не могу увидеть текстовое поле, чтобы что-то написать. Поэтому я добавляю немного CSS, чтобы все заработало.
В тег ‹head› добавьте немного CSS с тегом ‹style›.
<style type="text/css">
.intLink { cursor: pointer; }
img.intLink { border: 0; }
#toolBar1 select { font-size:10px; }
#textBox {
width: 100%;
height: 200px;
border: 0.5px #000000 solid;
padding: 12px;
margin-top: 5px;
}
</style>
Это сделает редактор видимым на экране с курсором, поскольку мы добавили contenteditable = «true». Вот как это выглядит.
Наконец, дизайнерская часть почти готова. Начнем с логики. Создайте новый файл для логики с именем script.js в той же папке и прикрепите его с помощью index.html.
<script src="script.js"></script>
Откройте файл сценария и добавьте туда код.
var oDoc;
function initiateDocs() {
oDoc = document.getElementById("textBox");
}
Вышеупомянутая функция вызовет загрузку документа и назначит редактор (текстовое поле) переменной oDoc. Вернитесь к index.html и добавьте атрибут onLoad с тегом body.
<body onload="initiateDocs();">
Перейдите к файлу script.js, добавьте новую функцию, которая будет выделять жирный, курсивный и подчеркнутый текст.
function formatType(sCmd, sValue) {
document.execCommand(sCmd, false, sValue); oDoc.focus();
}
В приведенном выше коде я использовал document.execCommand, который будет использоваться для выполнения указанной команды для выбранной части редактируемого раздела. Он принимает 3 параметра:
- Команда для выполнения. то есть полужирный, курсив, подчеркивание.
- Указывает, следует ли отображать пользовательский интерфейс по умолчанию. то есть истинное, ложное.
- Значение, по которому будет выполняться команда. то есть (строка, которую вы хотите преобразовать в полужирный, курсив или подчеркнутый)
Я добавил функцию, которая будет работать с событиями. Свяжем эту функцию с действиями. Откройте index.html
<select onchange="formatType('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;">
Добавлено onchange, которое вызовет функцию formatType с параметрами.
<img src="bold-text.png" width="10" height="10" onclick="formatType('bold');" />
<img src="italic.png" width="10" height="10" onclick="formatType('italic');" />
<img src="underline.png" width="10" height="10" onclick="formatType('underline');" />
Я добавил обработчик события onclick, который будет запускать одну и ту же функцию с другими параметрами. Напротив, вы думаете, как об остальных параметрах. Я добавил значение false по умолчанию во втором параметре, так как для этого нам не нужен пользовательский интерфейс. Последним параметром должен быть выбранный вами текст.
Одновременно я добавлю еще одну функцию для обработки загрузки файлов. Откройте script.js
var loadFile = function(event) {
oDoc.focus();
formatType("insertImage", URL.createObjectURL(event.target.files[0]));
};
Чтобы выполнить эту функцию, нам нужно добавить событие в тип входного файла. вернемся к index.html
<input type="file" accept="image/*" name="image" id="file" onchange="loadFile(event)" style="display:none;">
Добавлен метод onchange и call loadfile, чтобы при загрузке файла изображение добавлялось в текстовый редактор.
Мы готовы идти.
Источник: Скачать
Удачного кодирования!
